Google Map Markers not getting cleared while adding new ones

Question

I have a function that takes a place name as input and drops a pin at the lat and lng positions of that place on the google map. It also sets the bounds using the lat and lng positions to set the pin to viewport. Everything is working fine but the old markers are not getting cleared while adding a new marker. I have cleared the markers array but it's not working. Here is my code

  var place = args.address;

        var bounds = new google.maps.LatLngBounds();

        var icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
        };

      var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            'address': place.formatted_address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);

                var markers = [];

                 markers.forEach(function(marker) {
                marker.setMap(null);
            });

               markers.push(new google.maps.Marker({
                    map: map.map,
                    icon: icon,
                    title: place.name,
                    position: results[0].geometry.location
                }));


                if (results[0].geometry.viewport) {
                    bounds.union(results[0].geometry.viewport);
                } else {
                    bounds.extend(results[0].geometry.location);
                }

                map.map.fitBounds(bounds);

            } else {
                console.log("error")
            }
        });

Prasanth Ravi Prasanth Ravi · Accepted Answer · 2017-08-01T13:16:58

Try this

        var place = args.address;

        var bounds = new google.maps.LatLngBounds();

        var markers = []; //

        var icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
        };

      var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            'address': place.formatted_address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);                 
                markers.forEach(function(marker) {
                marker.setMap(null);

            });
               markers = []; // Empty here
               markers.push(new google.maps.Marker({
                    map: map.map,
                    icon: icon,
                    title: place.name,
                    position: results[0].geometry.location
                }));


                if (results[0].geometry.viewport) {
                    bounds.union(results[0].geometry.viewport);
                } else {
                    bounds.extend(results[0].geometry.location);
                }

                map.map.fitBounds(bounds);

            } else {
                console.log("error")
            }
        });
javascript google-maps goog

Google Map Markers not getting cleared while adding new ones

1 Answers