change color of routes by using renderer options and direction services.

2,494 views
Skip to first unread message

sunny7006

unread,
Oct 22, 2010, 8:43:11 AM10/22/10
to Google Maps JavaScript API v3
I want to show multiple routes on the map with different colors for
the routes to be able to make it easier to identify them.

Following is the code i have been using. Can some on please show me
how can I change the route colors.


var map;
var Decatur = new google.maps.LatLng(39.83, -88.87);

var MY_MAPTYPE_ID = 'Tracking';


function initialize() {


var rendererOptions =
{
map: map
};
var directionsDisplay = new
google.maps.DirectionsRenderer(rendererOptions);

var mapOptions = {
zoom: 6,
center: Decatur,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
function renderDirections(result)
{ var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
directionsRenderer.setOptions({ suppressMarkers: true } );
}

var directionsService = new google.maps.DirectionsService;
function requestDirections (start, mid, end)
{ directionsService.route
(
{
origin: start,
destination: end,
waypoints: mid,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
function (result)
{
renderDirections(result);
}
);
}


requestDirections('(42.9181, -87.9267)',[ ], 'Florence,
KY');
requestDirections('Stillwater, OK', [{location: "Dallas, TX"},
{location: "Austin, TX"}], 'Houston, TX');

geoco...@gmail.com

unread,
Oct 22, 2010, 6:33:38 PM10/22/10
to Google Maps JavaScript API v3
On Oct 22, 5:43 am, sunny7006 <kaushiksa...@gmail.com> wrote:
> I want to show multiple routes on the map with different colors for
> the routes to be able to make it easier to identify them.
>
> Following is the code i have been using. Can some on please show me
> how can I change the route colors.

Not from code posted in the group. If you want help on your code,
post a link to your map

Examples of changing the color of route polylines have been posted to
the group, here is one:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/5674d9bcef4f6b7f/184a0777d12ee74d?lnk=gst&q=directions+geocodezip#184a0777d12ee74d

-- Larry
Reply all
Reply to author
Forward
0 new messages