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

} 

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

} 

• javascript
• jquery
• google-maps
• google-maps-api-3
• google-maps-markers

• There is similar question at stackoverflow./questions/2948097/… – Jacob George Commented Jul 31, 2012 at 6: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 Commented Jul 31, 2012 at 8:28

3 Answers 3

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

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

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