Unable to remove all markers in Google Map v3

Question

I am adding makers like this:

 var markers = [];
    var map = null;
$.ajax({
        type:"GET",
        dataType:"json",
        url:"<?php echo site_url("sandbox_faizan/get_coordinates") ?>",
        success: function(result)
        {
            for(var i=0;i<result.length;i++)
            {
                var obj = [] ;
                obj.lat=result[i].lat;
                obj.lng=result[i].lng;
                obj.count=result[i].Count;
             //   points.push(new google.maps.LatLng(result[i].lat,result[i].lng));
               markers.push(obj);
                //console.log(points[i]);
                console.log(markers[i]);
            }
            addMarkers();
        }
    });
 function addMarkers() {
        // when the map is initialized and the points have been initialized, add them to the map
        if ((map != null) && (markers.length > 0)) {
            for (var i = 0; i < markers.length; i++) {
                var marker = new MarkerWithLabel({
                    map: map,
                    position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
                    icon: pinImage,
                    shadow: pinShadow,
                    labelContent: markers[i].count,
                    labelAnchor: new google.maps.Point(12, -5),
                    labelClass: "labels"
                });
                bounds.extend (new google.maps.LatLng(markers[i].lat,markers[i].lng));
                map.fitBounds (bounds);
            }
        }
    }

I am clearing markers like this:

  function remove_markers(){

        google.maps.Map.prototype.clearMarkers = function() {
            for(var i=0; i < this.markers.length; i++){
                this.markers[i].setMap(null);
                alert("removing now"); // THIS DOES NOT ALERT
            }
            this.markers = new Array();
        };
    }

It does nothing, I tried other approaches that uses setMap(null) , previously it gave me error uncaught type error setMap not defined in console.

What am I doing wrong?

Answer 1

var marker = new MarkerWithLabel({
                map: map,
                position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
                icon: pinImage,
                shadow: pinShadow,
                labelContent: markers[i].count,
                labelAnchor: new google.maps.Point(12, -5),
                labelClass: "labels"
            });
markersToRemove.push(marker); // markersToRemove is a global array

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

Answer 2

You markers array is not a property of the google.maps.Map object (unless you are using a library that does that). The way your code adds them, they are in a global array named "markers".

But that isn't an array of google.maps.Marker objects, you need to keep references to those markers.

 var gmarkers = [];
 function addMarkers() {
        // when the map is initialized and the points have been initialized, add them to the map
        if ((map != null) && (markers.length > 0)) {
            for (var i = 0; i < markers.length; i++) {
                var marker = new MarkerWithLabel({
                    map: map,
                    position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
                    icon: pinImage,
                    shadow: pinShadow,
                    labelContent: markers[i].count,
                    labelAnchor: new google.maps.Point(12, -5),
                    labelClass: "labels"
                });
                bounds.extend (new google.maps.LatLng(markers[i].lat,markers[i].lng));
                gmarkers.push(marker);
                map.fitBounds (bounds);
            }
        }
    }

Then this should remove them (and be very annoying with lots of markers).

  function remove_markers(){
     for(var i=0; i < gmarkers.length; i++){
       gmarkers[i].setMap(null);
       alert("removing now"); // THIS DOES NOT ALERT
     }
     gmarkers = [];
  };

Answer 3

1) You're adding the wrong information to markers. You need to add it after the marker has been declared:

First, rename your markers array to markersData.

Then ensure that your markers array is getting each marker.

var marker = new MarkerWithLabel({
  // stuff
});

markers.push(obj);

Then try it without calling that prototype:

function remove_markers() {
  for(var i=0; i < this.markers.length; i++){
    markers[i].setMap(null);
    alert("removing now");
  }
  this.markers = new Array();
}

Note that this.markers = new Array(); or this.markers.length = 0; will destroy the markers array and they won't exist anymore. If you just want to remove the markers from the map, just do:

function remove_markers() {
  for(var i=0; i < this.markers.length; i++){
    markers[i].setMap(null);
    alert("removing now");
  }
}

The markers will still be in the array and you can add them back to the map whenever you want.

I'm not sure, but I think the fitbounds statement should be outside the loop, but I might be wrong.

Fiddle