Maps API v3 Styled Map Types

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}

JavaScript

function initialize() {

    // Create an array of styles.
    var styles = [{
        "stylers": [{
            "saturation": -100
        }]
    }, {
        "featureType": "transit.line",
            "stylers": [{
            "saturation": 100
        }, {
            "color": "#ff3183"
        }]
    }];

    // Create a new StyledMapType object, passing it the array of styles, as well as the name to be displayed on the map type control.
    var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
    });

    // Create a map object, and include the MapTypeId to add to the map type control.
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(40.7288, -74.1509),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
        }
    };

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

    // Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
}

initialize();