Custom icon for the waypoints

4,759 views
Skip to first unread message

Garito

unread,
Sep 8, 2010, 4:01:24 AM9/8/10
to Google Maps JavaScript API v3
Hi all!
How can I define a custom image for a waypoint?

I do something like:
var iconUrl = "http://chart.apis.google.com/chart?
chst=d_map_pin_letter_withshadow&chld=" + totalMarkers++ + "|65ba4a|
000000";
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new
google.maps.DirectionsRenderer({markerOptions: {icon: iconUrl}});

and add the waypoints with the request object but I can't specify the
custom icon for the waypoint

Is this posible?

Thanks a lot

geoco...@gmail.com

unread,
Sep 8, 2010, 5:47:19 AM9/8/10
to Google Maps JavaScript API v3
Is this what you are trying to do?
http://www.geocodezip.com/v3_GoogleEx_directions-waypointsE.html

-- Larry


>
> Thanks a lot

Garito

unread,
Sep 8, 2010, 5:54:48 AM9/8/10
to Google Maps JavaScript API v3
Yeah!
This is what I'm looking for

Can you explain me how to do that?
The step by step instructions panel will respect the custom icon?

Thanks a lot!

On Sep 8, 11:47 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Sep 8, 4:01 am, Garito <gar...@gmail.com> wrote:
>
> > Hi all!
> > How can I define a custom image for a waypoint?
>
> > I do something like:
> > var iconUrl = "http://chart.apis.google.com/chart?
> > chst=d_map_pin_letter_withshadow&chld=" + totalMarkers++ + "|65ba4a|
> > 000000";
> > var directionsService = new google.maps.DirectionsService(),
> >       directionsDisplay = new
> > google.maps.DirectionsRenderer({markerOptions: {icon: iconUrl}});
>
> > and add the waypoints with the request object but I can't specify the
> > custom icon for the waypoint
>
> > Is this posible?
>
> Is this what you are trying to do?http://www.geocodezip.com/v3_GoogleEx_directions-waypointsE.html

geoco...@gmail.com

unread,
Sep 8, 2010, 6:11:12 AM9/8/10
to Google Maps JavaScript API v3
On Sep 8, 5:54 am, Garito <gar...@gmail.com> wrote:
> Yeah!
> This is what I'm looking for
>
> Can you explain me how to do that?

It is brute force, it processes the returned result and displays the
polyline, markers and directions.

> The step by step instructions panel will respect the custom icon?

It is really just a proof of concept, you can change them however you
like. I wasn't as thorough as Mike Williams was in his v2 tutorial
where he recreated the Google Maps look and feel, but you can do that.

-- Larry

Garito

unread,
Sep 8, 2010, 6:33:32 AM9/8/10
to Google Maps JavaScript API v3
Ah! ok, I understand
Seems a little silly that this BIG library has lacks like this but I'm
glad to have it

I hope the Google people add this feature in the next versions

Thanks a lot

On Sep 8, 12:11 pm, "geocode...@gmail.com" <geocode...@gmail.com>

geoco...@gmail.com

unread,
Sep 8, 2010, 9:47:04 PM9/8/10
to Google Maps JavaScript API v3
On Sep 8, 6:33 am, Garito <gar...@gmail.com> wrote:
> Ah! ok, I understand
> Seems a little silly that this BIG library has lacks like this but I'm
> glad to have it
>
> I hope the Google people add this feature in the next versions

1. v3 is still under development.
2. there may be some way to accomplish this with the existing version,
I just don't know how, but I don't see anything obvious in the
documentation (unless there is something with MarkerOptions).
3. You can either vote for an existing enhancement request or add a
feature request:
http://code.google.com/p/gmaps-api-issues/issues/list?can=2&q=apitype:Javascript3

Garito

unread,
Sep 9, 2010, 2:46:24 AM9/9/10
to google-map...@googlegroups.com
Yeah!
I understand uncomplete libraries (I program too)

Thanks for the link to the library issues

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.




--
Mi twitter: http://twitter.com/garito

Temet nosce

Ben Appleton

unread,
Sep 12, 2010, 6:48:00 PM9/12/10
to google-map...@googlegroups.com
Here's an example where I use a custom icon for all waypoints:
http://appleton-static.appspot.com/static/directions-custom-icon.html
This uses the markerOptions field of DirectionsRenderer. Is this what
you had in mind?

Garito

unread,
Sep 12, 2010, 8:19:29 PM9/12/10
to Google Maps JavaScript API v3
Hi, Ben, thanks for helping

but, no, this is not what I need (I try this before)

This changes the icon, yes, even for the waypoints, yes, but I need
that every point has its own custom icon

And this doesn't change the icon for the step by step panel

Sorry! but thanks!

Ben Appleton

unread,
Sep 12, 2010, 8:32:30 PM9/12/10
to google-map...@googlegroups.com
I see. Then you'll need something like Larry's example.

Cheers
Ben

Garito

unread,
Sep 12, 2010, 8:59:15 PM9/12/10
to Google Maps JavaScript API v3
Yes, I count with this since Larry's comment

Thanks a lot!
Reply all
Reply to author
Forward
0 new messages