【マップ】現在位置を取得してGoogleマップにマーカーを表示

Google Maps APIを利用して表示するGoogleマップで、ユーザーの現在位置を取得してマーカーを表示します。

html、css、現在位置取得以外のjavascriptは下記の記事と同様です。

javascriptのコードです。
navigator.geolocation.getCurrentPositionでユーザーの現在位置を取得します。ユーザーがブラウザで現在位置の取得を許可すればsuccess関数、許可しなければfail関数が呼び出されます。
success関数のパラメータで指定したposオブジェクトには位置情報が格納されています。緯度はpos.coords.latitude、経度はpos.coords.longitudeで取得できます。取得した座標を指定してGoogleマップを表示します。
fail関数のパラメータで指定したerrorオブジェクトには位置情報が取得できなかった場合のエラー情報が格納されています。エラーコードはerror.codeで取得できます。今回はアラートでエラーコードを表示し、東京駅の座標を指定してGoogleマップを表示します。

function initMap() {
	function success(pos) {
		var lat = pos.coords.latitude;
		var lng = pos.coords.longitude;
		var latlng = new google.maps.LatLng(lat, lng); //中心の緯度, 経度
		var map = new google.maps.Map(document.getElementById('maps'), {
			zoom: 17,
			center: latlng
		});
		var marker = new google.maps.Marker({
			position: latlng, //マーカーの位置(必須)
			map: map //マーカーを表示する地図
		});
	}
	function fail(error) {
		alert('位置情報の取得に失敗しました。エラーコード:' + error.code);
		var latlng = new google.maps.LatLng(35.6812405, 139.7649361); //東京駅
		var map = new google.maps.Map(document.getElementById('maps'), {
			zoom: 10,
			center: latlng
		});
	}
	navigator.geolocation.getCurrentPosition(success, fail);
}

タイトルとURLをコピーしました