Google Mapの埋め込み方

カテゴリー:javascript

Google Mapをサイトに埋め込むときいつも方法を忘れて調べる羽目になっているので、
今度こそしっかりメモして起きたと思います。
たぶんこのメモがあればMaMoTaKuがいつも埋め込む程度のものなら問題ないはず。

まずはHTML

まずHTML側の準備が必要ですよね?
てことでサンプルコード

<!-- gMap start -->
<div id="gMap" style="width:300px; height:300px;"></div>
<!-- gMap  end -->

これだけでいいよね、
忘れちゃいけないのがjsを使ってgMapの中に地図を表示するんだけど、
横幅・高さがちゃんとないと表示されないのでそこだけ注意!
cssは書くのが手間だったのでスタイルべた書き笑
実際に実装するときはちゃんとcssに書いてあげてください。

あとはjsを読み込むだけ

以下のコードをbodyの占めタグ直前か、headの中に書いてあげてください

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
google.maps.event.addDomListener(window, "load", function() {
	var mapdiv = document.getElementById("gMap"); //IDを入力
	var latlng = new google.maps.LatLng(35.686258, 139.752835);	//緯度経度
	var myOptions = {
		zoom         : 14,										//ズームのレベルを指定。数値が小さいほど、より広域に表示
		center       : latlng,									//表示の基点となる緯度経度を入力
		mapTypeId    : google.maps.MapTypeId.ROADMAP,
		scaleControl : true,									//地図の縮尺(200mとかの目盛)。デフォルトは無効。
		scrollwheel  : false									//マウスホイールでの拡大・縮小を無効
	}
	var map = new google.maps.Map(mapdiv, myOptions);
	var marker = new google.maps.Marker({
		position : latlng,										//ピンの緯度経度を入力
		map      : map
	});
});
</script>

これで完成だと思います