menu-icon

Geolocation APIを使用して、現在位置を取得してみる

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使えば良いのでは、という話で終わりそうですが、いろいろ組み合わせると面白そうだと思いました。