円や長方形をマウス操作で編集する

いつのまにかオーバーレイにdraggableやeditableなんていうオプションが…。

赤いほうはドラッグだけ、青いほうは白丸を動かすとサイズ編集できます。

google.maps.event.addDomListener(window, "load", function() {
  // 地図
  var map = new google.maps.Map({
    // 略
  });

  // ドラッグだけ
  var circleBlue = new google.maps.Circle({
    center: new google.maps.LatLng(35.170694, 136.881637),
    radius: 1000,
    fillColor: "#0000ff",
    strokeColor: "#0000ff",
    map: map,
    editable: true
  });

  // 編集可能
  var circleRed = new google.maps.Circle({
    center: new google.maps.LatLng(35.172361, 136.861944),
    radius: 500,
    fillColor: "#ff0000",
    strokeColor: "#ff0000",
    map: map,
    draggable: true
  });
});

editableとdraggableを両方trueにすると、中心以外でもドラッグできます。長方形の場合は中心に○が出ないので、ドラッグもさせたい場合はこうするしかないです。

  var rect = new google.maps.Rectangle({
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(35.161711, 136.870648),
      new google.maps.LatLng(35.179677, 136.892626)
    ),
    map: map,
    editable: true,
    draggable: true
  });

円の場合はcenter_changedやradius_changed、長方形の場合はbounds_changed、あるいはどちらもdragendあたりをListenしておけば、変更後の半径や位置情報を得られそうです。