Solved

Plotting multiple directions using Google maps API

Posted on 2010-11-16
8
4,573 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

747 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

11 Experts available now in Live!

Get 1:1 Help Now