Question

I have put multiple markers on my map by click event and now I want to delete a single marker by double clicking on a specific marker. But what it is doing is just deleting the last marker of the array. Any help please?

:::::::::::::::::::::EDIT::::::::::::::

Is it possible to delete a single marker based on a button press? It is something like I have a table row where I have put the lat long of that marker and a delete button. If I click delete button it should delete the point associated with that button in that row.

Answer 1

The easy way: assign added marker’s index (in markersArray) to the button and invoke deleteMarker upon click event on that button:

function createRow(markerIndex){ // add your args like lat, lng etc
  // do the magic and create table row with button having onclick=deleteMarker(markerIndex)
}

function deleteMarker(markerIndex){
  markersArray[markerIndex].setMap(null);
}

// invoke createRow when adding new marker
function addMarker(position){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var markerIndex = markersArray.push(marker) - 1; // push() returns new array length
  createRow(markerIndex);
}

This will work for new markers as well as for the ones loaded from eg. db.
Mind that you will have to check which markers are going to be put in db if you want to save them, since setMap(null) doesn’t deletes them from the markersArray.