Remove previous marker in google map and load new places

Question

I use to ajax to load my places from external json like this:

[{
  "id":"1",
  "title": "Stockholm",
  "lat": 59.3,
  "lng": 18.1,
},
{
  "id":"2",
  "title": "Oslo",
  "lat": 59.9,
  "lng": 10.8,
},
{
  "id":"2",
  "title": "Copenhagen",
  "lat": 55.7,
  "lng": 12.6,
}]

and my map load in page with a code like this:

var MapInitialized = false,
        $map           = $('#googleMap .map');

    var mapProp = {
        center:new google.maps.LatLng(35.6891970, 51.3889740),
        zoom:12,
        disableDefaultUI: true,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        animation: google.maps.Animation.DROP,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle']
            }
        };
    var map = new google.maps.Map($map[0], mapProp);

    var infoWindow = new google.maps.InfoWindow();

    $("select").change(function(){

        $.ajax({
            type: "GET",
            url: "places.json",
            dataType: "json",
            beforeSend: function(){ $(".mapLoading").fadeIn();},
            complete: function(){ $(".mapLoading").fadeOut();},
            success: function(response){

                var LatLngList = new Array();
                var marker;

                $.each(response, function(key, data) {

                    Point = new google.maps.LatLng(data.lat, data.lng); 

                    LatLngList.push(Point);

                    console.log(LatLngList);

                     marker = new google.maps.Marker({
                        position: Point,
                        map: map,
                        title: data.title
                    });
                });

                var bounds = new google.maps.LatLngBounds ();
                for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
                    bounds.extend (LatLngList[i]);
                }

                map.fitBounds (bounds);

            }
        });
    });

I have a selector on my HTML page that when user change it ajax send request to json and marker will show on map. now i need to remove all previous marker and load new marker on map without loading a new map.

Answer 1

1. create an array to keep references of the google.maps.Marker objects:

   var markers = [];
   

2. push your google.maps.Marker objects into the array as they are created:

   var bounds = new google.maps.LatLngBounds();
   $.each(response, function(key, data) {
       var Point = new google.maps.LatLng(data.lat, data.lng); 
       bounds.extend(Point);
       var marker = new google.maps.Marker({
                   position: Point,
                   map: map,
                   title: data.title
       });
       markers.push(marker);
   });
   map.fitBounds (bounds);
   

3. When you want to remove the markers, iterate through the array setting their map property to null, then clear out the array:

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

proof of concept fiddle

Answer 2

You need to keep your markers instances into an array, so you can access them later.

The trick is then to use marker.setMap(null); to remove a marker from the map

var markers = [];

// ...
// success callaback
markers.forEach(function(m) { m.setMap(null); });

markers = response.map(function(data) { 
    return new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.lng),
                    map: map,
                    title: data.title
                });
});