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/
On Sunday, June 25, 2017 at 4:34:20 PM UTC-7, Jeroen wrote:
>
> 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>
>
>
>
Here's a live demo of the site, I hope this helps,
https://jonlee836.github.io/City-of-Volgagrad/
--
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.
