Googleマップ API•テック

Google Maps（グーグルマップ）上に円（Circle）とマーカー（Marker）を紐づける

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

今回は円とマーカーが一緒に移動するようにしてみます。

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

Google Maps（グーグルマップ）上に円（Circle）とマーカー（Marker）を紐づける

サンプル

赤い円は、円をドラッグ、青い円は、円中心のマーカーをドラッグしてみてください。

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 markerRed;
      var markerBlue;
      var circleRed;
      var circleBlue;
      var nRadiusKm = 1000;      /* 1000メートル */
      var nRadiusHalfKm = 500;   /*  500メートル */
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.683755,139.745625);
         var centerLatLngRed = new google.maps.LatLng(35.683755,139.745625);
         var centerLatLngBlue = new google.maps.LatLng(35.67517948536383, 139.75948665651913);
         var mapOptions = {
           zoom: 14,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         /* ドラッグ不可能 */
         markerRed = new google.maps.Marker({
               position: centerLatLngRed,
                draggable: false,
                map: map,
                icon:'https://maps.google.com/mapfiles/ms/micons/red-dot.png'
         });
         /* ドラッグ可能 */
         markerBlue = new google.maps.Marker({
                position: centerLatLngBlue,
                draggable: true,
                map: map,
                icon:'https://maps.google.com/mapfiles/ms/micons/blue-dot.png'
         });
         /* ドラッグ可能 */
         circleRed = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            draggable: true,
            center: centerLatLngRed,
            radius: nRadiusKm
         });
         /* ドラッグ不可能 */
         circleBlue = new google.maps.Circle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#3333FF",
            fillOpacity: 0.35,
            map: map,
            draggable: false,
            center: centerLatLngBlue,
            radius: nRadiusHalfKm
         });
         /* 円の位置をマーカーの位置に合わせて変更させて、マーカーと円を紐づける */
         circleRed.bindTo("center", markerRed, "position");
         markerBlue.bindTo("position", circleBlue, "center");
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
</body>
</html>

デモ

円（Circle）とマーカー（Marker）を紐づける

MVCObjectクラス bindToメソッド

今回の動きのポイントはこの「bintTo」メソッドが全てですね。このページを参照しておいてください。

マーカー作成

         /* ドラッグ不可能 */
         markerRed = new google.maps.Marker({
               position: centerLatLngRed,
                draggable: false,
                map: map,
                icon:'https://maps.google.com/mapfiles/ms/micons/red-dot.png'
         });
         /* ドラッグ可能 */
         markerBlue = new google.maps.Marker({
                position: centerLatLngBlue,
                draggable: true,
                map: map,
                icon:'https://maps.google.com/mapfiles/ms/micons/blue-dot.png'
         });

今回は二つの円とマーカーを作成するので、まず、マーカーを二つ生成します。

一つはドラッグ不可能（赤）、もう一つはドラッグ可能（青）とします。

円作成

         /* ドラッグ可能 */
         circleRed = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            draggable: true,
            center: centerLatLngRed,
            radius: nRadiusKm
         });
         /* ドラッグ不可能 */
         circleBlue = new google.maps.Circle({
            strokeColor: "#3333FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#3333FF",
            fillOpacity: 0.35,
            map: map,
            draggable: false,
            center: centerLatLngBlue,
            radius: nRadiusHalfKm
         });

次に円（Circle）を生成します。

一つはドラッグ可能（赤）、もう一つはドラッグ不可能（青）にします。

円（Circle）とマーカー（Marker）を紐づけ

         /* 円の位置をマーカーの位置に合わせて変更させて、マーカーと円を紐づける */
         circleRed.bindTo("center", markerRed, "position");
         markerBlue.bindTo("position", circleBlue, "center");

最後にMVCObject のbindToメソッドを実行し、円とマーカーを紐づけます。

これで、青の円は、円を移動させることで、マーカーの位置を常に円の中心になるようになっています。

また、赤の円は、マーカーを移動させることで、円の中心をマーカー位置にになるようになっています。

bindToメソッド

項目値
key紐づけたい対象オブジェクトのプロパティ
target対象オブジェクトと紐づけたいもう一方のオブジェクト
targetKey紐づけたいもう一方のオブジェクトのプロパティ

このbindToメソッドを使うことで二つのオブジェクトのプロパティを同期させることができます。

ご参考

関連ページ