Custom marker icons using DirectionsRenderer.setDirections()

8,828 views
Skip to first unread message

Matt

unread,
Oct 7, 2011, 12:23:31 AM10/7/11
to google-map...@googlegroups.com
I'm using DirectionsRenderer.setDirections() to plot directions onto my map, and the default markers are A, B.

Is there anyway to override these so I can have my own marker for A and another one for B.

I notice the DirectionsRenderer has a setOptions but from what I can see, the options defined in there are used by all markers for that direction object?

Any help would be awesome.

Matt

Masashi.K

unread,
Oct 7, 2011, 1:30:59 AM10/7/11
to Google Maps JavaScript API v3
Hi Matt-

You can change the icons with DirectionsRenderer.

First set the value "DirectionsRendererOptions.suppressMarkers =
true", then pass to the DirectionsRenderer.
After that, get legs from DirectionsResult.
(DirectionsResult > routes > legs > start_location and end_location)

In use this example case:
http://code.google.com/apis/maps/documentation/javascript/examples/directions-complex.html

add the suppressMarkers property like this:
----------------------------------------
var rendererOptions = {
map: map,
suppressMarkers : true
}
directionsDisplay = new
google.maps.DirectionsRenderer(rendererOptions);
----------------------------------------

and add the code at the showSteps function:
-----------------------------------------
function showSteps(directionResult) {
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
:
}

//add the last point marker
var marker = new google.maps.Marker({
position: myRoute.steps[i - 1].end_point,
map: map,
icon: "http://xxxxx/icon.png"
});
}
-----------------------------------------

I hope it can help you.

Masashi.K

unread,
Oct 11, 2011, 6:33:05 PM10/11/11
to Google Maps JavaScript API v3
Hi Matt-

I wrote a description page.
http://googlemaps.googlermania.com/google_maps_api_v3/map_example_direction_customicon.html

My english is poor, but maybe you can understand.

On 10月6日, 午後10:30, "Masashi.K" <wf9a5...@gmail.com> wrote:
> Hi Matt-
>
> You can change theiconswith DirectionsRenderer.
>
> First set the value "DirectionsRendererOptions.suppressMarkers =
> true", then pass to the DirectionsRenderer.
> After that, get legs from DirectionsResult.
> (DirectionsResult > routes > legs > start_location and end_location)
>
> In use this example case:http://code.google.com/apis/maps/documentation/javascript/examples/di...
>
> add the suppressMarkers property like this:
> ----------------------------------------
>     var rendererOptions = {
>       map: map,
>       suppressMarkers : true
>     }
>     directionsDisplay = new
> google.maps.DirectionsRenderer(rendererOptions);
> ----------------------------------------
>
> and add the code at the showSteps function:
> -----------------------------------------
>  function showSteps(directionResult) {
>   var myRoute = directionResult.routes[0].legs[0];
>   for (var i = 0; i < myRoute.steps.length; i++) {
>     :
>   }
>
>   //add the last pointmarker
>   varmarker= new google.maps.Marker({
>     position: myRoute.steps[i - 1].end_point,
>     map: map,
>     icon: "http://xxxxx/icon.png"
>   });}
>
> -----------------------------------------
>
> I hope it can help you.
>
> On 10月6日, 午後9:23, Matt <mdb...@googlemail.com> wrote:
>
>
>
>
>
>
>
> > I'musingDirectionsRenderer.setDirections() to plot directions onto my map,
> > and the default markers are A, B.
>
> > Is there anyway to override these so I can have my ownmarkerfor A and
Reply all
Reply to author
Forward
0 new messages