マーカーで円をドラッグさせる

Google MAPS API V3 で、マーカー(google.maps.Marker)をドラッグすると、それに合わせて円(google.maps.Circle)を一緒にドラッグさせるサンプルJava Scriptプログラム。円…というか、オーバーレイはドラッグできないので、draggableなマーカーにバインドさせて動かします。

いつの間にか setDraggable しておけばドラッグできるようになってますので、このページは不要です…

Google Maps JavaScript API V3 >> 記事 >> MVC オブジェクトの活用のサンプルを参考にしました。円のプロパティのcenterをマーカーのpositionにバインドしています。

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

<div id="map" style="height: 400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function() {
  // 地図
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: new google.maps.LatLng(35.170694, 136.881637),
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // マーカー
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.170694, 136.881637),
    draggable: true,
    map: map
  });

  // 円 (半径1km)
  var circle = new google.maps.Circle({
    radius: 1000
  });

  // circle.center を marker.position に bind()
  circle.bindTo("center", marker, "position");
});
</script>

地図を marker.setMap(～) で切り替えることがあるのであれば、mapもbind()しておいたほうがいいかもしれません。逆に、bind()してしまうと、どちらかでsetMap(null)すると、両方消えてしまいます…。