mardi 7 juillet 2015

Google Maps Checkbox Filtering

I'm fairly new to working with the google maps API, and am wondering how I would add a checkbox filter to show certain markers on my map. Here is what I have so far:

 var icons = ['green-dot.png','red-dot.png','blue-dot.png','orange- dot.png','yellow-dot.png'];

  var map = new google.maps.Map(document.getElementById('map'),{
            zoom: 2,
            center: new google.maps.LatLng(47.025210,2.573184),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            streetViewControl: false,
            panControl: false,
            zoomControlOptions:{position:google.maps.ControlPosition.LEFT_BOTTOM}});

  var infowindow = new google.maps.InfoWindow({maxWidth: 160});

  var markers = new Array();
  for (var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker({
                 position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                 map: map,
                 title: locations[i][0],
                 icon: 'http://ift.tt/1hdJp7W' + icons[locations[i][4]]});

    markers.push(marker);

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i){
      var contentString = locations[i][1];  
      return function(){    
        infowindow.setContent(contentString);    
        infowindow.open(map, marker);    
        google.maps.event.addListener(marker, 'click', function(){      
          window.location.href= locations[i][5];
        });
      }
    })(marker, i));
  }

Not sure how I proceed with a checkbox filter.




Aucun commentaire:

Enregistrer un commentaire