Solved

Plotting multiple directions using Google maps API

Posted on 2010-11-16
8
5,687 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

689 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