Google Maps API - clear markers,polylines before load new data from ajax page

Question

I load the markers and polylines from a ajax page , each request data shown on index page , now I want to clear data (markers,polylines,...) before get new data from ajaxPage

Index Page:

var gmarkers = []; 
var map = null;
function initialize() {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(35, 53),
    // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
}

Ajax Page(record2.php):

var polylines = [];

var beaches = [
    ['Bondi Beach',10,15, 4],
    ['Coogee Beach',11,16, 5],
    ['Cronulla Beach',13,15, 3],
    ['Manly Beach',13,17, 2],
    ['Maroubra Beach',12,10, 1]
];

for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    // var polylines = new google.maps.LatLng(beach[1], beach[2]);
    polylines.push(new google.maps.LatLng(beach[1], beach[2]));

    var marker = createMarker(myLatLng,"This place",beach[0])
}

var routes = new google.maps.Polyline({
    path: polylines,
    strokeColor: "#FF0000",
    strokeOpacity: 0.6,
    strokeWeight: 4
});

routes.setMap(map);

Question: simple way to clear polylines , markers and etc before load new data from ajax page ?

/--- EDIT ---/
I check the answer of Google Maps API v3: How to remove all markers? but just first request from requested page was response , next requests will not work , I think I wrong add a clear map function

Call AjaxPage From Index:

$(document).ready(function(){
     $('#loader').hide();

        $("#search_button").click(function() {

            $('#loader').fadeIn(200);
            $('#login_group').slideUp(200);
            $.post("record2.php", {
                time: $('#login_username').val()

            }, function(response){
                setTimeout("finishAjax('login_group', '"+escape(response)+"')", 200);
            });
            return false;
        });
    });

function finishAjax(id, response){
  $('#loader').slideUp(300);
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn(200);

}

There is similar question at http://stackoverflow.com/questions/2948097/google-maps-api-v3-how-to-clear-overlays — Jacob George, Jul 31 '12 at 06:57
@kidmenot I checked it that answer when I use it just `first request` of (record2.php) is work and next requests with post to `record2.php` don't work , I think a problem in clearmap I use it (on above link) . — Root, Jul 31 '12 at 08:28

score 6 · Accepted Answer · answered Aug 03 '12 at 06:24

6

Create variable a marker array. And then when create a marker, adding marker arrays. You can try to this one.

var markerArrays = new Array();
for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    // var polylines = new google.maps.LatLng(beach[1], beach[2]);
    polylines.push(new google.maps.LatLng(beach[1], beach[2]));

    var marker = createMarker(myLatLng,"This place",beach[0]);
    markerArrays.push(marker);
}

$.each(markerArrays, function(index, val) {
    val.setMap(null);
});

answered Aug 03 '12 at 06:24

turankonan

1,011
6
13

Thanks , I must use above codes in `index page` or `ajax requested page` ? – Root Aug 05 '12 at 06:41
Yes, @root. You can use this codes above the codes of index.page. – turankonan Aug 06 '12 at 05:36

score 1 · Answer 2 · answered Sep 30 '16 at 07:13

1

Just reset the map
i.e. load map once again map = new google.maps.Map(document.getElementById('map'), mapOptions);

answered Sep 30 '16 at 07:13

rgb

143
3
15

even so: map = new google.maps.Map(document.getElementById('map'), { center: map.getCenter(), zoom: map.getZoom() }); – djdance Dec 18 '16 at 09:42

score 0 · Answer 3 · answered Aug 08 '18 at 10:37

0

You have to create an array where you save all your markers.

If you want to clear all your markers you have to go through the array and with

marker.setMap(null)

you can delete all the markers

answered Aug 08 '18 at 10:37

Jakob Kreinecker

111
2
5

Google Maps API - clear markers,polylines before load new data from ajax page

3 Answers3