how to remove the old marker from google map place new one?

Question

I have load the default google map with markers and have to remove the previous markers with the current one. I have used googolle mpa and initiazlie the function before the page load

Please check with my below code and adivse on me how to achieve this.

$(document).ready(function() {
var markers = [];

//var markers = [];
var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
var page;

$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
       dataType: 'json', 
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (result) {  



    //alert("hi");
    $('#jobsfound').html(result.search_results);

        var list = result.map_array;

        var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";


        $.each(list, function(index, value) {

                var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);
            console.log(list[index].latitude, list[index].longitude);


              markers [index] = new google.maps.Marker({
      map: map
    });
     markers[index].setPosition(newLatLng); 
                    //markers.push(marker);


        })

        //initialize();
    }

    })


 $.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",

    data:'location_checkboxes='+ values + '&budget_value=' + budget_value  + 
    '&job_dates=' + job_date  + '&page='+track_click,
     dataType: 'json', 
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (result) {
         $('#jobsfound').html(result.search_results);
         //alert($("#test").text());
        //initialize();
        var list = result.map_array;
        var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";
        $.each(list, function(index, value) {

            var lat = parseFloat(value.latitude);
             var lng = parseFloat(value.longitude);
            var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);

                    //markers[index] = new google.maps.Marker({
  //                            position: newLatLng,
 //                         icon:image,
 //                         map: map,
   //                           draggable: false
   //                       });

              markers [index] = new google.maps.Marker({
      map: map
    });
     markers[index].setPosition(newLatLng); 
                     //markers.push(marker);

        })

    }
})      
    google.maps.event.addDomListener(window, 'load', initialize);

Iterate over the marker list ant setMap(null) to each this will remove them from the map. After delete the markers and create de new ones — Jose Rocha, Dec 15 '15 at 12:29
and it should be something like `markers.forEach(function(k,v){v.setMap(null)})` ,i would suggest that if you don´t know how to make a loop to go to the basics and learn first — Jose Rocha, Dec 15 '15 at 13:00
possible duplicate of [Google Maps API v3: How to remove all markers?](http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers) — geocodezip, Dec 15 '15 at 14:12

score 0 · Accepted Answer · answered Dec 15 '15 at 15:03

set the markers as global array before initialize function (please refer http://www.w3schools.com/googleapi/google_maps_basic.asp)

var markers = [];

$(document).ready(function() {


//var markers = [];

//var markers = [];
var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
var page;

$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
       dataType: 'json', 
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (result) {  



    //alert("hi");
    $('#jobsfound').html(result.search_results);

        var list = result.map_array;

        var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";


        $.each(list, function(index, value) {

            var contentString = '<div id="content">'+list[index].title+'</div>';


            var infowindow = new google.maps.InfoWindow({
                content: contentString
              });
                var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);
            console.log(list[index].latitude, list[index].longitude);


             markers [index] = new google.maps.Marker({
                  icon:image,

                  map: map
            });

             markers[index].setPosition(newLatLng); 

              markers[index].addListener('mouseover', function() {
                infowindow.open(map, marker);
              });

                    //markers.push(marker);


        })

        //initialize();
    }

    })


 });

how to remove the old marker from google map place new one?

1 Answers1