Google Maps custom Dropdown filter (select)

2,766 views
Skip to first unread message

Jeroen

unread,
Jun 25, 2017, 7:34:20 PM6/25/17
to Google Maps JavaScript API v3
I am new to Google Maps Api. I have done a lot so far and really like working with this. But there is one issue I would like your help with since I can't figure it out and it would save me a lot of time. How can I add a simple filter in my legend? Just a simple dropdown box that hides/shows markers. Would really appreciate any help I can get with this! This is my map now (with a lot more markers normally):

<head>
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>
<div id="map" style="width: 100%; height: 420px;margin:10px 0px 30px;">
  <div class="container">
<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng(36.524500, -4.882175),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker1 = new google.maps.LatLng(36.521604, -5.046373);
    var marker2 = new google.maps.LatLng(36.558387, -4.929676);
    var marker3 = new google.maps.LatLng(36.503746, -4.843931);


    var marker = new google.maps.Marker({
        position: marker1,
        url: 'marker1.html',
        title: 'marker1',
        icon: 'marker1.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });

    var marker = new google.maps.Marker({
        position: marker2,
        url: 'marker2.html',
        title: 'marker2',
        icon: 'images/markers/marker2.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });

    var marker = new google.maps.Marker({
        position: marker3,
        url: 'marker3',
        title: 'marker3',
        icon: 'images/markers/marker3.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });


  </script>

</div>


</div>


Jon Lee

unread,
Sep 18, 2017, 12:25:09 AM9/18/17
to Google Maps JavaScript API v3
Something like this?



function toggleGroup(type, data, mapWindows, mapMarkers) {
 
 if (type != 'toggle' && type != 'about'){
 
 // if (data.active() == 1) turn on all markers that are off
 if (data.active() == 1){
 for (var i = 0; i < mapMarkers[type].length; i++) {
 var marker = mapMarkers[type][i];
 if (!marker.getVisible()){
 marker.setVisible(true);
 marker.setAnimation(google.maps.Animation.DROP);
 }
 }
 }
 // if (data.active() == 0) turn off all markers and corresponding infowindows
 else{
 for (var i = 0; i < mapMarkers[type].length; i++) {
 mapMarkers[type][i].setVisible(false);
 mapWindows[type][i].close();
 }
 }
 }
 }


https://github.com/jonlee836/City-of-Volgagrad/blob/master/js/overlays.js

https://jonlee836.github.io/City-of-Volgagrad/
Here's a live demo of the site, I hope this helps,

Reply all
Reply to author
Forward
0 new messages