Geolocation APIを使用すれば、ユーザーの位置情報を取得することができます。これを使ってGoogle Map上に現在の位置情報を表示してみます。
前提条件
Google Maps PlatformのMaps JavaScript APIを呼び出すためのAPIキーを取得していること（詳細は前回の記事を見てください）
Geolocation APIについて
これを使うことで、（ユーザーが同意した場合にのみ）ユーザーの現在位置の取得や監視ができるようになります（詳細はこちら）。今回は現在位置を取得するためのgetCurrentPositionメソッドを使用します。
ソースファイル
今回はhtmlが1ファイルのみです。以下を公開ディレクトリに置けば試せます（APIキーは自分のものに置き換えてください）。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.652, lng: 139.545},
zoom: 10
});
infoWindow = new google.maps.InfoWindow;
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map, infoWindow);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
function CenterControl(controlDiv, map, infoWindow) {
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '18px';
controlUI.style.textAlign = 'center';
controlUI.title = '現在位置を表示します。';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '14px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.textContent = '現在位置を見る';
controlUI.appendChild(controlText);
// クリック時の挙動
controlUI.addEventListener('click', function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('現在位置<br />緯度: ' + position.coords.latitude + '<br />経度: ' + position.coords.longitude);
infoWindow.open(map);
map.setCenter(pos);
}, function(err) {
infoWindow.setPosition(map.getCenter());
infoWindow.setContent('Error: geolocationに失敗しました。<br />Code: ' + err.code);
infoWindow.open(map);
});
} else {
infoWindow.setPosition(map.getCenter());
infoWindow.setContent('Error: 非対応のブラウザです。');
infoWindow.open(map);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>動かしてみる
サンプルページにアクセスするとGoogle Mapが表示されます。
下部を見ると[現在位置を見る]というボタンがあります。これはControl UIとして追加したボタンで、これを押したタイミングで現在位置の取得と表示を行います。
実際に押してみると、下のような確認ダイアログが出現します（初回のみ）。
これを[許可]すると、現在位置の情報が表示されます。ただし、モバイル環境でないと精度は良くないです。
まとめ
Geolocation APIを使用して、ユーザーの位置情報をGoogle Map上に表示することができました。現在位置の取得だけだと、アプリのGoogle Map使えば良いのでは、という話で終わりそうですが、いろいろ組み合わせると面白そうだと思いました。