Justin O’Beirne

Essays, book, and contact information.

ADDITIONAL EXAMPLES OF STYLED MAPS USING GOOGLE MAPS API 3

I’ve been overwhelmed by the reception to my previous post, “Styled Maps Using Google Maps API Version 3”. For the sake of brevity, I only included 25 examples in that post—but I’ve actually made far more. So I’ve decided to share a few more of them with you, and as before, I’ve also included their .json files. Enjoy!

 

REMOVING SELECT MAP ELEMENTS

Example 26: No States/Provinces

Many world atlases show maps of countries without their states or provinces. If you’d like to make similar maps, consider using this style.

Suggested uses: country comparisons, political maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative.province",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 27: Major Roads Only

If you want to make a map that only shows an area’s most important highways, consider using this style.

Suggest uses: traffic maps, metro area maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative.neighborhood",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.land_parcel",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.local",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 28: Recreation Maps (Natural Features & Parks)

This style removes all the maps’ “manmade” features; it’s perfect for any kind of recreational-themed map.

Suggested uses: hiking maps, fishing maps, camping maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.attraction",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.government",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.medical",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.place_of_worship",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.school",
    elementType: "all",
    stylers: [

    ]
  },{
    featureType: "poi.sports_complex",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

MODIFYING THE COLORING OF DIFFERENT MAP ELEMENTS

Muted Maps

Example 29: Muted Maps II

Of all the map styles I’ve created, this is my favorite. It’s very subdued and, as a result, it’s excellent for a wide variety of uses.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Mimicking the Styles of Other Maps & Mapping Sites

Prefer the styling of another online mapping site? No problem. Now you make Google Maps look like your favorite mapping site.

Example 30: Bing Maps

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { hue: "#5e00ff" },
      { lightness: 40 },
      { saturation: -70 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" },
      { saturation: -30 }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: -50 },
      { lightness: 40 }
    ]
  },{
    featureType: "poi",
    elementType: "geometry",
    stylers: [
      { saturation: -10 },
      { lightness: 40 }
    ]
  }
]

 

Example 31: Yahoo! Maps

JSON code snippet for this style:

[
  {
    featureType: "all",
    elementType: "all",
    stylers: [
      { saturation: 40 }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { hue: "#ff1100" },
      { gamma: 1 },
      { lightness: -30 },
      { saturation: -20 }
    ]
  },{
    featureType: "administrative.locality",
    elementType: "all",
    stylers: [
      { hue: "#fff700" },
      { saturation: 100 },
      { lightness: 0 },
      { visibility: "on" },
      { gamma: 1 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#ff9100" },
      { lightness: -20 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { saturation: -10 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "poi.park",
    elementType: "all",
    stylers: [
      { saturation: -20 }
    ]
  }
]

 

Example 32: MapQuest

JSON code snippet for this style:

[
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { hue: "#0033ff" },
      { lightness: 10 },
      { saturation: -50 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
      { hue: "#ffc300" }
    ]
  },{
    featureType: "road.highway",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" },
      { gamma: 0.6 },
      { lightness: 0 }
    ]
  },{
    featureType: "transit.station",
    elementType: "all",
    stylers: [
      { visibility: "on" },
      { gamma: 0.01 }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { hue: "#88ff00" },
      { lightness: -1 },
      { saturation: -10 }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { saturation: 30 },
      { lightness: 50 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 33: OpenStreetMap

JSON code snippet for this style:

[
  {
    featureType: "administrative.country",
    elementType: "labels",
    stylers: [
      { saturation: 60 },
      { hue: "#ff00bb" },
      { lightness: 0 }
    ]
  },{
    featureType: "administrative.province",
    elementType: "labels",
    stylers: [
      { hue: "#ff00bb" },
      { saturation: 60 },
      { lightness: 0 }
    ]
  },{
    featureType: "administrative.neighborhood",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.land_parcel",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.province",
    elementType: "geometry",
    stylers: [
      { hue: "#ff00b2" },
      { saturation: 50 },
      { lightness: -20 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { gamma: 0.8 },
      { hue: "#0099ff" },
      { saturation: -80 },
      { lightness: 10 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#ffd500" },
      { visibility: "simplified" },
      { saturation: -10 },
      { lightness: -10 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { saturation: -20 },
      { lightness: 40 }
    ]
  }
]

 

Example 34: Rand McNally’s The Road Atlas

JSON code snippet for this style:

[
  {
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
      { lightness: -46 },
      { saturation: 100 },
      { hue: "#ffee00" },
      { gamma: 0.94 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { hue: "#2a00ff" },
      { visibility: "simplified" },
      { lightness: -10 },
      { saturation: -60 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { lightness: 20 },
      { hue: "#ff0066" },
      { saturation: 20 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { lightness: 40 }
    ]
  },{
    featureType: "administrative.locality",
    elementType: "all",
    stylers: [
      { lightness: 20 }
    ]
  }
]


Copyright © 2010
Justin O’Beirne of San Francisco, California · Contact




HOME