-1

How can i change the marker icon on directions on google maps?

enter image description here

NOTE: The dirty approach of pure CSS based on the classes ids of container elements is not accepted nor a js search-and-replace the img src.

Sharky
  • 6,154
  • 3
  • 39
  • 72
  • Have you tried setting the markerOptions in the [DirectionsRendererOptions](https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions)? – duncan Jun 12 '14 at 08:52
  • @duncan it doesn't seem to make any difference to ***directions*** :( – Sharky Jun 12 '14 at 09:04
  • Please create a [jsfiddle](http://jsfiddle.net). – MrUpsidown Jun 12 '14 at 09:34
  • 1
    Have you already checked out this answer? http://stackoverflow.com/questions/4813728/change-individual-markers-in-google-maps-directions-api-v3 – Alberto Jun 22 '14 at 13:33
  • Do F12 in the page, with google map and marker, in chrome to see the source code and find the element of interest, and source of css code. If I were you, I would first do this. –  Jun 22 '14 at 21:28
  • @Alberto this is for markers on the map, not for the markers on the driving directions. please see the red arrows on my question. – Sharky Jun 23 '14 at 07:29
  • @Physicist please read the last sentence of my question. – Sharky Jun 23 '14 at 07:29
  • If you want to have pure solution you must see how they put markers in a map and you cant do pure solution without seeing the source code... –  Jun 23 '14 at 13:00
  • Check out my example: http://codepen.io/anon/pen/mkuxC – Yannick Y Jun 23 '14 at 16:22
  • @YannickY Thank you but thats not an acceptable solution. It's "dirty". I'm not looking for a scrapping and rerendering of the directions. As i said, "CSS based on the classes ids of container elements is not accepted" nor "dirty hacks". I'm looking for an official way that won't need maintenance if something little as a class name will change. Also click interactivity between directions-markers is lost with your solution. – Sharky Jun 24 '14 at 05:46
  • @Physicist in the last sentence i explicity say that a solution like the one you describe, the pure CSS, **"is not accepted"**. Please see my comment above also. – Sharky Jun 24 '14 at 06:02

1 Answers1

0

After expired bounty and lots of research im answering my own question: In Google maps API v3, since 24 June 2014 there seems to be no official way to change these markers.

Possible dirty solutions:

CSS:

set display:none to whatever class the image is, and set a custom background on the parent div. set width and height accordingly.

Click functionality between "directions"-"markers on map" will be maintained, but something as little as a change in the class name returned by the API will cause problems. Not semantically correct as the image displayed is a background of a div, and its not clickable.

JS:

Add a listener and after the directions call, when map is idle, search the markup for the image and replace the img src. Will fail if markup returned from API is changed since you have to select by id, class name or something similar.

JS:

Scrap the data, and re-render as you wish. Click functionality between "directions"-"markers on map" of course is lost, and still unstable since is based on scrapping.

In any of the above cases you ll have to suppress markers in markerOptions and also change the marker that is used as point "A" and point "B" to match your dirty solution result.

Will be more than happy to see a better answer than this.

Sharky
  • 6,154
  • 3
  • 39
  • 72