Googleマップ API

Google Maps Elevation APIを使って、複数地点の高度を一度に取得する方法

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

今回は、１要求で複数地点の高度を一度に取得する方法を紹介します。

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

Google Maps Elevation APIを使って、複数地点の高度を一度に取得する方法

サンプル

マップをクリックして、高度を取得したい位置を指定してください。




取得データタイプ：
パラメーター：
APIキー：

URL：

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:70%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var marker;
      var clickedLines;
      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);
         map.addListener('bounds_changed', function(event) {
            setElevationUrl();
         });
         map.addListener('center_changed', function(event) {
            setElevationUrl();
         });
         clickedLines = new google.maps.Polyline({
            geodesic: true,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 5
         });
         drawOneLine(myLatlng);
         // マップにクリックイベントを設定
         google.maps.event.addListener(map, 'click', function(event) {
            // クリック時の位置を渡す
            drawOneLine(event.latLng);
         });

      }
      function drawOneLine(latLng) {
         var path = clickedLines.getPath();
         if ( path.length == 0 ) {
            createMarker(latLng);
         }
         if ( path.length < 1 ) {
             document.getElementById('parameters').selectedIndex = 0;
             document.getElementById('parameters').disabled = true;
         } else {
             document.getElementById('parameters').disabled = false;
         }
         path.push(latLng);
         clickedLines.setMap(map);
         setElevationUrl();
      }

      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);
            marker = null;
         }
         if ( clickedLines != undefined ) {
            clickedLines.setMap(null);
         }
         document.getElementById('parameters').selectedIndex = 0;
         document.getElementById('parameters').disabled = true;
         setElevationUrl();
      }

      function setElevationUrl() {
         var sUrl = "https://maps.googleapis.com/maps/api/elevation/";
         var sType = document.getElementById('dataType').options[document.getElementById('dataType').selectedIndex].value;
         var sParam = document.getElementById('parameters').options[document.getElementById('parameters').selectedIndex].value;
         var sApiKey = document.getElementById('apikey').value;
         // https://maps.googleapis.com/maps/api/elevation/outputFormat?parameters
         sUrl = sUrl + sType + '?' + "key=" + sApiKey;
         var sPathParameter = "";
         var path = clickedLines.getPath();
         var nSamples = path.length;
         if ( nSamples >  0 ) {
            if ( document.getElementById('cbxEncode').checked ) {
               /* エンコードする場合 */
               var encodedPath = google.maps.geometry.encoding.encodePath(path);
               sPathParameter = sPathParameter + "|enc:" + encodedPath;
            } else {
               /* エンコードしない場合 */
               for ( var i=0 ; i < path.length; i++ ) {
                  sPathParameter = sPathParameter + "|" + String(path.getAt(i)).substring(1).replace(", ",",").replace(")",""); 
               }
            }
         }
         if ( sParam == "path" ) {
            sUrl = sUrl + "&path=" +  encodeURI(String(sPathParameter).substring(1)) + "&samples=" + nSamples;
         } else {
            sUrl = sUrl + "&locations=" +  encodeURI(String(sPathParameter).substring(1));
         }
         var googleLink = document.getElementById('lnkGoogleMap');
         googleLink.innerHTML = sUrl;
         googleLink.setAttribute("href",sUrl);
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <input type="button" value="線を消す"  onclick="deleteAllLines();" /><br />
   <br />
   取得データタイプ：<select id="dataType" onchange="setElevationUrl();"><option value="xml">xml</option><option value="json">json</option></select><br />
   パラメーター：<select id="parameters" onchange="setElevationUrl();" ><option value="locations">locations</option><option value="path">path</option></select><br />
   APIキー：<input type="text" id="apikey" value="" placeholder="あなたのAPIキーを入力してください" onchange="setElevationUrl();" /> <br />
   <input type="checkbox" id="cbxEncode"  onchange="setElevationUrl();" /><label for="cbxEncode">Pathをエンコードする</label><br />
   URL：<a id="lnkGoogleMap" href="#" target=_blank></a><br />
</body>
</html>

デモ

複数地点の高度を一度に取得する方法

locationsパラメータ

一つの位置を取得する場合のパラメータ「locations」のパラメータでも複数地点の高度を一度のリクエストで要求することができます。

locatioins(地点1緯度),(地点1経度)|(地点2緯度),(地点2経度)|(地点3緯度),(地点3経度)|...
または
enc:(エンコード文字列)

高度を取得したい地点をパイプ記号（|）で区切ることで一度のリクエストで複数地点の高度を要求することができます。

pathパラメータ

「path」パラメータを使うことで、２地点以上の高度を一度のリクエストで要求することもできます。

path (地点1緯度),(地点1経度)|(地点2緯度),(地点2経度)|(地点3緯度),(地点3経度)|...
または
enc:(エンコード文字列)
samples高度を要求したい地点の数

「path」に「locations」と同じように高度を取得したい地点をパイプ記号（|）で区切ることで一度のリクエストで同時に複数地点の高度を要求できます。ただし、「path」とともに『samples』も指定することが必須です。

エンコード文字列

「locations」または「path」の指定値はパイプ記号区切りで「(緯度),(経度)」を指定する以外に「google.maps.geometry.encoding.encodePath」を利用して位置情報をエンコードし、そのエンコードされた文字列を『enc:(エンコード文字列)』の形式で指定できます。

サンプルでは「Pathをエンコードする」をチェックしてみてください。

ご参考

関連ページ