Styling 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:
Remove parts of the map
Simplify parts of the map
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”