GoogleMapsAPIで地図を表示

GoogleMapsAPIで地図を表示する方法です。

  1. 表示したい場所の経度緯度を準備
  2. GoogleMapsAPIのためのJavascriptを読込
  3. 地図を表示する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

地図をクリックして緯度経度を取得

地図内の特定ポイントの緯度経度を取得することもできます。
ルート表示で、経由ポイントを指定したいとき便利です。

  1. 右クリックメニューからメニュー表示
  2. 「この場所について」で画面下部へ詳細表示
  3. 画面下の表示へ記載されている

GoogleMapsで特定ポイントの緯度経度を取得

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を可視化した後で地図をレンダリングしないと、地図の位置がずれます。

関連記事

Pocket