?
Solved

Plotting multiple directions using Google maps API

Posted on 2010-11-16
8
Medium Priority
?
6,655 Views
Last Modified: 2012-06-21
Hi
So far, I have been able to plot 1 route (ie one driving direction between 2 points).
Does anybody know how I can add more routes.
Basically, I have a table of up to 10 routes. I want to be able to plot each of these routes on the same map but use a different colour to identify each route.

Currently, my code is as follows:
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
 
  function drawMap() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var start = new google.maps.LatLng(51.47482547819850,-0.37739553384529);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: start
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

    var end = new google.maps.LatLng(51.59512428598160,-0.17190814889409 );
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>

<div id="map_canvas"  style="width: 400px; height: 250px"></div>
<script type="text/javascript">
      drawMap();
</script>      



Thanks!
0
Comment
Question by:jagku
  • 5
  • 2
8 Comments
 
LVL 13

Assisted Solution

by:Molnar István
Molnar István earned 200 total points
ID: 34144870
there is some example on this page:
http://econym.org.uk/gmap/steps.htm

other examples that could help
http://econym.org.uk/gmap/

i attached some code, how to display three routes on one map

hope it helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zoom to extents</title>
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ADD_API_KEY_HERE" type="text/javascript"></script>

<script type="text/javascript">
        var map;
        var directionsArray = [];
        var colors = ['#FF0000', '#FF00FF', '#0000FF'];
        var i = 0;

        function initialize() {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(47.400000,-122.210000), 9);
            map.addControl(new GSmallMapControl());

            var route1 =  'from: 47.400000,-122.210000 to: 47.410000,-122.190000 to: 47.460000,-122.250000 to: ' + '47.450000,-122.240000 to: 47.400000,-122.210000';

            var route2 = 'from: 47.400000,-122.210000 to: 47.360000,-122.220000 to: 47.330000,-122.230000 to: ' + 'to: 47.400000,-122.210000';

            var route3 = 'from: 47.400000,-122.210000 to: 47.470000,-122.330000 to: 47.480000,-122.340000 to: ' + 'to: 47.620000,-122.150000 to: 47.400000,-122.210000';

            var routes = [route1, route2, route3];

            for(j = 0; j < routes.length; j++) {
                directionsArray[j] = new GDirections();
                GEvent.addListener(directionsArray[j], "load",
onGDirectionsLoad);
                directionsArray[j].load(routes[j],
{getPolyline:true});
            }
        }

        function onGDirectionsLoad() {
           var polyline = directionsArray[i].getPolyline();
           polyline.setStrokeStyle({color:colors[i],weight:3,opacity:0.7});
           map.addOverlay(polyline);
           i++;
        }
        
    </script> 



</head>

<body onload="initialize()">
    <div id="map_canvas" style="height:400px; width:700px; margin-left: 0px;"> 
    </div>   
</body>
<HEAD>
</HEAD>
</html>

Open in new window

1
 
LVL 6

Assisted Solution

by:Codebot
Codebot earned 200 total points
ID: 34144958
0
 

Author Comment

by:jagku
ID: 34145357
Thanks guys. I have been trying to figure out how the v3 API can be used to do this
as google as advised v2 API has been deprecated.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jagku
ID: 34145988
Ok, I have figured it out. Here is the sample code:

  function drawMap() {

        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        
    var start = new google.maps.LatLng(51.47482547819850,-0.37739553384529);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: start
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    function renderDirections(result) {
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(result);
      }    
   
    function requestDirections(start, end) {
      directionsService.route({
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result) {
        renderDirections(result);
      });
    }

    requestDirections('(51.47482547819850,-0.37739553384529)', '(51.59512428598160,-0.17190814889409)');
    requestDirections('EC1V 0AH', '(51.47615506206120, -0.37795315370703)');  
   
  }
0
 

Author Comment

by:jagku
ID: 34145997
Now, if anyone can help me specify a colour to each route that would be great.
0
 

Accepted Solution

by:
jagku earned 0 total points
ID: 34146105
Hi,

Ok, solved - just need to add:

          var polylineOptions = new
          google.maps.Polyline({ strokeColor: colour, strokeWeight: 3 });

        var directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions: polylineOptions });
0
 
LVL 6

Expert Comment

by:Codebot
ID: 34146120
I was about to mention this
good work
0
 

Author Closing Comment

by:jagku
ID: 34182397
Managed to resolve this issue myself. Please see the above comments.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question