CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Ramesh Kotha
Ramesh Kotha

Reputation: 8322

how to display multiple polylines from directions in google maps?

i want to draw multiple polylines on the google map, for multiple routes. for this i am using google.maps.DirectionsService

function drawPolyline(source,destination,waypoints){
        // show route between the points
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:source, 
            destination:destination,
            waypoints:waypoints,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);

            }
        });

      }

but when i call this method multiple times, only last polyline is appearing. and i want different colors for different polylines.

Upvotes: 2

Views: 7243

Answers (3)

atomkirk
atomkirk

Reputation: 3801

You can actually instantiate multiple DirectionsRenderer and set them all to the same map and they will all render on the same map

enter image description here

Upvotes: 0

Mano Marks
Mano Marks

Reputation: 8819

Directions lets you inspect the route: http://code.google.com/apis/maps/documentation/javascript/directions.html#InspectingResults

The DirectionsResult object has and array of routes[], which allows you to get a set of encoded polylines that makes up the route:

if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                myRoutes[]=response.routes[];

            }

You can use the routes[] array to construct Polyline overlays as Scottux mentioned.

Upvotes: 2

Scottux
Scottux

Reputation: 1577

You need to use a polyline for each, not a directions renderer.

var line = new google.maps.Polyline({clickable:true,map:map,path:"some lat,lngs"});

Please look at the api here: http://code.google.com/apis/maps/documentation/javascript/reference.html#Polyline Options are listed here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolylineOptions

The DirectionsRenderer isn't very flexible for drawing lines, it is simply a helper for simple direction functionality.

Upvotes: 2

Related Questions