Googleマップ API•テック

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

2021年2月14日 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 markerSW;
      var markerNE;
      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:北東*/
         );
         markerSW =  new google.maps.Marker({ position: LatLngBounds.getNorthEast(),map: map});
         markerNE =  new google.maps.Marker({ position: LatLngBounds.getSouthWest(),map: map});
         /* 南西／北東位置（LatLngBounds）で指定 */
         var rectangle1 = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: "#FF0000",
            fillOpacity: 0.25,
            map: map,
            bounds: LatLngBounds
         });
         /*東西南北で指定*/
         var rectangle2 = new google.maps.Rectangle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 5,
            fillColor: "#3333FF",
            fillOpacity: 0.45,
            draggable: true,
            map: map,
            bounds: {
               north: 35.683718,
               south: 35.673247,
               east: 139.732971,
               west: 139.721037,
            },
         });
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
</body>
</html>

デモ

Rectangle クラス

矩形を描くには「Rectangle クラス」を利用します。

まずサンプルでは、二つの長方形を描いています。

         var LatLngBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng( 35.677599, 139.743311)   /*sw:南西*/
               ,new google.maps.LatLng( 35.694476, 139.762552)   /*ne:北東*/
         );
         markerSW =  new google.maps.Marker({ position: LatLngBounds.getNorthEast(),map: map});
         markerNE =  new google.maps.Marker({ position: LatLngBounds.getSouthWest(),map: map});
         /* 南西／北東位置（LatLngBounds）で指定 */
         var rectangle1 = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: "#FF0000",
            fillOpacity: 0.25,
            map: map,
            bounds: LatLngBounds
         });

座標指定（１）

最初の長方形は皇居を囲んでいて、エリアを設定するために、「LatLngBounds」クラスを使っています。

このクラスで長方形の南西（北半球であれば、左下）と北東（北半球であれば右上）の座標を指定することになります。
この２点を確定すると、ほかの２点も決まるので、２点指定するだけで、矩形が描けます。

LatLngBoundsクラスの「getNorthEast()」メソッドで南西の位置を、「getSouthWest()」メソッドで北東の位置を取得できるので、サンプルでは両地点にマーカーを設定させています。

矩形のオプション

矩形表示時のデザイン（塗りつぶしやボーダーのスタイル）は、「RectangleOptions」を参照してください。

主なプロパティを以下の通りです。

プロパティ説明
bounds矩形を描きたい「南西・北東」の位置、または「東西南北」の位置
fillColor塗りつぶしの色設定
fillOpacity塗りつぶしの透明度設定（0.0～1.0）
0：完全透明
1：透明度なし
strokeColorボーダーの色設定
strokeOpacityボーダーの色の透明度設定（0.0～1.0）
strokeWeightボーダーの太さ（ピクセル指定）

座標指定（２）

         /*東西南北で指定*/
         var rectangle2 = new google.maps.Rectangle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 5,
            fillColor: "#3333FF",
            fillOpacity: 0.45,
            draggable: true,
            map: map,
            bounds: {
               north: 35.683718,
               south: 35.673247,
               east: 139.732971,
               west: 139.721037,
            },
         });

二つの矩形サンプルは、座標を「東西南北」で指定してあります。LatLngBoundsLiteral インターフェースになります。

LatLngBoundsLiteralでは東西南北を直接“リテラル”で指定します。

なお、この二つ目のサンプルでは「draggable:true」に指定してあるので、ドラッグして、移動させることもできるので、試してみてください。

ご参考

関連ページ