javascript - deleting a marker after confirmation infowindow

Question

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 code is here. You can see the error by first creating one or more markers by clicking on the map, and then right-clicking on one of the markers. Finally, click on the "Delete" button.

The code borrows heavily from this code.

EDIT

3 corrections.

1. As pointed out in a comment, I had not updated the jsFiddle. A corrected version can be found at /5/. The main diff is that the line of code inside the Listener for 'rightclick' is commented out, as it should have been all along.

2. That same correction of commenting out a line of code is done below.

3. I am no longer getting the error "{"error": "Please use POST request"}" unless I make a manual change to the jsfiddle code (such as deleting the commented out line altogether), then Control-Return, and then try to add and delete markers. So that is no longer a problem, I believe. Instead the new problem is that if there are multiple markers and I click on just one of them and request its deletion, instead all markers are deleted. So I really need some help to accomplish my goal of deleting markers, one at a time.

The code below

EDIT

var map
var infowindow;
var markers = [];

function initialize() {

    var NY = new google.maps.LatLng(40.739112, -73.785848);
    map = new google.maps.Map(
    document.getElementById('map-canvas'), {
        center: NY,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function (event) {
        addMarker(event.latLng);
    });
}

function addMarker(location) {

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

    var delform = marker.getPosition() + '<br />' + '<form onsubmit="processdel(this,marker); return false" action="#">' + '  <input type="submit" id="delid" value="Delete" />' + '</form>';

    infowindow = new google.maps.InfoWindow({
        content: delform,
        size: new google.maps.Size(50, 50)
    });
    google.maps.event.addListener(marker, 'rightclick', function (event) {
        infowindow.open(map, marker);

        // marker.setMap(null); This is the line that was NOT supposed to be in the code.
    });
}

function processdel(form, marker) {

    infowindow.close();
    marker.setMap(null);
    marker = null;
}


initialize();

Answer 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