New Google Maps Symbols in Action

You are not allowed to view links.
Please Register or Login" imageanchor="1" style="color: #cc0000;" target="_blank"><img border="0" src="

You are not allowed to view links.
Please Register or Login" />[/url]



Darren Wiens has created a quick demo of the&nbsp; new <a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">Symbols[/url] feature in the Google Maps API.



<a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">Hinton Nordic Centre Ski Trails[/url] 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. <a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">Here's an example[/url] 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.



<a href="

You are not allowed to view links.
Please Register or Login" imageanchor="1" target="_blank"><img border="0" src="

You are not allowed to view links.
Please Register or Login" />[/url]


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.&nbsp;<div class="blogger-post-footer"><img width='1' height='1' src='

You are not allowed to view links.
Please Register or Login' alt='' /></div>
<p>

You are not allowed to view links.
Please Register or Login

You are not allowed to view links.
Please Register or Login

You are not allowed to view links.
Please Register or Login" height="1" width="1"/>

You are not allowed to view links.
Please Register or Login

Linkback:

You are not allowed to view links.
Please Register or Login