Maps API v3 Styled Map Types

by upsidown

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<!-- Credits for this code example: @MrUpsidown https://stackoverflow.com/users/1238965/mrupsidown -->
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}

JavaScript

function initialize() {

    // Create an array of styles.
    var styles = [{
        stylers: [{
            hue: "#4679BD"
        }, {
            saturation: 100
        }]
    }, {
        featureType: "poi",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "administrative",
        elementType: "labels",
        stylers: [{
            color: "#"
        }]
    }, {
        featureType: "road.local",
        elementType: "geometry",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "road",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "land",
        elementType: "geometry",
        stylers: [{
            hue: "#e4cc55",
            saturation: 100
        }]
    }, {
        featureType: "water",
        elementType: "geometry",
        stylers: [{
            color: "#C5E7FF"
        }]
    }, {
        featureType: "transit.station.airport",
        elementType: "geometry",
        stylers: [{
            hue: "#FF00CA"
        }]
    }];

    // 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: 6,
        center: new google.maps.LatLng(46.13, 6.14),
        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();