How do I replace the default directions icons

[ICP-Fan]

I have multiple waypoints and want to change the icons on both the map
and directions output. How would I do this without overlaying them?

[ICP-Fan]

Ok, maybe I need to explain what I'm trying to do:

I need to replace lettered waypoint images (A-Z) with my own lettered
waypoint images. I can replace them all with a static image (no
letters), but cannot figure out how to replace them with my lettered
images.

Anyone?

[Ronny Aerts]

Hi,

This question has been asked a lot of times already on the google map v3 group. The point is that you can't change the icons of the waypoints of a route (as far as I have seen). Since the word "can't" does not exist in software, I'll try to give you a solution.

The starting point is my http://www.grasoft.be/mtb/gmap/directions01.htm page where a route is calculated based on 4 points, one start, one stop and two intermediate points.

My first thinking was that I could create extra new waypoint markers on top of those of the route. This seem to work fine except that you see those new points only shortly and even then maybe after a refresh of the page. The icons on http://www.grasoft.be/mtb/gmap/directions02a.htm are the default icons see your letters are not included yet.

I slightly modified http://www.grasoft.be/mtb/gmap/directions02a.htm into http://www.grasoft.be/mtb/gmap/directions02b.htm where the difference is that in 02b I disabled the "map" attribute of the DirectionsRenderer (with a setMap ()). This means that the route is not drawn anymore BUT the directions text is still visible (on the right side of the screen). The extra waypoint markers are shown.

The point/trick with the DirectionsService is that it returns the "response" on calling the route method DirectionsService. This response contains very detailed information about the "route" call. I'll work with this "response" to get what you what.

In http://www.grasoft.be/mtb/gmap/directions03.htm you can read that I walk thru the "steps" of the calculated route to draw a polyline myself (a red one). I also include the colored markers you want. With this method, it is not possible anymore the to click in the directions panel (you can click in it but nothing happens anymore).
I also do the trick with the setMap described earlier.
You see that the maps zoom factor and center is not ok. I think this has to do with the drawing of the polyline.

I created http://www.grasoft.be/mtb/gmap/directions04.htm to solve the zoom and center problem. The trick is to create a "bounds" object with everything in it and than executing a fitBounds and setCenter.

kind regards from Belgium,
Ronny Aerts

2010/4/6 ICP-Fan <robertsc...@icp-fan.net>

--
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.

[Ronny Aerts]

[ICP-Fan]

Thank you for your help. I looked through your solution and came up
with something slightly similar.

I initially set the marker images to a blank image (background with no
lettering):

var image = new google.maps.MarkerImage('http://host/
images/marker.png',
new google.maps.Size(28, 28),
new google.maps.Point(0, 0),
new google.maps.Point(0, 14));

var markerOption = {
clickable: false,
flat: true,
icon: image,
visible: true,
map: map
};

directionsDisplay = new
google.maps.DirectionsRenderer({ markerOptions: markerOption });

directionsDisplay.setMap(map);

Then, I walk the direction services results (after the polyline has
been created) and place my markers on top of the existing, blank,
markers:

function setMarkers(map, start, end, destinations) {
var startImage = new google.maps.MarkerImage('http://
host/images/marker0.png',
new google.maps.Size(28, 28),
new google.maps.Point(0, 0),
new google.maps.Point(0, 14));

var startMarker = new google.maps.Marker({
position: start,
map: map,
icon: startImage
});

var i = 1;

for (i; i < destinations.length; i++) {
var image = new google.maps.MarkerImage("http://
host/images/marker" + i.toString() + ".png",
new google.maps.Size(28, 28),
new google.maps.Point(0, 0),
new google.maps.Point(0, 14));

var marker = new google.maps.Marker({
position: destinations[i - 1].location,
map: map,
icon: image
});

}

var endImage = new google.maps.MarkerImage("http://
host/images/marker" + (i + 1).toString() + ".png",
new google.maps.Size(28, 28),
new google.maps.Point(0, 0),
new google.maps.Point(0, 14));

var endMarker = new google.maps.Marker({
position: end,
map: map,
icon: endImage
});
}

It works great for now, and is not too complex for the other dev's in
my company to comprehend. Now if I could just get the polyline to
render as an image rather than svg.....

On Apr 7, 12:39 am, Ronny Aerts <gras...@gmail.com> wrote:
> Hi,
>
> This question has been asked a lot of times already on the google map v3
> group. The point is that you can't change the icons of the waypoints of a
> route (as far as I have seen). Since the word "can't" does not exist in
> software, I'll try to give you a solution.
>

> The starting point is myhttp://www.grasoft.be/mtb/gmap/directions01.htmpagewhere a route is

> calculated based on 4 points, one start, one stop and
> two intermediate points.
>
> My first thinking was that I could create extra new waypoint markers on top
> of those of the route. This seem to work fine except that you see those new
> points only shortly and even then maybe after a refresh of the page. The

> icons onhttp://www.grasoft.be/mtb/gmap/directions02a.htmare the default

> icons see your letters are not included yet.
>

> I slightly modifiedhttp://www.grasoft.be/mtb/gmap/directions02a.htmintohttp://www.grasoft.be/mtb/gmap/directions02b.htmwhere the difference is

> that in 02b I disabled the "map" attribute of the DirectionsRenderer (with a
> setMap ()). This means that the route is not drawn anymore BUT the
> directions text is still visible (on the right side of the screen). The
> extra waypoint markers are shown.
>
> The point/trick with the DirectionsService is that it returns the "response"
> on calling the route method DirectionsService. This response contains very
> detailed information about the "route" call. I'll work with this "response"
> to get what you what.
>

> Inhttp://www.grasoft.be/mtb/gmap/directions03.htmyou can read that I walk

> thru the "steps" of the calculated route to draw a polyline myself (a red
> one). I also include the colored markers you want. With this method, it is
> not possible anymore the to click in the directions panel (you can click in
> it but nothing happens anymore).
> I also do the trick with the setMap described earlier.
> You see that the maps zoom factor and center is not ok. I think this has to
> do with the drawing of the polyline.
>

> I createdhttp://www.grasoft.be/mtb/gmap/directions04.htmto solve the zoom

[BFritchie]

It appears as if the samples here no longer have what is being described.

[geoco...@gmail.com]

On Mar 31, 3:32 pm, BFritchie <brfritc...@gmail.com> wrote:
> It appears as if the samples here no longer have what is being described.

How about this one:
http://www.geocodezip.com/v3_directions_custom_iconsC.html

-- Larry