そのため、Googleマップv3のオーバーレイとして円オブジェクトを作成できました。editable プロパティを true に設定しました。次にやりたかったことは、ユーザーが円を動かした場合の中心の座標を取得することでした。このためには、イベントに応答してトリガーされる何らかのメソッドが必要です。以下に示すように、初期化関数でこれをすべて設定したと思いました。ただし、アラートボックスは表示されません。したがって、イベントに応答してこの関数がトリガーされていないと想定しています。
function initialize() {
cityCenterLatLng = new google.maps.LatLng(cLat, cLong);
options = {
center : cityCenterLatLng,
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI : false,
mapTypeControl : true,
streetViewControl : true,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DEFAULT,
position : google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
$("#map_canvas").css("border", "3px solid black");
infoWindow = new google.maps.InfoWindow({});
var c = {
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#b0c4de",
fillOpacity: 0.50,
map: map,
center: cityCenterLatLng,
radius: 1000,
editable:true
};
circle = new google.maps.Circle(c);
google.maps.event.addListener(circle, 'distance_changed', function()
{
alert('Circle moved');
//displayInfo(circle);
});
google.maps.event.addListener(circle, 'position_changed', function()
{
alert('dictance changed');
//displayInfo(circle);
});
}
function displayInfo(widget)
{
var info = document.getElementById('info');
info.innerHTML = 'Circle Center:' + circle.get('position') + ',Circle distance: ' +
circle.get('distance');
}