グーグルマップAPI v3を使って地図を表示

Googleが提供している「Google Maps JavaScript API」を使って地図を表示します。 APIを使用することで埋め込み式よりも色々なカスタマイズが出来ます。ここではスクロールズームを無効にしたシンプルな地図を表示します。

今回は地図を表示することを目的としているためAPIキーなしで説明しています。本格的に使用するならばAPIキーの取得をお勧めします。2016年6月22日から新規のサイトではAPIキーが必要となりました。(2016/10/14 追記)

地図の表示

html

HTMLは以下の1行だけです。


<div id="map-canvas"></div>

CSS

CSSでは地図の大きさを指定しています。


#map-canvas {
	width:100%;
	height:320px;
}

javascript

ライブラリを読み込みます。 jQueryで関数を実行していますので一緒に読み込みます。


<script src="./js/jquery-1.11.3.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false" charset="UTF-8"></script>

オプションは最低限のものだけにしています。スクロールズーム(scrollwheel)はデフィルトで有効になっているので無効にしています。地図の色は「styles」に値をセットして変えています。


<script>
function initMap() {
	/* 緯度・経度を取得 ここでは東京都庁にしています */
	var latlng = new google.maps.LatLng(35.6894875, 139.69170);

	/* オプションの設定 */
	var option = {
		zoom: 15,
		center: latlng,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [{
			stylers: [
				{ hue: '#000' },
				{ gamma: 0.8 },
				{ saturation: -100 }
			]
		}]
	};
	/* 地図とマーカーを表示 */
	var map = new google.maps.Map(document.getElementById("map-canvas"), option);
	new google.maps.Marker(
		{ map: map, position: latlng }
	);
}
/* 読み込みが終わったら地図を表示する */
$(document).ready(function() {
	initMap();
});
</script>