Google Maps Api 3 Remove Selected Marker Only

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!

Answers


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);
}

Complementing the @Fatih answer you should manage the markers. For example you could add each marker in a array and then to remove, you could find this marker into the array and set the val in the map null.


Just pass your marker in the rightclick function. For example:

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: true,
    title: 'Hello World!'
});
google.maps.event.addListener(marker, "rightclick", function (point) {delMarker(marker)});

And make the function look this:

var delMarker = function (markerPar) {
    markerPar.setMap(null);
}

Your markers will be removeable on the rightclicks.


this worked for me:

a second currentId, if you have a better idea, let me know

var actualMarkerId = 0;
var currentId = 0;



    if (actualMarkerId>0) {
        deleteMarker(actualMarkerId);
        console.log(actualMarkerId);
    }
    var id = uniqueId(); // get new id
    actualMarkerId = id;

For minimal changes

var newid=0;

for (var index in results){

var marker = new google.maps.Marker({

map: map,
icon: image,

__gm_id: = newid+1,

});
}

Now marker['__gm_id'] still has a value


Simple,Use Global array for marker Objects. Push marker object in that array on plotting marker. Yes,We can use Id in Marker Object for Unique Reference.

Code As Below

MarkerArray = []

marker = new google.maps.Marker({
         Id: 1,
         position: new google.maps.LatLng(Lat,Long),
         type: 'info'         
          });

MarkerArray.push(marker);

To remove particular Marker,Find that Element Index using Unique Id for Each Marker.

var MarkerIndex = MarkerArray.findIndex(function GetIndex(element) {
            return element.Id == 1;
});    
MarkerArray[MarkerIndex].setMap(null);
MarkerArray.splice(MarkerIndex, 1); // to remove element from global array

Need Your Help

onActivityResult() not called when Activity started from Fragment

android android-fragments

I have an issue with importing a picture from the Album in Android, because the onActivityResult() method is never called.