Googleマップ API•テック

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

2021年2月22日 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:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var rectangle;
      var drawRectangle = false;
      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(getRectangleOption(false));

         /* 初期位置設定 */
         rectangle.setBounds(LatLngBounds);

         map.addListener("rightclick",function(e) {
            if ( drawRectangle ) {
               drawRectangle = false;
            } else {
               drawRectangle = true;
            }
            rectangle.setOptions(getRectangleOption(drawRectangle));
         });
         rectangle.addListener("rightclick",function(e) {
            
            if ( drawRectangle ) {
               drawRectangle = false;
            } else {
               drawRectangle = true;
            }
            rectangle.setOptions(getRectangleOption(drawRectangle));
         });
         map.addListener("mousemove",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         map.addListener("mouseover",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         rectangle.addListener("mouseover",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         rectangle.addListener("mousemove",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
      }
      function resetRectangle(latlng) {
         var bounds = rectangle.getBounds();
         var nePos = bounds.getNorthEast();
         var swPos = bounds.getSouthWest();
         var nSwLat = swPos.lat();
         var nSwLng = swPos.lng();
         var nNeLat = nePos.lat();
         var nNeLng = nePos.lng();
         if ( nNeLat < latlng.lat() ) {
            nNeLat = latlng.lat();
         } else {
            if ( nSwLat < latlng.lat() ) {
               nNeLat = latlng.lat();
            }
         }
         if ( nNeLng < latlng.lng() ) {
            nNeLng = latlng.lng();
         } else {
            if ( nSwLng < latlng.lng() ) {
               nNeLng = latlng.lng();
            }
         }
         if ( nSwLng > latlng.lng() ) {
            nSwLng = latlng.lng();
         } 

         if ( nSwLat > latlng.lat() ) {
            nSwLat = latlng.lat();
         }
         rectangle.setBounds({north: nNeLat,south: nSwLat,east: nNeLng,west: nSwLng});
      }
      function getRectangleOption(bDraw) {
         var opt;
         if ( bDraw ) {
            opt = {
               strokeColor: "#3333FF",
               strokeOpacity: 0.8,
               strokeWeight: 5,
               fillColor: "#3333FF",
               fillOpacity: 0.25,
               draggable:false,
               map: map 
            }
         } else {
            opt = {
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 5,
               fillColor: "#FF0000",
               fillOpacity: 0.25,
               draggable:true,
               map: map 
            }
         }
         return opt;
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
</body>
</html>

デモ

矩形を自由に描画する

右クリックしてください

         map.addListener("rightclick",function(e) {
            if ( drawRectangle ) {
               drawRectangle = false;
            } else {
               drawRectangle = true;
            }
            rectangle.setOptions(getRectangleOption(drawRectangle));
         });
         rectangle.addListener("rightclick",function(e) {
            
            if ( drawRectangle ) {
               drawRectangle = false;
            } else {
               drawRectangle = true;
            }
            rectangle.setOptions(getRectangleOption(drawRectangle));
         });

まず、イベントを仕掛けます。addListenerでマップと矩形オブジェクトで右クリックした際に処理を実行するようにさせます。。

矩形の背景色変更

      function getRectangleOption(bDraw) {
         var opt;
         if ( bDraw ) {
            opt = {
               strokeColor: "#3333FF",
               strokeOpacity: 0.8,
               strokeWeight: 5,
               fillColor: "#3333FF",
               fillOpacity: 0.25,
               draggable:false,
               map: map 
            }
         } else {
            opt = {
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 5,
               fillColor: "#FF0000",
               fillOpacity: 0.25,
               draggable:true,
               map: map 
            }
         }
         return opt;
      }

右クリックした際、背景色を「赤→青」または「青→赤」へ変更するようにしてあります。

背景色青は編集モードで、矩形のサイズを変更できるという状態であることを表しています。

背景色赤は、固定モードで矩形サイズは変更できませんが、draggableをtrueにして、ドラック移動させることは可能になっています。

マウスオーバー／マウスムーブで矩形サイズ変更

         map.addListener("mousemove",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         map.addListener("mouseover",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         rectangle.addListener("mouseover",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });
         rectangle.addListener("mousemove",function(e) {
            if ( drawRectangle ) resetRectangle(e.latLng);
         });

次にマップおよび矩形オブジェクトのマウスオーバー／マウスムーブイベントを仕掛けます。

矩形サイズ変更

      function resetRectangle(latlng) {
         var bounds = rectangle.getBounds();
         var nePos = bounds.getNorthEast();
         var swPos = bounds.getSouthWest();
         var nSwLat = swPos.lat();
         var nSwLng = swPos.lng();
         var nNeLat = nePos.lat();
         var nNeLng = nePos.lng();
         if ( nNeLat < latlng.lat() ) {
            nNeLat = latlng.lat();
         } else {
            if ( nSwLat < latlng.lat() ) {
               nNeLat = latlng.lat();
            }
         }
         if ( nNeLng < latlng.lng() ) {
            nNeLng = latlng.lng();
         } else {
            if ( nSwLng < latlng.lng() ) {
               nNeLng = latlng.lng();
            }
         }
         if ( nSwLng > latlng.lng() ) {
            nSwLng = latlng.lng();
         } 

         if ( nSwLat > latlng.lat() ) {
            nSwLat = latlng.lat();
         }
         rectangle.setBounds({north: nNeLat,south: nSwLat,east: nNeLng,west: nSwLng});
      }

編集モードの場合、矩形サイズを変更させます。

マウス位置に応じて、Rectangleの表示位置を変更させています。

右クリック再実行

編集モード時、右クリックをもう一度、実行すると、固定モードになり、編集終了です。

以上、矩形を自由に変更するサンプルを紹介しましたが、矩形編集モードでうまく矩形が想定通り動かいないこともあることお許しくださいませ。

ご参考

関連ページ