Maps API Version 2で作ったGoogleマップを、タスクマザーのアクセスページとして、設定していた(旧アクセスマップ)。
2009年5月下旬にバージョン3(Google Maps API V3)が公開になったので、早速こちらで新アクセスマップを作ってみた。
Version3での変更点
・Google Maps API Keyの取得が不要
Keyを取得することは、設置するサイトのURLを入れるだけで発行されるので実は簡単だけど、ワンステップ作業が減るのでマル◎
・Javascript、コードの変更
これはV1→V2からの変更時も同じだったので、サンプルなどを参照することで簡単なものはすぐに作成できる。
左上のスライダーバーが、現在、googleマップで表示されている新しいタイプに変更になっている。
ただ、ストリートビューまでは対応していないらしい。
・iPhone(GPS機能をもったもの)などのデバイスにも対応
なるほどバージョンアップは、確かに必要だ。今後、いろいろなデバイスにも対応するさまざまなAPIが作られるんだろうな。
さて、Google Maps API V3を利用したGoogleマップ、「タスクマザー・アクセスマップ」の作成方法
Google Maps API V3ページにアクセス。
英語なのでちょっと面食らうが、英語は読まなくてもＯＫ。
１４種類のサンプルが用意されており、作りたいイメージのソースをエディタに貼り付けて改造を行う。
今回は、マーカーをオリジナルにしたかったのと、マーカーからの吹き出しを表示させたかったので、
icon-simple.htmlのソースをベースに、
infowindow-simple.htmlページ(マーカーをクリックすると吹き出しがでる)のコードを追加、改造した。
１．icon-simple.htmlのソース
------------------------
1: <html>
2: <head>
3: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4: <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5: <title>Google Maps JavaScript API v3 Example: Simple Icons</title>
6: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
7: <script type="text/javascript">
8: function initialize() {
9: var myOptions = {
10: zoom: 4,
11: center: new google.maps.LatLng(-33, 151),
12: mapTypeId: google.maps.MapTypeId.ROADMAP
13: }
14: var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
15:
16: var image = 'images/beachflag.png';
17: var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
18: var beachMarker = new google.maps.Marker({
19: position: myLatLng,
20: map: map,
21: icon: image
22: });
23: }
24: </script>
25: </head>
26: <body style="margin:0px; padding:0px;" onload="initialize()">
27: <div id="map_canvas" style="width:100%; height:100%"></div>
28: </body>
29: </html>
------------------------
※行頭の1:などの行数は、ソースに含まれていない(説明のために追記)
ステップ数も29行と至ってシンプル。
6行：GPSなどの位置情報がわかるデバイスの場合は、”sensor=”をtrueにする。
10行：zoom 地図のズームレベル、数字が大きいと拡大
11行：表示させたい中央の緯度、経度を設定
表示させたい緯度、経度を簡単に求めるツール、緯度/経度の取得～Geekなぺーじで取得すると便利。
「Geekなぺーじ」さんでは、Google Maps API V2のgoogleマップの作成方法を詳しく紹介している。V2の作成時には、いろいろ参考にさせてもらった、感謝。
もしくは、Google Maps API V3 Demo GalleryのZipCode Locatorでも、マーカーしたい位置に十字マークをあわせると、緯度・経度が表示される。
16行：マーカーに表示したい画像を、あらかじめFTPなどでアップロードしておく。
17行：マーカーを表示させたい緯度、経度を設定
27行：地図のサイズを設定したい場合は、ピクセル表示などに変更可能
２．マーカーに吹き出し(ウィンドウ)をつける場合。
22行直下(22と23の間)に以下のコードを追加する。
24-1: var infowindow = new google.maps.InfoWindow(
24-2: { content: '噴出しに表示したい文字 hogehoge・・・',
24-3: size: new google.maps.Size(200,30)
24-4: });
24-5:
24-6: google.maps.event.addListener(beachMarker, 'click', function() {
24-7: infowindow.open(map,beachMarker);
24-8: });
24-9: google.maps.event.trigger(beachMarker, 'click');
24-2行：表示させたい文字を設定、HTMLタグもＯＫ
24-3行：ウィンドウの幅と高さ
24-9行：これを削除した場合は、マーカーをクリックすると噴出し(ウィンドウ)が表示される。
私が改造したサンプルマップは、Google Maps API V3サンプルマップにアクセスし、ソース表示を参考にして改造してください。
３．MT(MovableType)に適応させる場合
iframタグを利用して、表示させる。
以下のように、MTのコンテンツ幅におさまる大きさに地図のサイズを調整後(27行)、アップロードしたマップを設定。
------------------------
<iframe src="http://hogehoge.html" width="表示したいサイズ" height="表示したいサイズ" scrolling="NO" frameborder="0"></iframe>
------------------------
ＭＴのブログ記事の本文フォームに上記タグを、ソース表示(タグが反映される)モード(<A>モード)に切り替えて、貼り付ける。
これでグーグルマップ by Google Maps API V3が完成。
完成したMT対応アクセスマップ。
Google Maps API V2のグーグルマップは、タスクマザーの旧アクセスマップ。
こちらは、maps API keyを取得して、V2のコードで作成。
V2コードは、このマップソースを参考に。
