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>

住所から緯度・経度を求める

以下のテキストボックスに住所や地名を入力して「OK」を押すと、情報ウィンドウに緯度と経度が表示されますので、選択&コピーしてください。

まとめ

今回はシンプルな地図を表示しました。実際には色々な機能がありますので、APIについて詳しく知りたい場合は以下のグーグルのページを参照してください。 Google Maps JavaScript API