ArtsWave Maps

by Mark

HTML

<title>Complex styled maps</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        var map;
        var chicago = new google.maps.LatLng(39.10005, -84.51000);

        function initialize() {

            var roadAtlasStyles = [
  {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        { "saturation": 0 },
        { "lightness": 0 },
        { "gamma": 0 },
        { "hue": "#7f00ff" },
        { "weight": 1.2 }
      ]
  }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "gamma": 1 },
        { "lightness": -24 },
        { "hue": "#7f00ff" },
        { "weight": 1.2 }
      ]
  }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "transit",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#7f00ff" }
      ]
  }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [
        { "saturation": 0 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "road",
      "stylers": [
        { "saturation": -52 },
        { "hue": "#7f00ff" }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": 94 },
        { "hue": "#ff0022" }
      ]
  }, {
      "featureType": "landscape",
      "stylers": [
        { "saturation": -100 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "poi",
      "stylers": [
        { "saturation": -100 },
        { "hue": "#005eff" }
      ]
  }, {
      "featureType": "road.highway",
        "elementType": "labels",
      "stylers": [
        { "saturation": 94 },
        { "hue":...

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }