javascript - Google map API, add marker in ajax after initialize the map -

i know there have been questions related title, didn't find answer suit me.

here issue :

i trying print map, multiple marker in it, generated via database. have, below map, checkbox allow me filter marker on map.

so, first time loading map, filtred (depending on checked default), don't understand how add / remove marker map once initialized. have reload map, or missing ?

here relevant code :

<form> <input class="test" type="checkbox" name="type" value="1" onclick="test()" checked/>1<br/> <input class="test"type="checkbox" name="type" value="2" onclick="test()" checked/>2<br/> <input class="test"type="checkbox" name="type" value="3" onclick="test()" checked/>3<br/> <input class="test"type="checkbox" name="type" value="4" onclick="test()" checked/>4<br/> 

<script> var checkedvalues = $('input:checkbox:checked').map(function() {     return this.value; }).get().join('-');  function fetchplace(filtretype){  $.ajax({     url:    "ajaxmap.php?type=" + filtretype,     type : 'get',     datatype: 'json',     success : function(data) {       // loop through our array of markers & place each 1 on map           for( = 0; < data.marker.length; i++ ) {             var mylatlng = new google.maps.latlng(data.marker[i].log,data.marker[i].lat);             var marker = new google.maps.marker({                   position: mylatlng,                   map: map,                   title: 'hello world!'               });         }     }     ,     error: function(){         /// traiter les erreur     },     async : true }); }; function test (){ var checkedvalues = $('input:checkbox:checked').map(function() {         return this.value;     }).get().join('-'); fetchplace(checkedvalues); }; fetchplace(checkedvalues); 

thanks provide.

loneept

here did:

the 2 arrays of coords correspond in ajax success.

markers array. in addmarkers function, create array filter type value. markers[filtertype] = new array();

this way, can identify markers of each type , toggle them on or off.

of course need adapt needs (i used buttons, used checkboxes, etc.) , maybe need load markers once, etc. should able idea.

var map; var markers = new array();  var coords_1 = [     new google.maps.latlng(60.32522, 19.07002),     new google.maps.latlng(60.45522, 19.12002),     new google.maps.latlng(60.86522, 19.35002),     new google.maps.latlng(60.77522, 19.88002),     new google.maps.latlng(60.36344, 19.36346),     new google.maps.latlng(60.56562, 19.33002)];  var coords_2 = [     new google.maps.latlng(59.32522, 18.07002),     new google.maps.latlng(59.45522, 18.12002),     new google.maps.latlng(59.86522, 18.35002),     new google.maps.latlng(59.77522, 18.88002),     new google.maps.latlng(59.36344, 18.36346),     new google.maps.latlng(59.56562, 18.33002)];  function initialize() {      var mapoptions = {         zoom: 7,         maptypeid: google.maps.maptypeid.roadmap,         center: new google.maps.latlng(59.76522, 18.35002)     };      map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);      $('button').on('click', function() {          if ($(this).data('action') === 'add') {              addmarkers($(this).data('filtertype'));          } else {              removemarkers($(this).data('filtertype'));         }     }); }  function addmarkers(filtertype) {      var temp = filtertype === 'coords_1' ? coords_1 : coords_2;      markers[filtertype] = new array();      (var = 0; < temp.length; i++) {          var marker = new google.maps.marker({             map: map,             position: temp[i]         });          markers[filtertype].push(marker);     } }  function removemarkers(filtertype) {      (var = 0; < markers[filtertype].length; i++) {          markers[filtertype][i].setmap(null);     } }  initialize(); 

jsfiddle demo

so in case, do:

var markers = new array(); // declare @ beginning of script  ...  // loop through our array of markers & place each 1 on map    markers[filtretype] = new array();  (i = 0; < data.marker.length; i++) {     var mylatlng = new google.maps.latlng(data.marker[i].log, data.marker[i].lat);     var marker = new google.maps.marker({         position: mylatlng,         map: map,         title: 'hello world!'     });      markers[filtretype].push(marker); } 

edit:

another solution add filter type marker , push markers same array. can still identify them.

var markers = new array(); // declare @ beginning of script  ...  // loop through our array of markers & place each 1 on map (i = 0; < data.marker.length; i++) {     var mylatlng = new google.maps.latlng(data.marker[i].log, data.marker[i].lat);     var marker = new google.maps.marker({         position: mylatlng,         map: map,         title: 'hello world!',         filtertype: filtretype     });      markers.push(marker); } 

now if want remove markers of filter type can do:

function removemarkers(filtertype) {      (var = 0; < markers.length; i++) {          if (marker.filtertype === filtertype) {              markers[i].setmap(null);         }     } } 

note: don't know if it's typo, make sure don't mess filtertype , filtretype. change filtertype avoid confusion...