Activation / désactivation des marqueurs de carte Google par catégorie

Question

Je le ci-dessous et à trier les marqueurs par les différents types de catégorie étant happée par cat: dataMarkers.cat. Im un peu perdu quant à la façon de faire réellement ce la meilleure façon. Je pense markerManager pour chaque catégorie? Aurais-je besoin de chaque catégorie d'être dans son propre tableau de markerManager? Comment ce facteur avec 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 = [];
                    for (var i = 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
                });

}

Answer 1

Je vous recommande de stocker tous les marqueurs dans un tableau. Créer un champ appelé category sur chaque marqueur et lui donner la valeur correcte.

Chaque fois que la catégorie change, vous courez dans votre tableau de marqueurs et ensemble marker.visible = true sur ceux de la bonne catégorie, et marker.visible = false sur tous les autres.

En JavaScript, il est facile d'attribuer dynamiquement de nouveaux champs à un objet. Vous simplement dire:

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;

Le marqueur aura alors un champ appelé category aussi longtemps qu'il existe.