ユーザーが地図をクリックするとマーカーを作成する ajax リクエストがあります。ユーザーが特定のクリック位置にマーカーを作成したら、マーカーにもクリックを登録します。
ユーザーがマーカーをクリックすると、ユーザーがマップからマーカーを削除したり、マーカーのステータスをアクティブに設定したりできるボタンを含むjqueryダイアログが表示されます。ユーザーがマーカーをクリックしてjqueryダイアログから「マーカーの削除」を選択すると、マーカーを削除する際に問題が発生します。
var roadBlockMarker =[{"roadBlockId":null,"purpose":null,"userName":null,"status":null,"latAdd":null,"longAdd":null}];
Ajax Requestはマーカーを作成します
$.ajax({
type: 'POST',
url: 'createRoadBlock.htm',
async: 'false',
cache: false,
data: {
purpose: f_purpose,
userName: f_userName,
status: f_status,
latAdd: f_latAdd,
longAdd: f_lngAdd
},
dataType: 'json'
}).success(function (recordId) {
console.log('Road Block created with id ' + recordId);
//create marker for roadblock
//create marker for currently clicked location
var roadblock_img = new google.maps.MarkerImage('/crimeTrack/resources/icons/roadblock_wait.png', null, // size
null, // origin
new google.maps.Point(8, 8), // anchor (move to center of marker)
new google.maps.Size(17, 17)); // scaled size (required for Retina display icon)
var myLatLng = new google.maps.LatLng(f_latAdd, f_lngAdd);
roadBlockMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: roadblock_img,
title: 'Road Block Waiting Progress ' + recordId,
flat: true,
optimized: false,
visible: true
});
roadBlockMarker.setMap(map);
$("#roadblock-dialog").dialog("close");
//attach a click event so police officers can activate road block or remove it
google.maps.event.addListener(roadBlockMarker, "click", function () {
$("#roadblockmarker-dialog").dialog("open");
});
});
マーカーがクリックされたときに呼び出され、マーカーを削除またはアクティブにするオプションを表示するJquery ダイアログ
$("#roadblockmarker-dialog").dialog({
autoOpen: false,
height: 100,
width: 380,
resizable: false,
modal: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Remove Marker": function () {
//how can i remove the marker clicked by the user only?
},
"Activate Road Block": function () {
alert('Activating RoadBlock');
}
}
});