Can I combine Directions with Markers?

761 views
Skip to first unread message

jh

unread,
Dec 30, 2011, 6:36:41 PM12/30/11
to Google Maps JavaScript API v3
I would like to show Directions on a map, but rather than the default
A, B, C etc. icons as seen for example here:

http://code.google.com/apis/maps/documentation/javascript/examples/directions-waypoints.html

I would like the start, destination and waypoints to be clickable
Markers so that I can show custom information, so rather than clicking
A and getting "Halifax, NS, Canada" I could display an image in an
InfoWindow.

Can this be done?

TIA

geoco...@gmail.com

unread,
Jan 1, 2012, 1:25:06 AM1/1/12
to Google Maps JavaScript API v3
On Dec 30, 3:36 pm, jh <john.hor...@gmail.com> wrote:
> I would like to show Directions on a map, but rather than the default
> A, B, C etc. icons as seen for example here:
>
>    http://code.google.com/apis/maps/documentation/javascript/examples/di...
>
> I would like the start, destination and waypoints to be clickable
> Markers so that I can show custom information, so rather than clicking
> A and getting "Halifax, NS, Canada" I could display an image in an
> InfoWindow.
>
> Can this be done?

You mean something like this?
http://www.geocodezip.com/v3_directions_custom_iconsC.html

-- Larry

>
> TIA

DiTieM

unread,
Jan 1, 2012, 4:35:17 AM1/1/12
to google-map...@googlegroups.com
You mean something like this?

I am facing the same problem as jh. In particular I would like to change the start-end markers.

The solution proposed by Larry do render the path and the markers by himself. I dont want to
go in this line as I would like to use Google code for 2 reasons:

1) "draggable" path 

2) update the path when dragging the markers too.

Adding the option of suppressMarkers to DirectionsRender options allows you to define your 
markers, but does not recompute the path when you are dragging them (I still have to play 
with this, maybe it is as easy as capture the dragging event and update the directions).

I think it should be easy for Google to enhance driving directions to allow changing end/start
markers and if possible, add an EventListener('click') on a waypoint.

Does it make sense? Should we file a bug?

geoco...@gmail.com

unread,
Jan 1, 2012, 9:08:12 AM1/1/12
to Google Maps JavaScript API v3
On Jan 1, 1:35 am, DiTieM <dit...@gmail.com> wrote:
> > You mean something like this?
>
> I am facing the same problem as jh. In particular I would like to change
> the start-end markers.
>
> The solution proposed by Larry do render the path and the markers by
> himself. I dont want to
> go in this line as I would like to use Google code for 2 reasons:
>
> 1) "draggable" path
>
> 2) update the path when dragging the markers too.

I did a couple of examples with draggable markers also:

http://www.geocodezip.com/v3_directions_custom_icons_draggable.html
http://www.geocodezip.com/v3_directions_custom_revgeo.html

These were done before the "draggable directions" were added to the v3
API (the "draggable" path). It should be possible to combine the two.

>
> Adding the option of suppressMarkers to DirectionsRender options allows you
> to define your markers, but does not recompute the path when you are dragging them (I
> still have to play with this, maybe it is as easy as capture the dragging event and update the
> directions).
>
> I think it should be easy for Google to enhance driving directions to allow
> changing end/start markers and if possible, add an EventListener('click') on a waypoint.
>
> Does it make sense? Should we file a bug?

It is not a bug, but filing an enhancement request doesn't hurt. If
there is enough interest (stars), it might get implemented.

-- Lary

MymsMan

unread,
Jan 1, 2012, 9:35:03 AM1/1/12
to google-map...@googlegroups.com
As an alternative / in addition to Larry's suggestion you can also modify the content that is displayed in the default windows by updating the directions results returned.
    directs.routes[0].legs[0].start_address="Start address";
    directs.routes[r0].legs[0].end_address="End address":

I haven't tried putting an <img> or other html into the fields but it is worth experimenting.

I think the API already gives us sufficient flexibility in this area without the need for further enhancement

Bob

geoco...@gmail.com

unread,
Jan 1, 2012, 10:28:43 AM1/1/12
to Google Maps JavaScript API v3
On Jan 1, 9:08 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Jan 1, 1:35 am, DiTieM <dit...@gmail.com> wrote:
>
> > > You mean something like this?
>
> > I am facing the same problem as jh. In particular I would like to change
> > the start-end markers.
>
> > The solution proposed by Larry do render the path and the markers by
> > himself. I dont want to
> > go in this line as I would like to use Google code for 2 reasons:
>
> > 1) "draggable" path
>
> > 2) update the path when dragging the markers too.
>
> I did a couple of examples with draggable markers also:
>
> http://www.geocodezip.com/v3_directions_custom_icons_draggable.htmlhttp://www.geocodezip.com/v3_directions_custom_revgeo.html
>
> These were done before the "draggable directions" were added to the v3
> API (the "draggable" path). It should be possible to combine the two.

like this (not well tested):

http://www.geocodezip.com/v3_directions_draggable_icons_draggable.html

-- Larry

MymsMan

unread,
Jan 1, 2012, 12:27:14 PM1/1/12
to google-map...@googlegroups.com
http://calonmap.clanteam.com/directions-draggable.html

A 50% success for my experiments!

You can add images to the Infowindows created by the directions renderer :-) but if you are you are using the default renderer to display the text directions it makes a mess of those :-(

It is probably best to create you own markers and  infowindows if you want to add anything but plain text.

MymsMan

unread,
Jan 1, 2012, 2:53:50 PM1/1/12
to google-map...@googlegroups.com
http://calonmap.clanteam.com/directions-with-images.html

I created a more useful version of my previous experiment which shows streetview images along the route.

Unfortunately it runs into the streetview usage limits http://code.google.com/apis/maps/documentation/streetview/#usage_limits if used on long routes

jh

unread,
Jan 3, 2012, 2:39:02 AM1/3/12
to Google Maps JavaScript API v3
Thanks for this and your other replies.

What I'm aiming for is something like "my favourite pubcrawl",

* starting at the Bank Hotel on King Street Newtown,
* stopping in for a beer at the Warrenview on Enmore road, then
* finishing at the Golden Barley on Edgeware Road,

but using images and names of the pubs themselves, not just "165
Edgeware Road".

I should be able to use your code to get that stuff working. Cheers.
Reply all
Reply to author
Forward
0 new messages