GoogleMapsAPIで地図を表示

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を読込みます。

<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.googleapis.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;<br />

地図を表示するJavascript設定

先ほど読み込んだGoogleMapsAPIのためのJavascriptよりも後でスクリプトを記述します。
読込順さえ前後しなければ、もちろん外部スクリプト化して大丈夫です。

onliadイベントでページ読み込み後にスクリプトを実行する準備
取得していた緯度経度をGoogleMapsの書式に当てはめる

<br />
var init = function(){</p>
<p>	var fuji = {<br />
		lat: 35.3605555,<br />
		lng: 138.7277777<br />
	};</p>
<p>	var map = new google.maps.Map(document.getElementById('map'), {<br />
		center: fuji,<br />
		zoom: 8,<br />
		mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
		scrollwheel: false<br />
	});<br />
}<br />
if( window.addEventListener ) {<br />
	window.addEventListener( 'load', init, false );<br />
}<br />
else if( window.attachEvent ) {<br />
	window.attachEvent( 'onload', init);<br />
}<br />
else {<br />
	window.onload = init;<br />
}<br />

GoogleMapsAPIの書式は8～13行目の部分です。
3～6行目で緯度経度を変数化して、GoogleMapsAPIの書式に埋め込んでいます。

その他の外枠は、jQueryなしのDOM読み込み後実行処理で紹介した書式で
ページ読み込み後に実行の処理を設定してあります。

参考：
Google Maps Javascript API | Google Developers

注意事項

オーバーレイや折りたたみメニューなど、ページが読み込まれた段階で地図を表示するDOM要素が不可視状態になっている場合
DOMを可視化した後で地図をレンダリングしないと、地図の位置がずれます。

表示したい場所の経度緯度を準備

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

GoogleMapsAPIのためのJavascriptを読込

地図を表示するJavascript設定

注意事項

関連記事