Geolocation APIで現在地を取得して、Google Maps APIで地図に表示する

Geolocation APIを使って現在地を取得して、Googleマップに表示する実装を試してみたいと思います。

対応ブラウザ

Geolocation APIの対応ブラウザはこちら

IE9からの対応になります。
　

サンプルコード

HTML

地図の埋め込み位置を指定します。

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

CSS

地図のサイズを指定します。

#map {
	width: 600px;
	height: 400px;
	margin: 0 auto;
}

JavaScript

var map;
var marker;
function initMap() {
	if (!navigator.geolocation) {
		alert('Geolocation APIに対応していません');
		return false;
	}

	// 現在地の取得
	navigator.geolocation.getCurrentPosition(function(position) {
		// 緯度経度の取得
		latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

		// 地図の作成
		map = new google.maps.Map(document.getElementById('map'), {
			center: latLng,
			zoom: 17
		});

		// マーカーの追加
		marker = new google.maps.Marker({
			position: latLng,
			map: map
		});
	}, function() {
		alert('位置情報取得に失敗しました');
	});
}

getCurrentPosition()を使って現在地を取得して、その緯度と経度からGoogleマップを作成しています。
現在地を地図に表示するデモページ
　

【参考サイト】

• 連載：人気順に説明する初めてのHTML5開発：位置情報をブラウザで活用！ Geolocationを使いこなそう (1/2) – ＠IT
• Geolocation.getCurrentPosition() – Web API インターフェイス | MDN