CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user3415749
user3415749

Reputation: 95

Only show city district names in Google Maps Api

I only want to show city district names in my google maps api. I now have the visibility off of all the label names in the map, but I want to show city district names, which usually show up at a higher zoom level in the normal Google Maps.

Maybe you can put the visibility off of label names to a certain zoom level and put them on after zoom level 11 for instance? Is something like this possible?

Thanks in advance! 

var mapProp = {
    center: new google.maps.LatLng(52.368465, 4.903921),
    zoom: 11,
    styles: [{
        'featureType': 'all',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'transit',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'poi',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'water',
        'elementType': 'labels',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'featureType': 'road',
        'elementType': 'labels.icon',
        'stylers': [{
            'visibility': 'off'
        }]
    }, {
        'stylers': [{
            'hue': '#00aaff'
        }, {
            'saturation': -50
        }, {
            'gamma': 1.15
        }, {
            'lightness': 12
        }]
    }, {
        'featureType': 'road',
        'elementType': 'labels.text.fill',
        'stylers': [{
            'visibility': 'on'
        }, {
            'lightness': 24
        }]
    }, {
        'featureType': 'road',
        'elementType': 'geometry',
        'stylers': [{
            'lightness': 85
        }]
    }],
    streetViewControl: false,
    panControl: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROAD
};

Upvotes: 2

Views: 3189

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22486

I created 2 variables lowLevelStyles and highLevelStyles containing the different styles that you want to apply depending on the zoom level. Then create a listener on zoom_changed as suggested in my above comment. Then you can apply these styles depending on your zoom level:

google.maps.event.addListener(map, 'zoom_changed', function () {

    var zoomLevel = map.getZoom();
    document.getElementById('zoomLevel').innerHTML = 'Zoom Level: ' + zoomLevel;

    if (zoomLevel > 10) {
        map.setOptions(highLevelStyles);
    } else {
        map.setOptions(lowLevelStyles);
    }
});

JSFiddle

Check the above link for a working demo.

Upvotes: 2

Related Questions