Googleマップ API•テック

Google Maps（グーグルマップ）上に自由にPolylineを使って線をひく方法

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

この記事では、マップをクリックすることで自由に直線をひく方法を紹介しましょう。

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

Google Maps（グーグルマップ）上に自由にPolylineを使って線をひく方法

サンプル

地図をクリックしてください



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:80%;
      }
      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);
            document.getElementById('txtLatLng').value = latLng;
         } else {
            document.getElementById('txtLatLng').value = document.getElementById('txtLatLng').value + "\n" + latLng;
         }
         path.push(latLng);
      
         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);
            }
            
         }
         document.getElementById('txtLatLng').value = "";
         if ( marker != undefined ) {
            marker.setMap(null);
         }
         if ( clickedLines != undefined ) {
            clickedLines.setMap(null);
         }
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <textarea style="height:10%;width:80%;margin-left:20px;margin-bottom:10px;" id="txtLatLng"></textarea>
   <br />
   <input type="button" value="線を消す"  onclick="deleteAllLines();" style="margin-left:20px;"/>
</body>
</html>

デモ

マップをクリックすると線がひけます

仕様

マップクリック時（初回）

最初にマップをクリックすると、まず、マーカーを設定します。

また、クリックした位置の緯度／経度をテキストボックス内に設定します

マップクリック時（２回目以降）

２回目以降は、前回クリック時の場所との間に直線（Polyline）をひきます。

また２回目以降も、クリックした位置の緯度／経度を同じようにテキストボックス内に設定します。

「線を消す」ボタンクリック時

マップ内に設定したマーカーとポリラインを削除し、マップを初期状態に戻します。

コード説明

フォームロード時

まず、フォームロード時に実行されるinitMap()内で、線をひくためにPolylineオブジェクトを生成しておきます。

         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);
         });

マップをクリックすると、drawOneLine関数を呼び出します。

パラメータにクリック時の緯度／経度を渡します。

マップクリック時

      function drawOneLine(latLng) {
         var path = clickedLines.getPath();
         if ( path.length == 0 ) {
            createMarker(latLng);
            document.getElementById('txtLatLng').value = latLng;
         } else {
            document.getElementById('txtLatLng').value = document.getElementById('txtLatLng').value + "\n" + latLng;
         }
         path.push(latLng);
      
         clickedLines.setMap(map);
      }

マップをクリックすると、PolylineのgetPathを使い、現在の線の状態を取得します。

getPathの戻り値は「MVCArray<LatLng>」となります。

これは、描画している線の始点から終点までの位置を保持した配列変数になります。戻り値の配列数が０の場合は、まだ線をひけていません。

その場合、マーカーを設定するようにしてあります。

つぎに、まず、MVCArray<LatLng>配列にpushメソッドを使い、配列に位置情報を格納します。

最後にPolylineのsetMapメソッドを使い、マップとポリラインを紐づけて、線をマップ上に描画させます。

これで、マップ上に線をひくことができます。

「線を消す」ボタンクリック時


      function deleteAllLines() {
         var path = clickedLines.getPath();
         if ( path != undefined ) {
            if ( path.length >= 0 ){
               do {
                  if ( path.length == 0 ) break;
                  path.pop();
               } while(1);
            }
            
         }
         document.getElementById('txtLatLng').value = "";
         if ( marker != undefined ) {
            marker.setMap(null);
         }
         if ( clickedLines != undefined ) {
            clickedLines.setMap(null);
         }
      }

「線を消す」ボタンを押すと、まず、最初にPolylineのgetPathで描画されている線の位置情報の配列を取得します。１件以上情報が格納されていれば、１件ずつ、pop()して配列を削除します。

配列を削除しなくても、線は消せますが、ここでは『初期化すること』を目的としているため、pop()し、配列を初期化させています。

最後に『clickedLines.setMap(null)』をすることで、Polylineオブジェクトとマップの紐づけをはずし、マップ上から線を消しています。

ご参考

関連ページ