Last week we launched “Styled Maps in the Maps API for Flash.” This week, Justin O’Beirne of, brings you some excellent design tips on how to make the most out of Styled Maps. Justin’s site examines the current and future state of online maps.

Inspired in part by Five Great Styled Maps Examples, I decided to write up an article, Styled Maps Using Google Maps API Version 3. In my article, I explore some of the power of Styled Maps, and some things to avoid in order to make your maps beautiful and powerful. I also link to the code for each style I used. From an example in the article, you can make a map that looks like this:

And this...

And even this...

It may not look it, but, trust me, these are all Google Maps. And now you make maps like these, too!

So check out my latest post “Styled Maps Using Google Maps API V3”. Your mashups will never be the same.


One of the first questions we were asked following the Google I/O session at which we launched Styled Maps in the JavaScript Maps API earlier this year was whether the feature would also be offered in the Maps API for Flash.

Since then we have seen particular interest from the creative arts community, and from news organizations who use Flash because it enables rapid development in response to unfolding events, and who would value a simplified base map to quickly focus the reader's attention on the relevant facts of the story.

It therefore became quickly apparent that we should bring Styled Maps to the Maps API for Flash, and I'm happy to announce that today we are doing just that. To use Styled Maps, download the Maps API for Flash SDK 1.20 or later, and refer to the Styled Maps section of the Maps API for Flash documentation.

If you would like to experiment with Styled Maps in a Flash application take a look at ScribbleMaps, which allows you to draw on top of a map generated using the Maps API for Flash, and now offers the full set of map styling options. Just click Menu to access the Style Map option.

We have already seen many innovative uses of Styled Maps in the JavaScript Maps API, and look forward to seeing many more using the Maps API for Flash.


63% of people like Polls

According to Wikipedia, the first known example of an opinion poll was a local straw poll conducted by The Harrisburg Pennsylvanian in 1824, showing Andrew Jackson leading John Quincy Adams by 335 votes to 169 in the contest for the United States Presidency.

Polling has become a lot more popular since then, and these days any major election will have many polls covering it. Most of the time, a news article will mention just one or two, and it can be hard to see the differences between one poll and another. So we’re happy to be providing a comprehensive Election Ratings Tracker for the 2010 U.S. Senate, Congressional, and Governor races.

This interactive map visualizes the latest data from a variety of the major national polling institutions, color-coding the polygons by projected winner, and letting you quickly see details for any jurisdiction.

We used the App Engine Cron Service to parse the data feeds into thirty separate Fusion Tables, styled the data with Fusion Tables' new styling options, and then built the interactive app you see in App Engine to call them all using the FusionTablesLayer class in the Maps V3 API. For the gory details on how to do this yourself, see our article on Election Ratings and Spatial Data with Fusion Tables.

Last May at Google I/O, we introduced Styled Maps which offers control over map features and color schemes. Stylishly ending the “one-size-fits-all” approach to base maps.

This new cartographic concept was met with a lot of excitement for where developers would take it and since launch we’ve seen some very innovative work. Listed below are five great examples of Styled Maps.

London at Night

Mapnificent’s “London at Night” dynamically displays bus travel time. The base map is styled to create a nighttime feel and to emphasize major roads. Additionally, the darker base layer creates a better contrast for the isochrone visualization.

Athens Taxi Cost Calculator

This taxi calculator differentiates itself (and adds some Greek flare) by turning the base map black and the roads blue. Queried taxi routes are displayed in a highly contrasted red.

Google 2010 Election Ratings Map

Josh Livni and the Elections Team here at Google did a great job styling this election rating map. Features that are less relevant to the overlaid data (such as roads, landscape features, and bodies of water) have been lightened and no longer visually compete for attention. Whereas state and city labels, which are of high relevance, remain easy to read. The mash-up is powered by Fusion Tables, which integrates easily into Google Maps API v3.

Ubilabs’ Tour de France live tracker

In order to focus attention on the Tour de France route, Ubilabs grayed out the entire base map. With the rest of the map a much less interesting black and white, a red curving line emerges as the dramatic centerpiece of this mash-up.

Aquila Shoes Store Locator

Australian retailer Aquila Shoes used Styled Maps to match their branding and website color schemes.

Honorable Mention
Maps Without Maps

Maps without Maps challenges us to rethink how we interact with maps. Using Styled Maps to show only labels, finding a location on the map suddenly feels like a foreign task. It’s a wonderful thought-provoking experience.

Update 10/7/10:

Team Coco Blimp Tracker

On Wednesday, October 6, 2010, Conan O'Brien launched a giant orange blimp to publicize his new show on TBS. As Conan joyrides across the US east coast, fans all over the world can track the blimp in real time using Google Maps. Styled Maps was used to turn the roads orange: a nod to the blimp and Conan's famous hair.