I have an overlay image that is on google map. when I click the overlay, there is a marker added to the map, and I get the lat and lng from the google map underneath. This is all connected to the DB. My problem is deleting the specific marker. Becuase the marker is set on an overlay and not on the google map itself, I can not find a suitable code that can will help me. All I want to do is to click on the marker that is set and remove is from the map. This is my code to set the overlay on the google map, the infow indow and setting the marker: var overlay = new google.maps.GroundOverlay( canvasImage, overlayBounds); overlay.setMap(map);
var contentString = '<div id="content">' +
'<h1>Node Details</h1>' +
'<div id="bodyContent">' +
'<p>Name:</p>' +
'<input id="nameTB" type="text" style="width:100px" />' +
'<p>Info:</p>' +
'<input id="infoTB" type="text" style="width:100px" />' +
'<br/>' +
'<p>Type:</p>' +
'<select id="list" ><option>CrossWayNode</option><option>BuildingNode</option><option>PointNode</option></select>'+
'<br/>' +
'<br/>' +
'<input id ="senddetailsbutton" type="button" value="send" onclick="send()" style="width:100px"/>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(overlay, 'click', function (e) {
//e.latLng give the clicked position
infowindow.open(map, new google.maps.Marker({ map: map, position: e.latLng }));
latobj = document.getElementById("latclicked"); //writing the lat and lng into the textbox
lngobj = document.getElementById("lngclicked");
latobj.value = e.latLng.lat();
lngobj.value = e.latLng.lng();
});
<div>Lng on click: <input type="text" id="lngclicked" style="width:200px; border:1px inset gray;"></div>
<div>Lat on click: <input type="text" id="latclicked" style="width:200px; border:1px inset gray;"></div>
<div id="map_canvas">
</div>
thanks!
Aucun commentaire:
Enregistrer un commentaire