Toggle on/off Google map markers by category -


i have below , want sort markers various category type being pulled under cat: datamarkers.cat. im bit lost how best way. i'm thinking markermanager each category? need each category in own markermanager array? how factor in markerclusterer?

var map;  function initialize() {         var center = new google.maps.latlng(39.632906,-106.524591);         var options = {           'zoom': 8,           'center': center,           'maptypeid': google.maps.maptypeid.roadmap         };          var map = new google.maps.map(document.getelementbyid("map_canvas"), options);              <!--load markers-->                     var markers = [];                     (var = 0, datamarkers; datamarkers = data.markers[i]; i++) {                       var latlng = new google.maps.latlng(datamarkers.lat, datamarkers.lng);                       var marker = new google.maps.marker({                         position: latlng,                         title: datamarkers.title,                         date: datamarkers.date,                         time: datamarkers.time,                         desc: datamarkers.desc,                         img: datamarkers.img,                         add: datamarkers.address,                         cat: datamarkers.cat,                         map: map                       });              <!--display infowindows-->                         var infowindow = new google.maps.infowindow({                             content: " "                           });                           google.maps.event.addlistener(marker, 'click', function() {                             infowindow.setcontent('<div id="mapcont"><img class="mapimg" src="'+this.img+'"/>' +                                                   '<div class="maptitle">'+this.title+'</div>' +                                                    '<div class="maphead">date: <div class="mapinfo">'+this.date+'</div>' +                                                   '<div class="maphead">time: <div class="mapinfo">'+this.time+'</div>' +                                                   '<p>'+this.desc+'</p></div>');                             infowindow.open(map, this);                           });                        markers.push(marker);                     }              <!--cluster markers-->                 var markerclusterer = new markerclusterer(map, markers, {                   maxzoom: 15,                   gridsize: 50                 });  } 

i recommend store markers in array. create field called category on each marker , give correct value.

whenever category changes, run through array of markers , set marker.visible = true on ones in correct category, , marker.visible = false on others.

in javascript, easy dynamically assign new fields object. say:

var marker = new google.maps.marker({     position: latlng,     title: datamarkers.title,     date: datamarkers.date,     time: datamarkers.time,     desc: datamarkers.desc,     img: datamarkers.img,     add: datamarkers.address,     cat: datamarkers.cat,     map: map }); marker.category = the_category_it_belongs_to; 

the marker have field called category long exists.


Comments