Google Maps Api 3 Remove Selected Marker Only

Question

I've 2 function as below:

function addMarker() {     marker = new google.maps.Marker({         position: Gpoint,         map: map,         draggable: true,         animation: google.maps.Animation.DROP     });     map.panTo(Gpoint);      google.maps.event.addListener(marker, "rightclick",      function (point) {      showContextMarker(point.latLng); } );      $('.contextmenu').remove(); };  function delMarker() { marker.setMap(null); $('.contextmenu').remove(); }; 

So, as may understand I have a Context Menu having "Delete Marker" option on it. I am binding a "rightclick" listener during adding a marker, to show this menu.

Everything is working without any problem till this moment.

But when I try to click on a marker to delete; it is effecting only the last added marker. When I try again; nothing happens.

So my idea is to get the clicked marker's id (or something that may well be useful) and run this deleting function according to this.

Briefly; I want to delete the marker that I clicked on, from a map having multiple markers.

Do you have any approach to solve this problem ?

Thanks in advance!

SOLVED!

Here is the solution. Thank you Fatih. it was impossible without your guidance:

var id; var markers = {}; var addMarker = function () {     marker = new google.maps.Marker({          position: Gpoint,         map: map,         draggable: true,         animation: google.maps.Animation.DROP     });     map.panTo(Gpoint);     id = marker.__gm_id     markers[id] = marker;       google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) }); }  var delMarker = function (id) {     marker = markers[id];      marker.setMap(null); } 

Calling delete function by: delMarker(id) Ps: "Right clicking is enough on this case"

Thank you!

Answer 1

Working Sample on jsFiddle

---

Google Maps doesn't manage your markers. So all your markers should be managed by yourself.

Make a global marker object and push all markers to this object. And give unique id to each marker when getting a marker instance. Then when you want to delete a marker take its id and find this marker in global marker object and finally call this marker instance's setMap method with passing null argument.

Also I've added a demo that works on jsFiddle. Code is heavily documented.

Your psuedo code should be like this. For more detailed code please look the demo.

 var currentId = 0; var uniqueId = function() {     return ++currentId; }  var markers = {}; var createMarker = function() {     var id = uniqueId(); // get new id     var marker = new google.maps.Marker({ // create a marker and set id         id: id,         position: Gpoint,         map: map,         draggable: true,         animation: google.maps.Animation.DROP     });     markers[id] = marker; // cache created marker to markers object with id as its key     return marker; } var deleteMarker = function(id) {     var marker = markers[id]; // find the marker by given id     marker.setMap(null); }