Set polyline color in DirectionsRenderer

[Moust]

Hello,

I search for many hours a solution to apply a color to the polyline
generate by a DirectionsRenderer.
I found in documentation that's the StrokeColor in polyline object but
I can't find the way to catch this object.

directionsService.route(routes, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var directionDisplayObject = new google.maps.DirectionsRenderer
(rendererOptions);
directionDisplayObject.setMap(map);
directionDisplayObject.setDirections(response);

// here I want to apply a color to the direction
}
});

Thanks for you help.

[TTA]

Hi Moust,

I was also looking for the same thing and did not find any method
exposed by google to recolor path using DirectionsRenderer. However
you can get the polyline object from response object and create any ad
hoc method to put them in map with different color. But this might
slow down your process.

Please let me know if you have any other way to fix it.

-Many Thanks
TTA

[Moust]

Thanks for your response.
But I tried to get the polyline from the response object but the
object named "polyline" is not a polyline object. It has only two
parameters and if I set the strokeColor parameter like a traditional
polyline object that don't change anythings.
Do you had a functional solution ?

[TTA]

Hey Moust,

The polyline is an encoded object in gmap v3 Direction Response. It
has a pile of latlngs which you will get after decoding it. Check this
out http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/decode.html
which provides an awesome example to decode polyline.

The function for decoder is given below
----------------------------------------------------------------
function decodeLine (encoded)
{
var len = encoded.length;
var index = 0;
var array = [];
var lat = 0;
var lng = 0;
while (index < len)
{
var b;
var shift = 0;
var result = 0;
do
{
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
}while (b >= 0x20);
var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
lat += dlat;
shift = 0;
result = 0;
do
{
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
}while (b >= 0x20);
var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
lng += dlng;
array.push([lat * 1e-5, lng * 1e-5]);
}
return array;
}

is this helpful?

-Many Thanks
TTA

[Ben Appleton]

There's no need to decode the encoded polyline; it is already encoded for you.

Each DirectionsStep contains an Array of LatLngs, to display the polyline for that step.

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

[TTA]

Yes Ben is absolutely right. trips[x].routes[y].steps[z].lat_lngs
holds an array of coordinates for each step.

Thank you Ben for your help.

-Thanks
TTA

[Moust]

Thanks for your responses.
I had use the parameter trips[x].routes[y].steps[z].lat_lngs for
create the polyline objects instead to use the DirectionsRenderer
object.

This is my code if someone would encounter the same problem.

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{
var steps = response.trips[0].routes[0].steps;

for(var step = 0; step < steps.length; step++)
{
polylineOptions = {
map: map,
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 5,
path: steps[step].lat_lngs,
}
new google.maps.Polyline(polylineOptions);
}
}
}

[ShadowPyro]

Where did you implement this?

> }- Hide quoted text -
>
> - Show quoted text -