Google Maps(グーグルマップ)上に円(Circle)に描く方法

今回は、矩形ではなく、円を描いていきます。

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

Google Maps(グーグルマップ)上に円(Circle)に描く方法

サンプル

青の円をドラッグ、または、サイズを変更してみてください。

中心緯度
中心経度
半径(m)

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: 80%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var circleRed;
      var circleBlue;
      var nRadiusKm = 1000;      /* 1000メートル */
      var nRadiusHalfKm = 500;   /*  500メートル */
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.683934,139.737612);
         var centerLatLngRed = new google.maps.LatLng(35.685870,139.760372);
         var centerLatLngBlue = new google.maps.LatLng(35.683755,139.745625);

         var mapOptions = {
           zoom: 14,
           center: myLatlng
         }

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

         // 編集不可の円追加
         circleRed = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map,
            center: centerLatLngRed,
            radius: nRadiusKm
         });
         // 編集可能の円追加
         circleBlue = new google.maps.Circle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#3333FF",
            fillOpacity: 0.35,
            map: map,
            draggable: true,
            editable: true,
            center: centerLatLngBlue,
            radius: nRadiusHalfKm
         });
         setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
         /* 中心位置変更 */
         circleBlue.addListener("center_changed",function(e) {
            setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
         });
         /* 半径変更 */
         circleBlue.addListener("radius_changed",function(e) {
            setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
         });
      }
      function setCircleInfo(center,radius) {
         document.getElementById('tdLat').innerHTML = center.lat();
         document.getElementById('tdLng').innerHTML = center.lng();
         document.getElementById('tdCtr').innerHTML = radius;
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <table>
      <tr><th>中心緯度</th><td id="tdLat"></td></tr>
      <tr><th>中心経度</th><td id="tdLng"></td></tr>
      <tr><th>半径(m) </th><td id="tdCtr"></td></tr>
   </table>
</body>
</html>

デモ

Circle クラス

円作成

         // 編集不可の円追加
         circleRed = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map,
            center: centerLatLngRed,
            radius: nRadiusKm
         });

google.maps.Circleクラスをnewすれば、円を作成できます。当然、中心点や半径の長さ(メートル)などを指定する必要があり、それらのオプションは「CircleOptions」になります。

主なパラメータは以下の通りです。

center中心の緯度/経度
radius半径の長さ(単位:メートル)
strokeColor縁の色
strokeOpacity縁の透明度(0.0:透明~1.0:透明なし)
strokeWeight縁の太さ
fillColor塗りつぶしの色
fillOpacity塗りつぶしの透明度(0.0:透明~1.0:透明なし)

編集可能な円

			circleBlue = new google.maps.Circle({
				strokeColor: "#3333FF",
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: "#3333FF",
				fillOpacity: 0.35,
				map: map,
				draggable: true,
				editable: true,
				center: centerLatLngBlue,
				radius: nRadiusHalfKm
			});

CircleOptionで「editable」をtrueにすれば、サイズ(半径)を変えられますし、「draggable」をtrueにすれば、位置を移動させることができます。

円変更時にイベントを設定する


         /* 中心位置変更 */
         circleBlue.addListener("center_changed",function(e) {
            setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
         });
         /* 半径変更 */
         circleBlue.addListener("radius_changed",function(e) {
            setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
         });

中心点変更イベント

addListenerメソッドで「center_changed」イベントを仕掛けると中心点変更時のイベントを取得できます。

半径長さ変更時のイベント

addListenerメソッドで「radius_changed」イベントを仕掛けると半径長さ変更時のイベントを取得できます。

サンプルでは、最後に中心点と半径長さをラベルに設定してあります。

      function setCircleInfo(center,radius) {
         document.getElementById('tdLat').innerHTML = center.lat();
         document.getElementById('tdLng').innerHTML = center.lng();
         document.getElementById('tdCtr').innerHTML = radius;
      }

ご参考

関連ページ