Saturday, March 12, 2011

HTML5 Styling of Google Maps

Sparkgeo - Where Are You DemoSparkgeo has created a nice demo of an animated HTML5 radial gradient placed on top of a Google Map. The HTML5 canvas radial gradient adds a nice effect to the map and helps to focus the eye of the user on a particular location. However this won't work unless the user has a modern web browser (Internet Explorer users are likely to be disappointed).

Sparkgeo has even been kind enough to provide a tutorial on how the effect is created. Sparkgeo has also produced a tutorial on how to add labels to your map using the makerWithLabel.js extension, created by Gary Little, which can be found in the Google Maps Utility Library

To provide another demonstration of the gradient effect I've added it to this map of the London Blitz.