Make Your Google Map Stand Out With Styles

Adam DuVander, May 20th, 2010

Google MapsLook out, CloudMade. Google has just announced a new feature in its Maps API that lets developers control the underlying map imagery. Map Styling gives you control of colors and whether types of features are included in the map. Previously this level of map styling was only available by paying for underlying map data, or using the Open Street Map project that CloudMade is based upon.

Since Google put Maps V3 into production, this new feature is not available in the earlier maps version. The map embedded above makes the map a saturated blue color and removes point of interest labels and smaller roads. Click between the “Map” and “Edited” types to see the differences in lower Manhattan. Google has an example page with eight other styles, including one somewhat reminiscent of CloudMade’s Midnight Commander.

One distinction between Google’s new service and CloudMade’s is that Google’s lets you change your map with JavaScript code at the time the map is added to a page. CloudMade requires that you save a style and reference the ID from your code. On the other hand, the CloudMade style editor provides a point-and-click interface to all map features, with different styles for particular zoom levels. Google is not quite as customizable, but does have an auto-updating style wizard.

CloudMade has been popular with developers who don’t want maps that look like all the others. Now we’ll see whether being able to style the leading mapping API will bring them to Google Maps that don’t look like Google Maps. Although, users probably won’t be fooled. Even though your maps don’t have to look like Google Maps any more, they still carry the Google logo.

Both comments and pings are currently closed.

8 Responses to “Make Your Google Map Stand Out With Styles”

May 21st, 2010
at 4:48 pm
Comment by: Thoughts about Google’s Styled Maps announcement « Spatiality

[...] to use OpenStreetMap, but perhaps the openness of OSM is more to your liking than Google Maps.  This post at Programmable Web highlights some of the differences between GMaps map styles and [...]

June 29th, 2010
at 3:12 am
Comment by: Happy 5th Birthday, Google Maps API - Map Scripting

[...] your actual map imagery: Open Street Map beget CloudMade, which had to have inspired Google’s map styling. Now anyone can have a truly custom [...]

September 3rd, 2010
at 3:01 pm
Comment by: Maps Without Maps Shows Off Google’s Styles

[...] site achieves the effect thanks to a new and mostly unused feature of Google Maps. The map styles feature uses CSS-like syntax within the map’s JavaScript, so that you can change colors of the map. [...]

May 13th, 2011
at 12:07 pm
Comment by: Vaishakh Ravi

Google is adding more and more killer features in Google Maps .
I have included a small tutorial on Google Maps which tells you
how to style your Google Maps to blend into your Websites design.
I hope it will be useful to some

January 17th, 2012
at 10:16 am
Comment by: Styled Bing Maps Hit the Facebook Timeline

[...] alterations are easy via Google’s styled maps, but Microsoft has no documented feature to change its map tiles. It’s likely we’re [...]

January 26th, 2012
at 12:02 pm
Comment by: Today in APIs: Facebook Subscribers, Google SOAP and 6 New APIs

[...] Street Journal Metro Card Usage Map uses the Google Maps API. Specifically, it uses styled Google Maps. Via Court [...]

June 25th, 2012
at 12:42 pm
Comment by: 3 Ways to Style Maps

[...] Google styled maps launched, we said “look out Cloudmade.” The company based on OpenStreetMap data was by far the [...]

July 2nd, 2012
at 11:58 am
Comment by: Google API Announcements from Google I/O 2012

[...] styling is a popular feature. Google Maps styling was first announced in May 2010. At I/O it got its first major change, with even more options to [...]

Follow the PW team on Twitter

APIs, mashups and code. Because the world's your programmable oyster.

John Musser
Founder, ProgrammableWeb

Adam DuVander
Executive Editor, ProgrammableWeb. Author, Map Scripting 101. Lover, APIs.