I'm using the Google Maps API Styled Map Wizard (http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html?utm_medium=twitter) to customize the look of a map I want to use which is zoomed in up to street level (zoom: 16). I basically want to get rid of all labels, text or icons. I'm getting there around 95% but still certain labels, namely: names of squares, remain.
Until now I haven't found a way to also hide these labels. Although I suspect a bug in the customization features of Google Maps (or this tool) I'd like to ask if anyone experienced the same issue? Does someone have any tips on how to approach or maybe even solve this?
Below a screenshot that illustrates the issue. Any tips are welcome. Thanks!
function initialize() {
var mapStyles = [
{
"featureType": "administrative",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "road",
"elementType": "labels",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "transit",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.attraction",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.business",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.government",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.medical",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.place_of_worship",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.school",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "poi.sports_complex",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "on" },
{ "color": "#fce8f0" }
]
},{
"featureType": "landscape.natural",
"elementType": "labels",
"stylers": [ { "visibility": "off" } ]
},{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{ "color": "#fce8f0" },
{ "visibility": "on" }
]
},{
"featureType": "water",
"elementType": "labels",
"stylers": [ { "visibility": "off" } ] },
{ }
];
var mapOptions = {
center: { lat: 52.519772, lng: 13.399022},
zoom: 16,
scrollwheel: false,
mapTypeControl: false,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
styles: mapStyles
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
If you want to get rid of all text labels, turn them off alltogether:
var mapStyles = [{
featureType: "all",
elementType: "labels.text",
stylers: [{
visibility: "off"
}]
}];
If you want to get rid of all labels, elementType: "labels"
will do for both labels.text
and labels.icon
, etc. The same applies for feature types.
var mapStyles = [{
featureType: "all",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
JSFiddle demo
From the documentation: Note however that parent features may include some additional features that are not included in one of their child feature types.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With