Styled Maps with Google Maps API 3
How to change Google Maps’s look & feel
2010

Have you ever wanted to change Google Maps’s appearance?

With Google Maps’s new API, you can now:

  1. Remove parts of the map

  2. Simplify parts of the map

  3. Change the color of almost anything on the map

REMOVING PARTS OF THE MAP

If you’re overlaying data onto Google Maps, you can now remove parts of the map unrelated to your dataset. Here’s a few examples...

 

Example 1: Removing Country & State/Province Labels

Suggested uses: flight planning, weather radar, election maps, etc.

Examples:

JSON code snippet for this style:

[
  {
    featureType: "administrative.country",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.province",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

And here’s a very basic example of how to use this snippet:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps, No Country or Province Labels Example Style</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 500px;"></div> 

   <script type="text/javascript"> 
     var myStyle = [
        {
          featureType: "administrative.country",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.province",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "water",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        }
      ];

     var map = new google.maps.Map(document.getElementById('map'), {
       mapTypeControlOptions: {
         mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
       },
       center: new google.maps.LatLng(41, 0),
       zoom: 3,
       mapTypeId: 'mystyle'
     });

     map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
   </script> 
</body> 
</html>

Example 2: No States/Provinces

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 3: Removing Road Labels & Icons

If you’re making a map in which roads aren’t particularly relevant (but you’d still like them in the background), consider removing Google Maps’s road labels. Some suggested uses: marathons, area code boundaries, sales & marketing territories, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 4: Removing All Roads & Road Labels

If the map you’re making has nothing to do with roads, consider removing them altogether. Some suggested uses include: election maps, animal migrations, flu patterns, hurricane tracking, unemployment maps, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

Example 5: 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 6: Road Map

Suppose you’d like to make a map that emphasizes roads. In this case, consider removing other map elements, such as state and city labels. Suggested uses: accident statistics, scenic routes, roadside picnic or rest areas, pothole reporting, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 7: Plain Map

If you're working with data that shades different states or countries, consider using this style. Suggested uses: economic data, political data, election data by state, country statistics, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "administrative.locality",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.neighborhood",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.land_parcel",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 8: Removing All Text

If your data will add a lot of text to the map, consider removing all of Google Maps’s text labels. This’ll help you avoid cluttering the map, while increasing the readability of your own data. Suggested uses: text-heavy mashups, country statistics & comparisons, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 9: Recreation Map (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" }
    ]
  }
]

 

Example 10: Building Footprints

Perhaps you’d like to make a map involving a specific city’s buildings. If so, then consider using this style, which showcases cities as if they’re architectural models. Suggested uses: real estate mashups, architecture maps, land use maps, etc.

Some examples:

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape.natural",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

SIMPLIFYING PARTS OF THE MAP

In addition to selectively removing different map elements, you can also use Google Maps API3 to simplify certain map elements. (Note: this option is currently limited to roads and cities.)

 

Example 11: Simplified Roads

If you want to show roads on your map, but you don’t want them to look as prominent, consider simplifying them. This makes the map’s roads thinner and removes their dark borders, reducing their overall footprint.

Here are a few animated images illustrating the differences between regular and simplified roads:

As you can see, simplified roads are far less prominent than regular roads. Here’s how they look on a few more map samples:

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 12: Simplified City Labels—Just The Point Icons

Similar to roads, city labels can also be simplified. Doing so removes their text—but leaves their icons.

Suggested uses: air temperature maps, aviation maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "simplified" }
    ]
  }
]

 

CHANGING THE MAP’S COLOR

In addition to removing and simplifying parts of the map, you can also change the coloring of most of the map. This is good for giving your map an overall theme—perhaps to match the colors of a website or brand. This is also a great option for muting or enhancing certain parts of the map...

Changing Google Maps’s Land Color

One way to make your maps really stand out is to change the color of Google Maps’s “landscape” (i.e., Google Maps’s land areas).

Here are four examples, showing black, green, brown, and tan “landscapes”:

Example 13: Simplified Dark Maps

JSON code snippet for this style:

[
  {
    featureType: "all",
    elementType: "all",
    stylers: [
      { invert_lightness: true }
    ]
  },{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { lightness: 50 }
    ]
  }
]

 

Example 14: Green Maps

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { saturation: 100 },
      { lightness: -50 },
      { hue: "#1aff00" },
      { gamma: 0.5 }
    ]
  }
]

 

Example 15: Brown Maps

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { saturation: 100 },
      { lightness: -50 },
      { hue: "#ffd500" },
      { gamma: 0.5 }
    ]
  }
]

 

Example 16: Tan Maps

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { saturation: 100 },
      { hue: "#ffd500" },
      { gamma: 0.5 },
      { lightness: 10 }
    ]
  }
]

 

Changing Google Maps’s Water Color

Another way to create a distinctive map is by changing the color of Google Maps’s water features. Here are two examples showing the map’s water as green and brown:

Example 17: Green Seas

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "all",
    elementType: "all",
    stylers: [
      { hue: "#11ff00" }
    ]
  }
]

 

Example 18: Brown Seas

JSON code snippet for this style:

[
  {
    featureType: "water",
    elementType: "all",
    stylers: [
      { hue: "#ffb300" }
    ]
  }
]

 

Modifying the Coloring of Map Elements

In addition to changing the color of Google Maps’s land and water features, you can also change the coloring of many other parts of the map. Here are a few examples:

 

Example 19: Blue Highways

In this example, I’ve changed the map’s highways from yellow to blue. The highways now look similar to those appearing in paper road atlases.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: -50 },
      { hue: "#0099ff" }
    ]
  }
]

 

Example 20: Urban Areas

Below, I’ve changed the color of Google Maps’s urban area shapes to be much more prominent. (I changed the coloring from light gray to yellow.) The map’s urban areas now resemble the ones that appear in paper road atlases.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
      { hue: "#ffe500" },
      { gamma: 0.4 },
      { lightness: -40 },
      { saturation: 100 }
    ]
  }
]

 

Example 21: Brown Parks

In this example, I’ve changed the coloring of the map’s park shapes and labels from green to brown.

JSON code snippet for this style:

[
  {
    featureType: "poi.park",
    elementType: "all",
    stylers: [
      { hue: "#ffaa00" }
    ]
  }
]

 

Modifying Both the Maps’ Background Coloring & the Coloring of Map Elements

Example 22: Inverted Coloring (aka Dark Maps)

This is a very easy style to make: you simply invert the “lightness” of each map element.

Suggested uses: night-themed mashups, aviation-related mashups, military-themed mashups, mashups that display cloud data, etc.

JSON code snippet for this style:

[
  {
    featureType: "all",
    elementType: "all",
    stylers: [
      { invert_lightness: true }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 23: Midnight Maps (Dark Background, with Blue Roads & Features)

Here’s a scheme that’s very similar to the “Inverted Coloring” example above. Instead of inverting the map’s colors, this scheme makes heavy use of blacks and blues—yielding an equally attractive result.

Suggested uses: maps involving nighttime data sets, taxi locators, lunar eclipse paths, meteor shower viewing areas, weather radar, night club locations, jazz venues, etc.

JSON code snippet for this style:

[
  {
    featureType: "all",
    elementType: "all",
    stylers: [
      { invert_lightness: true }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { hue: "#0800ff" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { hue: "#1900ff" }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { hue: "#0008ff" }
    ]
  }
]

 

Example 24: Sepia Maps

A historical-looking color scheme.

Suggested uses: historical maps, nature maps, or maps involving tea, explorers, pirates or the East India Company.

JSON code snippet for this style:

[
  {
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { hue: "#ffa200" },
      { lightness: -20 }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { hue: "#ff9100" },
      { lightness: 52 }
    ]
  },{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { hue: "#1100ff" },
      { saturation: -100 },
      { lightness: -18 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { lightness: -18 },
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { lightness: -18 },
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
      { lightness: -27 }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 25: Pink (Or Any Other Color) Maps — Good for Matching Maps with Websites

You can also create maps that fit a certain color theme (i.e., everything green, everything blue, etc.). In this case, I’ve shaded all of the map elements pink—but you can, of course, choose any color.

This style is good for matching maps with map markers, the coloring of a specific website, or a company’s corporate colors.

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { saturation: -20 },
      { hue: "#ff00dd" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { hue: "#ff00dd" },
      { saturation: -20 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { hue: "#ff00dd" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { hue: "#ff00dd" },
      { saturation: -20 }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { hue: "#ff00dd" },
      { saturation: -20 }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { hue: "#ff00dd" },
      { saturation: -20 }
    ]
  }
]

 

Muting the Map’s Coloring

Example 26: Grayscale Maps

One easy way to modify Google Maps’s color scheme is to mute all the colors, creating a grayscale map.

Grayscale maps are excellent for overlaying especially colorful datasets. Suggested uses: grayscale websites, newspaper sites, academic/scholarly uses, historical mashups, transit maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { saturation: -100 }
    ]
  }
]

 

Example 27: Muted Maps

Inspired in part by Google’s “Terrain” maps, I created a scheme that mutes certain map elements: I made all of the roads gray, removed all of the road labels, darkened the text labels, and removed all of the map’s “transit” information. The result: a very toned-down, subdued basemap.

With its muted coloring, this is an excellent style for a wide variety of data overlays. Suggested uses: pretty much everything.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 40 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 70 },
      { gamma: 0.4 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 20 },
      { gamma: 0.8 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 28: Muted Maps (Simplified Highways)

This scheme is similar to the previous one, with one exception: its highways have been simplified (i.e., made thinner). Use this style if you want your map’s roads to look even less prominent.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 40 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 70 },
      { gamma: 0.4 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road.local",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 20 },
      { gamma: 0.8 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { lightness: -2 }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

Example 29: Muted Maps (Simplified Highways) 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 }
    ]
  }
]

 

DISCOURAGED PRACTICES

Abusing Colors

Take care when modifying the maps’ coloring. If your changes are too drastic, you risk creating usability issues. (In extreme cases, your users may not even realize that they’re using a modified version of Google Maps.) Avoid making changes that might confuse or overwhelm your users.

Here are some examples of maps that are difficult to read due to inappropriate color choices. Unless you have a very specific purpose in mind, try to avoid styles like these:

A. Bright Red Maps

 

B. Bright Blue Maps

 

C. Magenta Maps

 

D. Red Seas (Inappropriate Coloring)

 

E. Neon Roads

 

F. Inaccurately-Colored Highway Labels

 

Removing Too Much Map Information

Don’t remove data to the point that users would be disorientated or confused when using your map.

G. Road Labels—But No Roads

Removing your map’s roads—but not its road labels—might confuse your users.

 

H. Missing Borders

Due to its unique perspective, this borderless map was widely shared online. But unless you have a very specific purpose in mind, you should avoid stripping your maps of this much detail.

 

ADDITIONAL INFORMATION

For more information on making styled maps, see: Google Map Javascript API V3 - Map Types (Google Code)

Google has also created a tool that you can use to experiment with different map styles: “Google Maps API Styled Map Wizard


© 2010  Justin O’Beirne  contact

All rights reserved. Up to 250 words and/or 3 images may be republished without permission, provided that full and clear credit is given with specific direction to the original content.

Copyrighted materials are reproduced either with permission or under fair use.




HOME