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.

possible duplicate of [Google Maps Refresh Markers](http://stackoverflow.com/questions/18443941/google-maps-refresh-markers) — geocodezip, Oct 18 '15 at 17:34
possible duplicate of [Google Map API - Removing Markers](http://stackoverflow.com/questions/16482949/google-map-api-removing-markers) — geocodezip, Oct 18 '15 at 17:38

score 2 · Answer 1 · answered Oct 18 '15 at 11:07

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
                });
});

your trick did not work for me :-( . again add new point to previous point and show all of them. — MEHRYĀR.S, Oct 18 '15 at 11:34

score 0 · Answer 2 · answered Oct 18 '15 at 21:56

create an array to keep references of the google.maps.Marker objects:
```
var markers = [];
```

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);

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

i'm so confused. your fiddle is true, but when I copied your code into my project did not work. — MEHRYĀR.S, Oct 19 '15 at 13:51

Remove previous marker in google map and load new places

2 Answers2