Question

I have a custom styled Google map.

I would like to hide, or style, all buildings shown.
Seen here (with buildings)

Looking through the documentation, there does not seem to be a way to hide buildings, in fact, there doesn’t seem to be any reference to buildings (other than government buildings) at all.

Is it possible to hide these – & if so, how?

Here’s the map 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 set "visibility": "simplified" globally before adding any specific styles.

You can then go back and set the visibility to “on” and add additional styles back in for each element.

Seems like the API should have a method for controlling buildings, but it appears they currently do not. This will have to work until then.

For example:

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 }
        ]
      }
    ]