Google Maps JavaScript API v3

Complex styled maps

View this example full screen.

JavaScript
var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);

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: chicago,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };

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

  var styledMapOptions = {
    name: 'US Road Atlas'
  };

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

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

google.maps.event.addDomListener(window, 'load', initialize);
JavaScript + HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Complex styled maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);

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: chicago,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };

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

  var styledMapOptions = {
    name: 'US Road Atlas'
  };

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

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

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

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

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.