0. 事前にWebページを準備する 1. Google Maps APIのページでサインアップとAPIキーの取得を行う 1) 左上の方にある「Sign up for an API key」をクリック。 2) 英語でごちゃごちゃ書いてあるが理不尽なことは書いてないと信じて「I have read and agree with the terms and conditions」の左のチェックボックスをチェック。 3) 「My web site URL:」に事前に準備したWebページのURLを入力。 4) 「Generate API Key」ボタンを押下。 5) KeyとGoogleマップを表示させるコードのサンプルが表示される。 2. Googleマップのサンプルを実行 1) 事前に準備したWebページにサンプルコードを丸ごと貼り付ける。 2) そのページをブラウザで表示させるとGoogleマップが表示される。 ここまでは無問題だったが、4月3日にGoogle Maps APIのバージョンが上がったらしく、サンプルコードが資料のものと異なり、GMapクラスがGMap2クラスに変わっていてそのままでは使えなかった。やむなくGoogle公式ドキュメントを参考に作ってみたのが以下。 3. 中心地点の変更 1) map.setCenter()メソッドで緯度と経度と拡大率を指定する。 map.setCenter(new GLatLng(37.4419, -122.1419), 13); ( 第一引数が緯度と経度、第二引数が拡大率になっている) 4. コントローラーを貼り付ける 1) 「map.setCenter(point, 18);」の次行に map.addControl(new GLargeMapControl()); を追加(拡大率や位置を変更するコントローラ)。 2) 更に次の行に map.addControl(new GMapTypeControl()); を追加(「マップ」と「サテライト」切り替えボタン)。 5. マーカを追加する 1) マーカオブジェクトの生成。 4の2)の次行に var marker = new GMarker(point); を追加。 2) マーカの表示。 更に次の行に map.addOverlay(marker); を追加。 3) 吹き出しの表示。 更に次の行に GEvent.addListener(marker, “click”, function() { marker.openInfoWindowHtml(“XXX“); }); を追加(「任意のサイト」の部分には適当なURLを指定する)。