JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//maps.googleapis.com/maps/api/js?v=3"></script>
<a href="#" class="hideOtherMarkers">Hide Other Markers</a>
<div id="map-canvas"/>
CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
.hideOtherMarkers{background:#fff;display:inline-block;padding:6px;}
JavaScript
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: { lat: 2, lng: 2},
visibility:new google.maps.MVCObject,
zoom:6
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var locations = [['',1,1,'','','','','','','','','Other'],
['',2,2,'','','','','','','','','foo'],
['',3,3,'','','','','','','','','Other'],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByClassName('hideOtherMarkers')[0])
google.maps.event.addDomListener(document.getElementsByClassName('hideOtherMarkers')[0], 'click', function() {
map.get('visibility').set('Other', !map.get('visibility').get('Other'));
this.textContent=(map.get('visibility').get('Other')?'Hide':'Show')+' Other Markers';
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
animation: google.maps.Animation.DROP,
map: map,
title: locations[i][11]
});
if(typeof map.get('visibility').get(locations[i][11])==='undefined'){
map.get('visibility').set(locations[i][11],true);
}
marker.bindTo('visible',map.get('visibility'),locations[i][11]);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var content = '';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);