Saturday, June 30, 2012

New Google Maps Symbols in Action

Darren Wiens has created a quick demo of the new Symbols feature in the Google Maps API.

Hinton Nordic Centre Ski Trails uses an arrow symbol and animates the arrows along a polyline. The polyline is shown on top of a custom overlay map of the Hinton Nordic Centre. The animated arrows are used to show the direction of the actual ski trail.

Symbols can be one of 5 predefined shapes or you can use SVG path notation to create your own symbols. Here's an example I made of symbols made with SVG path notation. This map includes symbols in the shape of the six states and territories that make up Australia.

You can add event listeners to symbols. In this example I included a tooltip to name each state (mouse-over a state to reveal its name). I could also have added a listener to open an information window when each state symbol was clicked.

If you zoom the map the state symbols will stay the same size - so the symbol will become relatively bigger or smaller than Australia on the map. I could add an event to rescale the symbol when the user zooms the map but I didn't in this example to emphasise how symbols act differently to map overlays.