3

I'm using google maps directions api to draw traffic information on map. I want to show my custom traffic info, for both driving directions on one street.

When I request the directions from A to B and from B to A, it renders the 2 routes overlapped, so actually it only shows one route. 

var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];

function calcRoute(entry) {
  var request = {
      origin: entry.origin,
      destination: entry.destination,
      travelMode: google.maps.TravelMode["DRIVING"]
  };

  if (entry.color == 1){
    vStrokeColor = "#FF0000"
    vzIndex = 100

  }else if (entry.color == 2){
    vStrokeColor = "#0DFF00"
    vzIndex = 1
  }

  var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true,  strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
  directionsDisplay.setMap(map);

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

Is there a way to achieve this with Google Apis?

Thanks.

UPDATE: Correct GPS coordinates

var list = [
{ origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
{ origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
];
var vStrokeColor;
var vzIndex;
var map;
var directionsService = new google.maps.DirectionsService();

function calcRoute(entry) {
  var request = {
      origin: entry.origin,
      destination: entry.destination,
      travelMode: google.maps.TravelMode["DRIVING"]
  };

  if (entry.color == 1){
    vStrokeColor = "#FF0000"
    vzIndex = 100

  }else if (entry.color == 2){
    vStrokeColor = "#0DFF00"
    vzIndex = 1
  }

  var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true,  strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
  directionsDisplay.setMap(map);

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}  
function initialize() {   
    var myLatlng = new google.maps.LatLng(41.08801, 16.83689);
    var mapOptions = {
        zoom: 15, 
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
      }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    calcRoute(list[0]);
    calcRoute(list[1]);

}  
google.maps.event.addDomListener(window,'load',initialize);
html,body,#map {
  height: 100%;
  width: 100%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
    </script>
<div id="map"></div>
Filippo Ard
  • 31
  • 3
  • If I run the code snippet I added to your post, I see two different routes. – geocodezip Sep 19 '14 at 16:45
  • My mistake geocodezip. I used the wrong coordinates in the example.That segment of road has traffic divider. Now I updated the script with the right coordinates that show the issue – Filippo Ard Sep 22 '14 at 06:48
  • You're drawing two lines on exactly the same coordinates, I'm not sure what you're expecting to see - a thicker line than normal? the lines being slightly overlapping? a dotted line? – duncan Sep 22 '14 at 14:25
  • @FilippoArd your 'updated' example has exactly the same coordinates as before, you've just added your `initialize` function – duncan Sep 22 '14 at 14:29
  • @duncan Thanks for your reply, I'm trying to visualize the two lines side by side, as shown for example by Gmaps traffic, showing the 2 directions of travel. – Filippo Ard Sep 22 '14 at 14:40

0 Answers0