Live Code Editor Version 2.0

Demo google map complex styled map RUN

<!DOCTYPE html>
<html>
    <head>
        <title>Complex styled maps</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>

var map;
            var hochiminh = new google.maps.LatLng(10.771971, 106.697845);

function initialize() {

var roadAtlasStyles = [
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry',
                        stylers: [
                            {hue: '#ff0022'},
                            {saturation: 60},
                            {lightness: -20}
                        ]
                    }, {
                        featureType: 'road.arterial',
                        elementType: 'all',
                        stylers: [
                            {hue: '#2200ff'},
                            {lightness: -40},
                            {visibility: 'simplified'},
                            {saturation: 30}
                        ]
                    }, {
                        featureType: 'road.local',
                        elementType: 'all',
                        stylers: [
                            {hue: '#f6ff00'},
                            {saturation: 50},
                            {gamma: 0.7},
                            {visibility: 'simplified'}
                        ]
                    }, {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [
                            {saturation: 40},
                            {lightness: 40}
                        ]
                    }, {
                        featureType: 'road.highway',
                        elementType: 'labels',
                        stylers: [
                            {visibility: 'on'},
                            {saturation: 98}
                        ]
                    }, {
                        featureType: 'administrative.locality',
                        elementType: 'labels',
                        stylers: [
                            {hue: '#0022ff'},
                            {saturation: 50},
                            {lightness: -10},
                            {gamma: 0.90}
                        ]
                    }, {
                        featureType: 'transit.line',
                        elementType: 'geometry',
                        stylers: [
                            {hue: '#ff0000'},
                            {visibility: 'on'},
                            {lightness: -70}
                        ]
                    }
                ];

var mapOptions = {
                    zoom: 12,
                    center: hochiminh,
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'hochiminh_road']
                    }
                };

map = new google.maps.Map(document.getElementById('map-canvas'),
                        mapOptions);

var styledMapOptions = {
                    name: 'Hồ Chí Minh Road'
                };

var usRoadMapType = new google.maps.StyledMapType(
                        roadAtlasStyles, styledMapOptions);

map.mapTypes.set('hochiminh_road', usRoadMapType);
                map.setMapTypeId('hochiminh_road');
            }

google.maps.event.addDomListener(window, 'load', initialize);

</script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>