GoogleMapsAPIで地図を表示する方法です。
- 表示したい場所の経度緯度を準備
- GoogleMapsAPIのためのJavascriptを読込
- 地図を表示するJavascript設定
表示したい場所の経度緯度を準備
Googleの地図検索で、地図に表示したい地点の軽度と緯度を取得します。
たとえば富士山の場合、地図検索結果はこのように表示されます（2015年10月現在）
緯度と経度は、この検索結果のアドレス内に含まれています。
＠の後ろに緯度,経度の書式でありますので、これをコピーして使います。
https://www.google.co.jp/maps/place/〒418-0112+静岡県富士宮市北山+富士山/@35.3605555,138.7277777,17z/data=!3m1!4b1!4m2!3m1!1s0x60196290556df7cf:0x8d5003885b877511
- 富士山の緯度 … 35.3605555
- 富士山の経度 … 138.7277777
地図をクリックして緯度経度を取得
地図内の特定ポイントの緯度経度を取得することもできます。
ルート表示で、経由ポイントを指定したいとき便利です。
- 右クリックメニューからメニュー表示
- 「この場所について」で画面下部へ詳細表示
- 画面下の表示へ記載されている
GoogleMapsAPIのためのJavascriptを読込
地図を設置したいhtmlで、GoogleMapsAPIのためのJavascriptを読込みます。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
地図を表示するJavascript設定
先ほど読み込んだGoogleMapsAPIのためのJavascriptよりも後でスクリプトを記述します。
読込順さえ前後しなければ、もちろん外部スクリプト化して大丈夫です。
- onliadイベントでページ読み込み後にスクリプトを実行する準備
- 取得していた緯度経度をGoogleMapsの書式に当てはめる
var init = function(){
var fuji = {
lat: 35.3605555,
lng: 138.7277777
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fuji,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
}
if( window.addEventListener ) {
window.addEventListener( 'load', init, false );
}
else if( window.attachEvent ) {
window.attachEvent( 'onload', init);
}
else {
window.onload = init;
}
GoogleMapsAPIの書式は8～13行目の部分です。
3～6行目で緯度経度を変数化して、GoogleMapsAPIの書式に埋め込んでいます。
その他の外枠は、jQueryなしのDOM読み込み後実行処理で紹介した書式で
ページ読み込み後に実行の処理を設定してあります。
参考：
Google Maps Javascript API | Google Developers
注意事項
オーバーレイや折りたたみメニューなど、ページが読み込まれた段階で地図を表示するDOM要素が不可視状態になっている場合
DOMを可視化した後で地図をレンダリングしないと、地図の位置がずれます。