I have encountered an issue while attempting to remove a marker from Google Maps using a custom delete button within the info window. Even though I have successfully added the button and necessary information, it seems that the function responsible for deleting the marker is not being called when the delete button is pressed.
Below is the code snippet showcasing the implementation:
function initMap() {
var jsonData = {$pointsArray};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
maxzoom: 15,
center: {
lat: 38,
lng: -77
}
});
function addInfoWindow(marker, message) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
var bounds = new google.maps.LatLngBounds();
var uniqueId = 1;
var markers = [];
for (var i = 0, len = jsonData.length; i < len; ++i) {
var point = jsonData[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(point.Lat, point.Lon),
map: map,
title: point.Title
});
bounds.extend(marker.position);
marker.id = uniqueId;
uniqueId++;
var contentString = '<div id="content">'+
'<h4 id="pointId" > ' + point.Title + '</h4>'+
'<h6 >City: ' + point.City + '</h6>'+
'<h6 >Latitude: ' + point.Lat+ '</h6>'+
'<h6 >Longitude: ' + point.Lon + '</h6>'+
'<h6 >Address: ' + point.Address + '</h6>'+
'<p data-placement="top" data-toggle="tooltip" title="Delete"><a href="" onclick= "DeleteMarker( "+ marker.id +" );" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></a></p>'
'</div>';
addInfoWindow(marker, contentString);
markers.push(marker);
}
function DeleteMarker(id) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].id == id) {
markers[i].setMap(null);
markers.splice(i, 1);
return;
}
}
};
map.fitBounds(bounds);
}
It appears that there might be an issue with the onclick attribute in the delete button. Any assistance or guidance on resolving this problem would be greatly appreciated!