Googleマップ API•テック

Google Maps（グーグルマップ）上に矩形(Rectangle)を自由に描く方法（その２）

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

前回、自作で矩形を自由に描けるようにしたのですが、正直、かなり難易度が高く、かつ、操作性もあまりよくありませんでした。今回は、もっと簡単に気軽に矩形を描ける方法を紹介します。

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

Google Maps（グーグルマップ）上に矩形(Rectangle)を自由に描く方法（その２）

サンプル

矩形をドラッグ、または、サイズ、形を変更させてみてください。

北東：,
南西：,

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 rectangle;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.683934,139.737612);
         var mapOptions = {
           zoom: 14,
           center: myLatlng
         }

         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         var LatLngBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng( 35.677599, 139.743311)   /*sw:南西*/
               ,new google.maps.LatLng( 35.694476, 139.762552)   /*ne:北東*/
         );


         rectangle = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: "#FF0000",
            fillOpacity: 0.25,
            map,
            editable: true,
            draggable: true,
            bounds: LatLngBounds
         });
         setRectangleBoundsInfo(rectangle.getBounds());

         rectangle.addListener("bounds_changed",function(e) {
            setRectangleBoundsInfo(rectangle.getBounds());
         });



      }
      function setRectangleBoundsInfo(bounds) {
         document.getElementById('lblNeLat').innerHTML = bounds.getNorthEast().lat();
         document.getElementById('lblNeLng').innerHTML = bounds.getNorthEast().lng();
         document.getElementById('lblSwLat').innerHTML = bounds.getSouthWest().lat();
         document.getElementById('lblSwLng').innerHTML = bounds.getSouthWest().lng();
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <table>
      <tr><td></td><td><span style="font-weight:bold">北東：</span><span id="lblNeLat"></span>,<span id="lblNeLng"></span></td></tr>
      <tr><td><span style="font-weight:bold">南西：</span><span id="lblSwLat"></span>,<span id="lblSwLng"></span></td><td></td></tr>
   </table>
</body>
</html>

デモ

矩形を自由に編集する

矩形を自由に編集するには、「RectangleOptions」の『editable』をtrueにすると、自由に編集できるようになるのです。加えて『draggable』をtrueにするとドラッグが可能となり、移動させることができます。

         rectangle = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: "#FF0000",
            fillOpacity: 0.25,
            map,
            editable: true,
            draggable: true,
            bounds: LatLngBounds
         });

この『editable』オプションをtrueにするだけで、簡単に編集可能になるんですよね。本当に簡単です。

もし、描いた矩形の情報を取得するにはするにはgetBounds()メソッドで取得します。

         setRectangleBoundsInfo(rectangle.getBounds());
      function setRectangleBoundsInfo(bounds) {
         document.getElementById('lblNeLat').innerHTML = bounds.getNorthEast().lat();
         document.getElementById('lblNeLng').innerHTML = bounds.getNorthEast().lng();
         document.getElementById('lblSwLat').innerHTML = bounds.getSouthWest().lat();
         document.getElementById('lblSwLng').innerHTML = bounds.getSouthWest().lng();
      }

サンプルコードではgetBounds()メソッドを実行し、矩形の北東位置と南西位置を取得し、<span>エリアに緯度と経度を設定してあります。

これで表示されている矩形の情報を取得できます。

bounds_changedイベント

矩形へ変更されたときに発生するのが「bounds_changed」イベントです。サンプルではこのイベントを仕掛けて、変更された矩形の情報を<span>に再設定させるようにさせています。

         rectangle.addListener("bounds_changed",function(e) {
            setRectangleBoundsInfo(rectangle.getBounds());
         });

addListenerメソッドを実行し、イベントを仕掛けてあります。

表示させた矩形を編集させたいのなら自作より『editable』をtrueとしたほうが簡単ですね。

ご参考

関連ページ