I just got to know about the Symbol Animation offered by Google API.
Every thing is working fine in my code but I just want to know if I can pass a Image instead of a symbol in the below code.
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};
If yes, How can I do that? I've tried passing Image paths and Image objects. NOthing worked.. Please help me out.
This is a fairly old post but I ran into it while trying to solve this problem, hopefully the info I've gathered will be of help. @jlivni is correct that Symbol can't be replaced with an image. The method to go about this is use Polyline and Marker. You can replace the marker image with your custom one and have that move.
The nice thing about this method is you can use your new marker point to change the look of your polylines before/after your marker, see eta info from your marker to the end location, etc.
These are useful to look over but many of them use GMaps API v2:
http://econym.org.uk/gmap/
--especially:
----http://econym.org.uk/gmap/example_cartrip.htm (simple, just goes to destination)
----http://econym.org.uk/gmap/example_cartrip2.htm (has a visible polyline trail behind it)
----http://econym.org.uk/gmap/example_cartrip3.htm (rotates so it's always facing the road, this is what I wanted)
http://www.geocodezip.com/
----especially:
----http://www.geocodezip.com/v3_animate_marker_directions.html (this is API v3)
----http://www.geocodezip.com/v3_animate_marker_xml.html (also API v3 animates via xml not polyline)
Useful scripts: v3_epoly.js taken from http://www.geocodezip.com/scripts/v3_epoly.js. The syntax in this file looks like it's straight up broken but the parts of it I've used work. Probably want to go through this by hand to fix it up if you need it. I also used Elabel3.js from a google group forum post (I think this is it https://github.com/erunyon/ELabel). It's used for the marker animation. It didn't work for me out of the box. I had to make changes to onAdd(), draw() and redraw() for my program. More info on that here: https://developers.google.com/maps/documentation/javascript/reference#OverlayView
No - Symbols are restricted to SVG paths, not arbitrary images. See https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol
You can pass an image url to the google.maps.Icon object, but the google.maps.Symbol object uses a google.maps.SymbolPath or SVG path. Look up SVG path syntax. It's a standard that many tools like CS and InkScape can produce for you.
See the official custom SymbolPath example where SVG coords are supplied.
