Deleting A Marker After Confirmation Infowindow

Yet another {'error': 'Please use POST request'} from jsFiddle is thwarting my attempt to delete a google-maps-api-3 marker after getting confirmation from the user. My jsFiddle co

Solution 1:

A few rules to achieve what you want.

1. Create only one instance of the infowindow object and use setContent() method to modify its content.

2. Use the domready event of the infowindow to bind any action to an element within the infowindow.

3. Add an Id to each marker so that you are able to identify each one separately. I used a simple counter in the below example. Increment it each time you create a marker.

First create the infowindow instance and a counter:

var infowindow = new google.maps.InfoWindow();
var counter = 0;

Then create each marker with a specific id and use that id on the infowindow button:

function addMarker(location) {

    counter++;

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: counter
    });

    markers.push(marker);

    var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';

    google.maps.event.addListener(marker, 'rightclick', function () {
        infowindow.setContent(deleteButton);
        infowindow.open(map, marker);
    });
}

Then you need to listen to the domready event of the infowindow, call your delete function with the marker id that you get from the button, and finally loop through your markers array to delete the appropriate marker.

JSFiddle demo