Googleマップ API•テック

Google Maps（グーグルマップ）で距離を計測する方法

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

今回もGeometryライブラリを使います。今回は、ポリラインで描画した線の距離を計測してみます。

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

Google Maps（グーグルマップ）で距離を計測する方法

サンプル

マップを複数回、クリックし、PolyLineを描画してください



距離(m)

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&libraries=geometry" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:90%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var clickedLines;
      var marker;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         clickedLines = new google.maps.Polyline({
            geodesic: true,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 3
         });
         // マップにクリックイベントを設定
         google.maps.event.addListener(map, 'click', function(event) {
            // クリック時の位置を渡す
            drawOneLine(event.latLng);
         });
      }
      function drawOneLine(latLng) {
         var path = clickedLines.getPath();
         if ( path.length == 0 ) {
            createMarker(latLng);
         }
         path.push(latLng);
         var distance = google.maps.geometry.spherical.computeLength(path);
         document.getElementById('distance').innerHTML = distance;
         clickedLines.setMap(map);
      }
      function createMarker(latLng) {
         marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: '最初の位置'
         });
      }

      function deleteAllLines() {
         var path = clickedLines.getPath();
         if ( path != undefined ) {
            if ( path.length >= 0 ){
               do {
                  if ( path.length == 0 ) break;
                  path.pop();
               } while(1);
            }
            
         }
         if ( marker != undefined ) {
            marker.setMap(null);
         }
         if ( clickedLines != undefined ) {
            clickedLines.setMap(null);
         }
         document.getElementById('distance').innerHTML = '';
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <input type='button' value="すべての線を消す" onclick="deleteAllLines();" /><br />
   <table><tr><th>距離(m)</th><td><span id="distance"></span></td></tr></table>
</body>
</html>

デモ

複数地点の距離を測定する

複数地点間の距離を測定するには「computeLength」を利用します。

パラメータ

引数値
第１引数計測したい地点間の位置情報を保持した緯度／経度型の配列
第２引数半径（任意）
デフォルトは地球の半径。基本指定しなくていいと思います。

戻り値

地点間の総距離、単位はメートルです。

ご参考

関連ページ