Google Mapで地図を表示

APIキーが不要になって、作る側としては大変便利になった。
今回もサイトに組み込むが久しぶりなので、ゼロからつくってみる。

利用するのは、Maps JavaScript API。
現行の最新バージョンは V3。

チュートリアルに従って作業をするも、２つ物足りない。

１、緯度・経度ではなく、住所から地図を表示したい。

たしかに以前作っていたときも、DBに緯度・経度入れてたような・・・。
住所から表示する方法ないか検索したら、これなら出来そうというものが。

同じAPIをつかって住所から緯度・経度を取得し、その後地図を表示。

こちらを参考にさせていただきました。

２、マーカーを表示したい。

これは大きな問題ではないのだけど。

以上をふまえて、こんな感じで動作確認が取れた。

最初にAPIを読み込み

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

次に、bodyタグにonloadを書きたくなかったので、

$(function(){
	showMap();
});

とした。

最後に

function showMap(){
	var geo = new google.maps.Geocoder();
	geo.geocode(
		{
			'address': '東京都中央区日本橋１丁目'
		},
		function(result, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				//	alert('取得成功');
				//	alert('経度；' + result[0].geometry.location.lng());
				//	alert('緯度；' + result[0].geometry.location.lat());
				var lng = result[0].geometry.location.lng();
				var lat = result[0].geometry.location.lat();
				var latlng = new google.maps.LatLng(lat,lng);

				var myOptions = {
					zoom: 15,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				//マーカーの表示
				var marker = new google.maps.Marker({
					map: map,
					position: map.getCenter()
				});

			}else{
				//	alert('取得失敗');
			}
		}
	);
}

として、

<div id="map_canvas" style="width: 500px; height: 500px"></div>

で実際に地図を表示する場所を用意。

これで動くのだけど、HTMLにjavascriptのコードを極力書きたくないので、外部ファイルにする予定。

追記

上記の書き方はjQuery必須のこと。