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);
}