[Google Maps API v3] Google Maps custom Dropdown filter (select)

Sun, 25 Jun 2017 16:34:24 -0700 

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>



-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.

Reply via email to