google maps v3 setMap undefined when trying to clear all markers

Question

I have seen may people here explain this function:

// REMOVE All MARKERS FUNCTION
    // Removes all markers currently on map
    // PARAMS: None
    function removeAllMarkers(){// removes all markers from map
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
                markersArray = [];
                markersInfoArray = [];
            };
        };
    };

but i get a javascript error...

Break on Error markersArray[i].setMap is not a function

The page is at: http://www.focus-on-plants.com/locator.php

any ideas???

<---------------Update--------------------->

i tried the sugestions and also moved the MarkersArray=[] and markersInfoArray = [] to out side of the for loop so i had this:

for( var i = 0; i < markersArray.length; i++ ){
    markersArray[i].setMap(null);
}

But i get the same error markersArray[i].setMap is not a function

so i looked around and tried this method:

function removeAllMarkers(){// removes all markers from map
    alert('REMOVE MARKERS - markersArray count:'+ markersArray.length);
    while(markersArray[0]){
        markersArray.pop().setMap(null);
        markersInfoArray.pop()
    }
    markersArray.length = 0;
    markersInfoArray.length = 0;
};

and i still get the same error, what gives? its almost as though the setMap() does not exist, i read in another thread here that it change from set_map to setMap() but those dont work for me either :(

score 12 · Answer 1 · edited May 23 '17 at 12:14

I was having the same issue as you. But changing the for-in loop to an actual loop (as suggested here, fixed it.

There was no need to create a new google.maps.marker when removing the marker.

Sample code:


var markersArray = [];

function addMarker() {
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map 
    });
    markersArray.push(marker);
}

function removeMarker() {
    if (markersArray) {
        for (i=0; i < markersArray.length; i++) {
            markersArray[i].setMap(null);
        }
    markersArray.length = 0;
    }
}

score 2 · Answer 2 · answered Nov 09 '10 at 18:52

2

Try an actual loop. for (i in markersArray) will also retrieve properties. It's not the same as, say, PHP's foreach.

for( var i = 0; i < markersArray.length; i++ ) {}

answered Nov 09 '10 at 18:52

theazureshadow

9,499
5
33
48

that works nicely thanks, i give you both correct answers!! Harmen for spotting the markersArray =[] in the for loop and you for this thanks peoples!! – Dizzy Bryan High Nov 09 '10 at 20:35
see comment in above answer :( – Dizzy Bryan High Nov 09 '10 at 20:54

score 2 · Answer 3 · answered Nov 09 '10 at 18:58

2

It breaks because you reset the array inside the loop. This might be a lot better:

function removeAllMarkers(){
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }

        markersArray = [];
        markersInfoArray = [];
    }
}

By the way, you don't need to use a ; all the time ;)

answered Nov 09 '10 at 18:58

Harmen

22,092
4
54
76

thanks tired eyes didn't spot that, i thought it was good practice to use the ; i have just got used to doing it i guess – Dizzy Bryan High Nov 09 '10 at 20:02
Haha, often it's good use to add a semicolon, but the docs say that you need to add it only after a statement: https://developer.mozilla.org/en/JavaScript/Reference/Statements — anyway, Javascript is not like PHP, you don't always get an error if you forget a semicolon – Harmen Nov 09 '10 at 20:04
hmmm thought it was fixed but still getting the same error, ir alerts that there are markers but still comes up with makersArray[i]setMap() is not a function – Dizzy Bryan High Nov 09 '10 at 20:53

score 0 · Accepted Answer · answered Nov 09 '10 at 22:05

ok so ive got it to work, the soloution is kind of ugly but it works,

i figured it wasnt finding the google.maps namespace bit from stored markers in my array so thats why it thought the function dosen't exist.

ie. it should be google.maps.marker.setMap() the marker in the array was just outputting the lat and lng.

so within the removeAllMarkers function i create a new google.maps.marker delmarker populate it with the data from the marker stored in the markersArray and then remove the marker of the map using this new reference delmarker.setMap(null)

and bingo it works, but longwinded and took me a while to figure out :)

function removeAllMarkers(){// removes all markers from map
    for( var i = 0; i < markersArray.length; i++ ){
    delmarker = new google.maps.Marker({
        position: markersArray[i]
    })
    delmarker.setMap(null)
    }   
    markersArray.length = 0;
    markersInfoArray.length = 0;
};

google maps v3 setMap undefined when trying to clear all markers

4 Answers4

Linked