Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to hide certain feature types in Google Maps

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!

enter image description here

    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);
like image 647
tvgemert Avatar asked Sep 29 '14 15:09

tvgemert


1 Answers

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.

like image 130
MrUpsidown Avatar answered Sep 30 '22 04:09

MrUpsidown