How to delete one marker at a time on google map

Question

I have created an array of markers. I use these array of markers to listen for 'click' and place the marker on Google Map, as well as creating functions to 'clear all the markers', 're-display all the markers' and 'delete all the markers'.

The problem is, how do I do this in a way where I am able to clear or delete one-marker-at-a-time? Reason is because if I happened to accidentally plot to a location where I do not want, and I would want to clear/delete it away, I couldn't do it. If I were to clear/delete that particular marker, the rest of the markers that I have plotted previously will be cleared/deleted as well...

My code:

//Initialize the map
function initialize() {
    var myLatlng = new google.maps.LatLng(2,110);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
}

function changeForm(the_form) {
    window.location = the_form;
}


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

// Place markers in by click
function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        title:"Specified Location",
        icon: 'images/greenPoint.png'
    });
    markersArray.push(marker);
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
}

// Shows any overlays currently in the array
function showOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(map);
        }
    }
}

Answer 1

When you are creating your markers, instead of pushing them all onto the list markersArray, you could store them based on their Lat/Lng (or event better, some sort of id), and then set an event handler on each marker to remove itself from the list of markers when it is clicked.

I'm not sure if you can store arbitrary information with a google.maps.Marker object, but you could always create your own object that has an ID and a google.maps.Marker object as its members:

function myMarker(id, location) {
    this.id = id;
    this.marker = new google.maps.Marker({...});
}

Then markersArray[id] = new myMarker(myId, myLocation) would allow you to store all of your markers based on their arbitrary IDs. Then you can assign the handler that I described on this.marker to remove yourself from the markersArray and map.

Another way to do it would be to store your markers based on their Lat/Lngs, so your markersArray would save the markers along the lines of:

markersArray[location.lat][location.lng] = new google.maps.Marker({...});

And you can then use your event handler to grab the marker's lat/lng when clicked, and remove itself from the array and map that way.

Let me know if you need more detail.