Google MAPS APIの使い方に続いて、応用編としてカスタマイズの方法を紹介します。カスタマイズできないと表示の意味がありませんので...。
- 地図の場所を指定する（地図の中央部分を緯度と経度で指定する）
- 地図のズームを調節する
- コントロールインターフェイスを選択する
- マーカーの挿入
- 地図表示の大きさを指定する
地図の場所を指定する
地図の場所を指定するには経度と緯度を求める必要があります。Geocoding(ジオコーディング)というGoogleのサービスを利用して住所や有名な地名から緯度・経度を求めることができます。例えばですが、緯度経度は以下のようになっています。世界中どこでも調べることができます。
- 東京タワー 35.65861, 139.745447
- 横浜ランドマークタワー 35.45457, 139.63142
- 東京ディズニーランド 35.632546, 139.881328
- 世田谷区下北沢 35.661637, 139.66656
- うちのじいさんの家 43.490765, 142.211436
...これで地図のセンター部分に指定の場所が表示されるようになります。
var centerPos = new google.maps.LatLng(35.687167,139.757412); ←緯度経度を指定
...
地図のズームを調節する
地図のズームをお好みの状態にするには、mapOptionsのzoomで設定します。zoomの設定は1〜21まで設定できて、21が最大のズームアップとなります。1の設定では殆ど世界地図です。14〜16辺りが通常の地図として表示できる一般的な範囲です。(いずれにしろ拡大と縮小がクライアント側でもできます。）...
var mapOptions = {
zoom : 14, ←ここでZoomを指定
center : centerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
...
コントロールインターフェイスを選択する
Mapのコントロールインターフェイスには、- 地図の拡大縮小（ズーム）の調節
- 地図の移動
- 地図の種類の選択
すべてのコントロールインターフェイスの非表示にする
...という風にオプション内のdisableDefaultUIプロパーティでtrueを指定します。他のオプションとの間には,(カンマ)が必要なので注意してください。またdisableDefaultUI : tureを設定した時点ですべてのインターフェイスがリセットされて表示されなくなります。
var mapOptions = {
zoom : 18,
center : centerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI : true ←この項目を追加
};
...
マップタイプの選択インターフェイス
デフォルトでは地図の種類を選択するインターフェイスがラジオボタン式で表示されます。それらを画面の大きさによって適当な形で表示してくれるDEFAULTと従来のラジオボタン型にフィックスする方法、ドロップダウン式にフィックスする方法を選択できます。mapTypeControlプロパティーでtureを、mapTypeControlOptionsプロパティーからスタイルを指定します。
| 要素 | 説明 |
|---|---|
| google.maps.MapTypeControlStyle.DEFAULT | デフォルトのマップタイプコントロール。ウィンドウサイズとその他要素によって伸縮します。 |
| google.maps.MapTypeControlStyle.HORIZONTAL_BAR | 標準的な横型のラジオボタンバー |
| google.maps.MapTypeControlStyle.DROPDOWN_MENU | ドロップダウン型 |
...こんな感じでいろいろとカスタマイズできますが、あまりにもたくさんのプロパティーがあるのでここではその他の機能を割愛。Google Maps Designerというとてもよいサイトがあるのでこちらをご覧ください。
var mapOptions = {
zoom : 15,
center : centerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
...
//マップタイプのコントロール
mapTypeControl : true, //←これらを追加
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU //スタイルを指定
}
};
...
マーカーの挿入
マーカーを挿入して地図上のポイントを指し示すことができます。Google Map特有のバルーンのようなポイントです。...以上の部分をスクリプト内に追加します。これで確実に案内地図が作れます。
var map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
var markerOptions = {
position : centerPos, //このままでいいと思います
map : map, //このままでいいと思います。
title : "皇居はここです。" //オンマウスで文字が表示できます。
};
var marker = new google.maps.Marker(markerOptions);
...
地図表示の大きさを指定する
表示する地図の大きさを指定するには、<body>タグ内に貼り付けた<div>要素のスタイルシートで指定します。<body onload="initialize()">HTMLタグのCSS設定なみなので簡単です。いわゆるJavascriptでの表示方法と同じなので楽チンです。それにしてもこんなサービスをタダで提供しているんだから凄いですね。
<div id="google_map" style="width:500px;height:500px"></div>
</body>
