Justin O’Beirne

Justin O'Beirne of San Francisco, California. Essays, projects, and contact information.

STYLED MAPS USING GOOGLE MAPS API 3
How to Use API 3 to Customize, Enhance, and Beautify Google Maps

 

With Google Maps API 3, you can customize Google Maps’s styling in three new ways: 

  1. You can remove most map elements
  2. You can simplify certain map elements
  3. You can modify the color of most map elements

There are many reasons for creating custom map styles, including:

  • Matching the coloring of a website, logo, or brand
  • Matching the coloring of your map’s markers
  • Removing or simplifying map elements so that your data stands out more
  • Removing map elements that are unrelated to your data
  • Making your map more attractive and memorable

This post will show you how to create unique map styles using Google Maps API 3. It’ll detail how you can improve your maps by removing and simplifying select map elements. And it'll also show you how to modify the map's coloring—as well as a couple of things to avoid when creating new styles.

With each topic, I’ll provide examples you can use in making your own maps. And I’ll also provide the .json files so you can easily retrace my steps. 

Let’s begin by looking at how API 3 can be used to remove elements of the map…

 

REMOVING SELECT MAP ELEMENTS

Perhaps the best feature of Google Maps API 3 is that you can now remove select map elements. Why is this API 3’s best feature? Well, because it allows you to remove elements that are not particularly relevant to your map. And in removing these unnecessary elements, you’ll not only simplify your map, but you’ll also reduce the chance of having your map overwhelm its audience.

Let me show you some examples of how you can use API 3 to simplify your maps…

 

Example 1: No Country/Province Labels

One way you can simplify Google Maps using API 3 is by removing state and country labels. This is good for maps involving data that’s limited to single country, state, or province. 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 Road Labels (i.e., No Highway Shields)

If you’re making a map in which road labels aren’t particularly important or relevant, but you’d still like to show roads, consider removing the maps’ road labels. Some suggested uses: marathons, area code boundaries, sales & marketing territories, 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" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 3: No Roads

Perhaps you’d you like to make a map that has nothing to do with roads. In this case, it may be a good idea to remove Google Maps’s road and road labels all together. 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 4: Road Map

Suppose you’d like to make a map that emphasizes roads. In this case, it may be a good idea to remove 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 5: 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 6: No Text Labels

If your data adds a lot of text to the maps, it may be a good idea to remove all of Google Maps’s text labels. This, in turn, will help make your map’s data much more readable. 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 7: Buildings

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 THE APPEARANCE OF CERTAIN MAP ELEMENTS

In addition to selectively removing different map elements, you can also simplify certain map elements. (Note: this option is limited to the maps’ roads and cities.)

 

Example 8: Simplified Roads

If you want to show roads on your map, but you don’t want them to be as prominent, a good option is to simplify them. This makes the maps’ roads much thinner and removes their dark borders, reducing their overall footprint on the maps.

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

As you can see, simplified roads stand out far less 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 9: Simplified City Labels — Just The Point Icons

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

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

JSON code snippet for this style:

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

 

MODIFYING THE COLORING OF DIFFERENT MAP ELEMENTS

In addition to removing and simplifying select map elements, you can also change the coloring of many map elements. This is good for giving your maps an overall theme—perhaps to match the coloring of website or a company’s corporate colors. It’s also good for muting or enhancing certain map elements. Let’s look at some examples…

 

Modifying the Coloring of the Maps’ “Landscape”

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). This delivers some really striking results.

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

Example 10: 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 11: 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 12: 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 13: 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 }
    ]
  }
]

 

Modifying the Coloring of the Maps’ Water

Another way to create distinctive maps is to change the coloring of the water features. Here are two examples showing the maps’ water as green and brown:

Example 14: 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 15: Brown Seas

JSON code snippet for this style:

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

 

Modifying the Coloring of Map Elements

In addition to modifying the coloring of the maps’ landscape and water features, you can also modify the coloring of many individual map elements. Here are three examples:

 

Example 16: Blue Highways

In this example, I’ve changed the coloring of the maps’ 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 17: Urban Areas

In this example, I’ve made the coloring of the maps’ urbanized areas much more prominent. (I changed the coloring from light gray to yellow.) The maps’ 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 18: Brown Parks

In this example, I’ve changed the coloring of the maps’ parks (as well as their 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 19: 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 20: 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 all the maps’ colors, however, 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 21: 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 22: 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 Maps’ Coloring

Example 23: Grayscale Maps

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

Grayscale maps are excellent for maps that use a lot of colored data. 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 24: 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 (i.e., they’re not as bright), and removed all of the maps’ “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 25: Muted Maps (Simplified Highways)

This scheme is the same as the previous one, with one exception: its highways have been simplified (i.e., made thinner). Use this style if you want your maps’ roads to be 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" }
    ]
  }
]

 

DISCOURAGED PRACTICES

Abusing Colors

It’s important to be careful when modifying the maps’ coloring. If your changes are too drastic, you risk creating usability issues. (In extreme cases, 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 radical and inappropriate color choices. Unless you have a very specific purpose in mind, try to refrain from making maps 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 maps’ roads—but not its road labels—might confuse your users.

 

H. Missing Borders

Due to its unique perspective, this borderless map went viral across the web. 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, please see: Google Map Javascript API V3 - Map Types (Google Code)

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


🏠 Home  ·  ✍️ Essays

Copyright © 2010 Justin O’Beirne