Googleマップ API•テック

Google Maps（グーグルマップ）上に現在位置を表示する方法（その２）

2021年4月11日 by single コメントはまだありません

今回も現在位置を取得する方法ですが、常時監視し、トラックする方法です。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）上に現在位置を表示する方法（その２）

サンプル



エラーコード
エラーメッセージ
タイムスタンプ 緯度 経度 位置（正確さ）

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>

   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:50%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }

   </style>
   <script type="text/javascript">
      var map;
      var marker;
      var circle;
      var id;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.683755,139.745625);
         var mapOptions = {
           zoom: 14,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }

      function success(pos) {
         var crd = pos.coords;
         var timeStamp = pos.timestamp;

         var currentPos = new google.maps.LatLng( crd.latitude, crd.longitude);
 
         if ( marker != undefined )  marker.setMap(null);
         if ( circle != undefined )  circle.setMap(null);

         /* 現在位置にマーカーを設定 */
         marker =  new google.maps.Marker({ position: currentPos ,map: map});

         /* 位置の誤差領域 */
         circle = new google.maps.Circle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#3333FF",
            fillOpacity: 0.35,
            map: map,
            draggable: false,
            center: currentPos,
            radius: crd.accuracy   /* 位置の誤差(m)を半径とする */
         });
         map.setCenter(currentPos);
         map.setZoom(14);
         setInfo(timeStamp,crd);
      }
      function error(err) {
         document.getElementById('tdErrCd').innerHTML = err.code;
         document.getElementById('tdErrMg').innerHTML = err.message;
      }
      function setInfo(timeStamp,crd) {
         var tableRef = document.getElementById('tblGps');
         var newRow   = tableRef.insertRow(1);
         var newCellTime  = newRow.insertCell(0);
         var newCellLat  = newRow.insertCell(1);
         var newCellLng  = newRow.insertCell(2);
         var newCellAcr  = newRow.insertCell(3);
         newCellTime.innerHTML = timeStamp;
         newCellLat.innerHTML = crd.latitude;
         newCellLng.innerHTML = crd.longitude;
         newCellAcr.innerHTML = crd.accuracy + 'm';
      }
      function startWatchPosition() {
         if ( id == undefined ) {
            var options = {
               enableHighAccuracy: true,
               timeout: 5000,
               maximumAge: 0
            };
            id = navigator.geolocation.watchPosition(success, error, options);
         }
      }
      function clearWatchPosition() {
         if ( id != undefined ) {
            navigator.geolocation.clearWatch(id);
            id = null;
         }
         if ( marker != undefined )  marker.setMap(null);
         if ( circle != undefined )  circle.setMap(null);
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br /><input type="button" value="追跡開始" onclick="startWatchPosition();" />
   <br /><input type="button" value="追跡終了" onclick="clearWatchPosition();" />
   <p>
      <table  style="width:100%">
         <tr><th>エラーコード</th><td id="tdErrCd"></td></tr>
         <tr><th>エラーメッセージ</th><td id="tdErrMg"></td></tr>
      </table>
      <table style="width:100%" id="tblGps">
         <tr>
            <th>タイムスタンプ</th>
            <th>緯度</th>
            <th>経度</th>
            <th>位置（正確さ）</th>
         </tr>
      
      </table>
   </p>
</body>
</html>

デモ

現在位置を追跡する

追跡開始

一度だけでなく、継続的に現在位置情報を取得し続けるにはGeolocationの「watchPosition()」を使います。

まずサンプルでは「追跡開始」ボタンを押すことでこの「watchPosition()」メソッドを呼び出すようになっています。

      function startWatchPosition() {
         if ( id == undefined ) {
            var options = {
               enableHighAccuracy: true,
               timeout: 5000,
               maximumAge: 0
            };
            id = navigator.geolocation.watchPosition(success, error, options);
         }
      }

watchPosition()は、getCurrentPosition()と同じ仕様で、同じパラメータを指定してください。

このメソッドは端末の位置が変化するたびに自動的に呼び出され、位置変化し、位置情報を取得されるたびに第一引数の「success」の関数が呼び出されることになります。この処理を止めるには「Geolocation.clearWatch()」を呼び出さなければなりません。

その「Geolocation.clearWatch()」の引数に『Geolocation.watchPosition()』メソッドの戻り値のハンドラーを渡す必要があります。サンプルでは「id」という変数になっています。

位置情報取得成功

位置情報取得の場合、watchPosition()の第一引数で指定した関数が呼び出されます。

この関数では、getCurrentPosition()の記事で書いた時と同じように取得した現在位置にマーカーを、取得したaccuracy（正確さ：誤差）で円を描くようにしてあります。

      function success(pos) {
         var crd = pos.coords;
         var timeStamp = pos.timestamp;

         var currentPos = new google.maps.LatLng( crd.latitude, crd.longitude);
 
         if ( marker != undefined )  marker.setMap(null);
         if ( circle != undefined )  circle.setMap(null);

         /* 現在位置にマーカーを設定 */
         marker =  new google.maps.Marker({ position: currentPos ,map: map});

         /* 位置の誤差領域 */
         circle = new google.maps.Circle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#3333FF",
            fillOpacity: 0.35,
            map: map,
            draggable: false,
            center: currentPos,
            radius: crd.accuracy   /* 位置の誤差(m)を半径とする */
         });
         map.setCenter(currentPos);
         map.setZoom(14);
         setInfo(timeStamp,crd);
      }

今回のサンプルでは、取得した位置情報を追記していくようにしました。追記していく関数は「setInfo()」でしてあります。

      function setInfo(timeStamp,crd) {
         var tableRef = document.getElementById('tblGps');
         var newRow   = tableRef.insertRow(1);
         var newCellTime  = newRow.insertCell(0);
         var newCellLat  = newRow.insertCell(1);
         var newCellLng  = newRow.insertCell(2);
         var newCellAcr  = newRow.insertCell(3);
         newCellTime.innerHTML = timeStamp;
         newCellLat.innerHTML = crd.latitude;
         newCellLng.innerHTML = crd.longitude;
         newCellAcr.innerHTML = crd.accuracy + 'm';
      }

この関数では、テーブルに行とその追加業にセルを追加することで、緯度／経度／誤差にくわえて、タイムスタンプも設定するようにしました。

追跡終了

このサンプルでは「追跡終了」を押すと「Geolocation.clearWatch()」メソッドを呼び出すようにしてあります。

Geolocation.clearWatch()メソッドを呼び出すと「Geolocation.watchPosition()」の動作を止めることになります。

パラメータ（引数）

id動作を止めたい位置取得処理のGeolocation.watchPosition() メソッドから返された ID 番号

パソコンで、このサンプルを実行しても、あまり変化を感じられないかもしれませんが、スマホなどの携帯端末では、移動の履歴を刻むことができるのではないでしょうか。

試してみてください。

ご参考

関連ページ