fletcher fletcher - 1 month ago 19
Javascript Question

Remove marker from Google Maps API V3

I have a map where I want to add a marker (with info window) via a checkbox. It also works quite well, but I just can not get it deleted again when I uncheck the checkbox. Can anyone help?

See also here: http://jsfiddle.net/x8D7y/

function clearOverlays() {
google.maps.event.clearListeners(marker300, 'click');
}

function showOverlays() {
var marker300 = new google.maps.Marker({
position: new google.maps.LatLng(45.0, 1.0),
map: map /*,
icon: 'img/bike5.png' */
});

var infowindow300 = new google.maps.InfoWindow({
content: '<div style="width: 200px;">Test 300 - <a href="http://www.google.com" target="_blank">Link</a></div>'
});

google.maps.event.addListener(marker300, 'click', function() {
infowindow300.open(map, marker300);
});
}

Answer

You have to use an external Array which holds the extra markers you use with the map. In your case I have added the following array:

var extraMarkers = [];

Then when I click the checkbox, I am getting the ID of that checkbox, and send it in both showOverlays() and clearOverlays() as function argument.

Then, in showOverlays(), I am using the checkbox ID as extraMarkers key and the marker as value.

Finally, in clearOverlays() I use again the checkbox ID to get the element with this ID from the extraMarkers array and I see the map to null, in order to remove the marker.

See here the working example : http://jsfiddle.net/x8D7y/1/

Here is the full code required by you:

var map;
var extraMarkers = [];
var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(45.0, 1.0)
};

map = new google.maps.Map($('#map')[0], myOptions);

var marker1 = new google.maps.Marker(
    {
        position: new google.maps.LatLng(45.5, 1.5),
        map: map /*,
        icon: 'img/bike5.png' */
    }
);

var infowindow1 = new google.maps.InfoWindow(
    {
        content: '<div style="width: 200px;">Test 1 - <a href="http://www.google.com" target="_blank">Link</a></div>'
    }
);

google.maps.event.addListener(
    marker1, 
    'click', 
    function()
    {
        infowindow1.open(map, marker1);
    }
);

function clearOverlays(myID)
{
    google.maps.event.clearListeners(extraMarkers[myID], 'click');
    extraMarkers[myID].setMap(null);
}

function showOverlays(myID)
{
    var marker300 = new google.maps.Marker(
        {
            position: new google.maps.LatLng(45.0, 1.0),
            map: map /*,
            icon: 'img/bike5.png' */
        }
    );

    extraMarkers[myID] = marker300;

    var infowindow300 = new google.maps.InfoWindow(
        {
            content: '<div style="width: 200px;">Test 300 - <a href="http://www.google.com" target="_blank">Link</a></div>'
        }
    );

    google.maps.event.addListener(
        marker300, 
        'click', 
        function()
        {
            infowindow300.open(map, marker300);
        }
    );
}

$('#mapall').change(
    function()
    {
        var myID = $(this).attr('id');

        if($('#mapall').attr('checked'))
        {
            showOverlays(myID);
        }
        else
        {
            clearOverlays(myID);
        }
    }
);