Solved

Plotting multiple directions using Google maps API

Posted on 2010-11-16
8
5,175 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

808 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