Hide all buildings in the Google Maps API v3

Question

I have a regular Google map.

I would like to hide or style all the buildings shown. Visible here (with buildings)

Looking through the documentation, there seems to be no way to hide the buildings; in fact, it seems there are no references to buildings (other than government buildings) at all.

Is it possible to hide them, and if so, how?

Here is the card code:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <div id="map"></div> <script type="text/javascript"> var address = 'Bowie, MD'; var styles = [ { featureType: 'landscape', elementType: 'all', stylers: [ { hue: '#33548f' }, { saturation: 28 }, { lightness: -57 }, { visibility: 'simplified' } ] },{ featureType: 'road.local', elementType: 'all', stylers: [ { "visibility": "simplified" }, { "color": "#366b97" } ] },{ featureType: 'poi', elementType: 'all', stylers: [ { hue: '#33548f' }, { saturation: 8 }, { lightness: -51 }, { visibility: 'off' } ] },{ featureType: 'road.highway', elementType: 'all', stylers: [ { hue: '#233961' }, { saturation: -53 }, { lightness: -60 }, { visibility: 'on' } ] },{ featureType: 'water', elementType: 'all', stylers: [ { hue: '#2a4576' }, { saturation: 5 }, { lightness: -59 }, { visibility: 'simplified' } ] },{ featureType: 'administrative', elementType: 'all', stylers: [ { hue: '#333333' }, { saturation: 0 }, { lightness: -61 }, { visibility: 'off' } ] },{ featureType: 'administrative', elementType: 'all', stylers: [ { hue: '#333333' }, { saturation: 0 }, { lightness: -61 }, { visibility: 'off' } ] },{ featureType: 'road.arterial', elementType: 'all', stylers: [ { hue: '#2c487b' }, { saturation: -53 }, { lightness: -57 }, { visibility: 'on' } ] } ]; var options = { mapTypeControlOptions: { mapTypeIds: [ 'Styled'] }, center: new google.maps.LatLng(38.956318403646755, -76.72218313217161), zoom: 16, mapTypeId: 'Styled', panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.RIGHT_TOP }, mapTypeControl: false, scaleControl: false, }; var div = document.getElementById('map'); var map = new google.maps.Map(div, options); var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); map.mapTypes.set('Styled', styledMapType); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { new google.maps.Marker({ position: results[0].geometry.location, map: map }); map.setCenter(results[0].geometry.location); } else { // Google couldn't geocode this request. Handle appropriately. } }); </script> 

Answer 1

To hide buildings, you need to set "visibility": "simplified" globally before adding any specific styles.

Then you can go back and set the visibility to "on" and add additional styles for each element.

It seems that the API should have a building management method, but it seems not at the moment. This should work until then.

For instance:

 var styles = [ { "stylers": [ { "visibility": "simplified" }, { "saturation": -100 } ] },{ "featureType": "road.local", "elementType": "labels.text", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.highway", "elementType": "labels.text", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.arterial", "stylers": [ { "visibility": "on" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "on" }, { "lightness": 25 } ] },{ "featureType": "poi", "stylers": [ { "lightness": 1 } ] } ]