Solved

Plotting multiple directions using Google maps API

Posted on 2010-11-16
8
4,755 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 50 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 50 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular- typeahead works but need to change 2 things 5 19
Randomize in Owl Carousel v1.3.2 6 21
Objects on Same Line 2 18
bootstrap footer centering and expand problems 7 30
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now