Google Maps V3 Remove all markers after each click

Question

At the moment when my .preview button is clicked it looks at each address in a textarea and then plots it.

I would like to remove the markers each time .preview is clicked as I see that it just plots another marker around the same point as the marker before.

$('.preview').click(function(){    
setAllMap(null);
var temp_addresses = document.getElementById("gps").value.split("\n");
    for(var i=0;i<temp_addresses.length;i++){
        addresses.push(temp_addresses[i]);
        geocoder.geocode( { 'address': temp_addresses[i]}, function(response, status) {
            geocode_results[i] = new Array();
            geocode_results[i]['status'] = status;
            var top_location = response[0];
            var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
            var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
            geocode_results[i]['lat'] = lat;
            geocode_results[i]['lng'] = lng;
            geocode_results[i]['l_type'] = top_location.geometry.location_type;
            marker = markers[i] = new google.maps.Marker({
                icon: mapIcon,
                position: new google.maps.LatLng(lat,lng),
                map: map
            });
        });
    }
});

This gives me a console.log() of ReferenceError: setAllMap is not defined

I have tried marker.setMap(null); but I get back TypeError: marker.setMap is not a function

Help is appreciated

Edit.

    var marker = [];

    var addresses = new Array();
    var geocode_results = new Array();
    function setAllMap(map) {
       for (var i = 0; i < marker.length; i++) {
          marker[i].setMap(map);
       }
    }
    $('.preview').click(function(){    
setAllMap(null);
var temp_addresses = document.getElementById("gps").value.split("\n");
    for(var i=0;i<temp_addresses.length;i++){
        addresses.push(temp_addresses[i]);
        geocoder.geocode( { 'address': temp_addresses[i]}, function(response, status) {
            geocode_results[i] = new Array();
            geocode_results[i]['status'] = status;
            var top_location = response[0];
            var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
            var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
            geocode_results[i]['lat'] = lat;
            geocode_results[i]['lng'] = lng;
            geocode_results[i]['l_type'] = top_location.geometry.location_type;
            marker = markers[i] = new google.maps.Marker({
                icon: mapIcon,
                position: new google.maps.LatLng(lat,lng),
                map: map
            });
        });
    }
});

@ManetiVinay just as long as the markers are gone and will be replotted according to the `var temp_addresses` — ngplayground, Nov 05 '13 at 14:36
https://developers.google.com/maps/documentation/javascript/examples/marker-remove I think this links is use full.......... — vinay Maneti, Nov 05 '13 at 14:39
@ManetiVinay I seen this and it does not seem to remove the markers. It outputs the errors I posted originally — ngplayground, Nov 05 '13 at 14:41
Where is the `setAllMap` function at, and what does it look like? Where did you call `marker.setMap(null);`? Your question hasn't got enough detail in it — duncan, Nov 05 '13 at 14:42
http://stackoverflow.com/questions/4137308/google-maps-v3-setmap-undefined-when-trying-to-clear-all-markers You may get some information before this was ans... — vinay Maneti, Nov 05 '13 at 14:49
Placed `marker.setMap(null);` after `$('.preview').click(function(){` I done the same with `satAllMap` too and this still comes up with error `ReferenceError: setAllMap is not defined` — ngplayground, Nov 05 '13 at 14:54

score 0 · Answer 1 · answered Nov 05 '13 at 15:23

0

You need to create a setAllMap function (it isn't part of the API)... if the markers array is in the global scope, this should work.

function setAllMap(map) {
   for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
   }
}

or you can just put the loop where you call the function.

answered Nov 05 '13 at 15:23

geocodezip

158,664
13
220
245

This unfortunately doesn't work, there are no errors but the markers still stay in position. See edit – ngplayground Nov 05 '13 at 15:47
Can you provide a jsfiddle that shows the problem? It should work if the markers array is global, but I didn't test it (as you didn't provide enough code to do so easily...) – geocodezip Nov 05 '13 at 16:07

Google Maps V3 Remove all markers after each click

1 Answers1