javascript - Google Maps API v3: Passing an Image for symbolPath rather than a inbuilt symbol - Stack Overflow

admin管理员组

文章数量:1324083

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.

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.

• javascript
• jquery
• google-maps
• google-maps-api-3
• google-maps-markers

Share Improve this question Follow asked May 3, 2013 at 15:17 writeToBhuwanwriteToBhuwan 3,2811111 gold badges4242 silver badges6767 bronze badges 2

• See this example in the documentation – geocodezip Commented May 3, 2013 at 22:27
• Thank you for your help but what is it exactly written in Path? How do i decrypt this "M -2,0 0,-2 2,0 0,2 z" – writeToBhuwan Commented May 4, 2013 at 7:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.uk/gmap/
--especially:
----http://econym.uk/gmap/example_cartrip.htm (simple, just goes to destination)
----http://econym.uk/gmap/example_cartrip2.htm (has a visible polyline trail behind it)
----http://econym.uk/gmap/example_cartrip3.htm (rotates so it's always facing the road, this is what I wanted)

http://www.geocodezip./
----especially:
----http://www.geocodezip./v3_animate_marker_directions.html (this is API v3)
----http://www.geocodezip./v3_animate_marker_xml.html (also API v3 animates via xml not polyline)

---

Useful scripts: v3_epoly.js taken from http://www.geocodezip./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./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./maps/documentation/javascript/reference#OverlayView

No - Symbols are restricted to SVG paths, not arbitrary images. See https://developers.google./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.

本文标签： javascriptGoogle Maps API v3 Passing an Image for symbolPath rather than a inbuilt symbolStack Overflow