javascriptgoogle-maps-api-3routesdriving-directionsmap-directions

Google Maps JavaScript API Display Two Routes with Different Polyline Styles on same Map


I am using the Google Maps JavaScript API and would like to display two routes (each with different polyline styles) on the same map.

The first route is by mode of driving and the start and finish locations are an address input by the user and a parking garage chosen by the user respectively. This route will be displayed as a solid line.

The second route is by mode of walking. This route is from the parking garage to another static location on the same map defined as centerOfMap. This route will be displayed as dashed line with circle symbols.

Desired Output:

enter image description here

// Set the driving route line

var drivingPathLine = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0,
    fillOpacity: 0
});

// Set the walking route line

var walkingLineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
};

var walkingPathLine = new google.maps.Polyline({
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: walkingLineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
directionsService = new google.maps.DirectionsService;

The problem is, the way the code is currently written, only the second route (walking route) is displayed on the map. I know I need to place the polyline variables and directionsRenderer inside the getDirectionsHere method, but not sure how. Any guidance is appreciated!

How can I display the two routes on the same map and style each route different (one with a solid polyline and another with a dotted polyline)?

<!DOCTYPE html>
<html>
<body>
<style>
    
html { 
	height: 100%;
}

body { 
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 26px;
    font-family: "filson-soft";
}

#map_container {
    height: 700px;
}

#map {
	width: 100%;
	height: 100%;
	float: left;
}
    
</style>

<div id="map_container">

    <div id="map"></div>
    
</div>
      
<script>
        
        google.maps.event.addDomListener(window, "load", initMap);

        var centerOfMap;
        var geocoder;
        var map;
        var locations;
        var gmarkers = [];
        var search_lat;
        var search_lng;
        var infowindow;
        var directionsDisplay; 
        var directionsService;

        function initMap() {
            
            gmarkers = [];
            
            // Set the driving route line

            var drivingPathLine = new google.maps.Polyline({
                strokeColor: '#FF0000',
                strokeOpacity: 0,
                fillOpacity: 0
            });

            // Set the walking route line

            var walkingLineSymbol = {
                path: google.maps.SymbolPath.CIRCLE,
                fillOpacity: 1,
                scale: 3
            };

            var walkingPathLine = new google.maps.Polyline({
                strokeColor: '#0eb7f6',
                strokeOpacity: 0,
                fillOpacity: 0,
                icons: [{
                    icon: walkingLineSymbol,
                    offset: '0',
                    repeat: '10px'
                }],
            });
            
            directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true,polylineOptions: walkingPathLine});
            directionsService = new google.maps.DirectionsService;
            
            geocoder = new google.maps.Geocoder();
            
            // SET THE CENTER OF THE MAP
            
            centerOfMap = {
                lat: 38.5803844, 
                lng: -121.50024189999999
            };
            
            // ADD THE MAP AND SET THE MAP OPTIONS

            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 16,
              center: centerOfMap
            });

            var center_marker = new google.maps.Marker({
                position: centerOfMap,
                icon: 'http://maps.google.com/mapfiles/ms/micons/orange-dot.png',
                map: map
            });
                  
            center_marker.addListener('click', function() {
                
                var gOneContent =   '<div id="info_window">' +
                                    '<h2>Center Of Map</h2>' +
                                    '<div style="clear:both;height:40px;">' +
                                    '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + centerOfMap.lat + ', ' + centerOfMap.lng + ');">Get Directions</a>' +
                                    '</div>';
                
                infowindow.setContent(gOneContent);
                infowindow.open(map, center_marker);
                map.setCenter(marker.getPosition());
                
            });

            locations = [
                ["Joes Parking Garage","1001 6th St","Sacramento","CA","95814","38.58205649","-121.49857521","parking_garage"],
                ["Mikes Parking Garage","918 5th St","Sacramento","CA","95814","38.5826939","-121.50012016","parking_garage"]
            ];

            infowindow = new google.maps.InfoWindow();

            var marker, i;
            
            var bounds = new google.maps.LatLngBounds();
            
            console.log("found " + locations.length + " locations<br>");
            
            for (i = 0; i < locations.length; i++) {

                var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';
                
                var coordStr = locations[i][5] + "," + locations[i][6];
	            var coords = coordStr.split(",");
	            var pt = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
                bounds.extend(pt);
                
                var location_name = locations[i][0];
                var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];

                marker = new google.maps.Marker({
                    position: pt,
                    animation: google.maps.Animation.DROP,
                    icon: icon_image,
                    map: map,
                    title: location_name,
                    address: location_address
                });
                
                gmarkers.push(marker);

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {

                        var content = '<div id="info_window">'
                                      + '<h2 style="margin:0;">' + locations[i][0] + '</h2>'
                                      + locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4]
                                      + '<div style="clear:both;height:40px;">'
                                      + '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + locations[i][5] + ', ' + locations[i][6] + ');">Get Directions</a>';
                        
                        content += '</div>';
                        
                        content += '</div>';

                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                        map.setCenter(marker.getPosition());

                    }
                })(marker, i));
            }
        
        }
        
        function getDirectionsHere(lat,lng) {

            // GET THE SEARCH ADDRESS

            var address = 'Carmichael, CA';
            console.log('search address: ' + address);

            if (address) {

                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        search_lat = results[0].geometry.location.lat();
                        search_lng = results[0].geometry.location.lng();
                        console.log('search FROM lat: ' + search_lat + ' search FROM lng: ' + search_lng);
                        console.log('search TO lat: ' + lat + ' search TO lng: ' + lng);
                        calculateAndDisplayRoute(directionsService, directionsDisplay);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

                // CHANGE THE ZOOM LEVEL AFTER THE USER SEARCHES TO FIT THE ROUTE WITHOUT SCROLLING

                map.setOptions({ minZoom: 10, maxZoom: 17 });
                map.setZoom(10);

                // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById('directions'));

                calculateAndDisplayRoute(directionsService, directionsDisplay);

                // CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS

                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
                    var selectedMode = document.getElementById('mode').value;
                    directionsService.route({
                      origin: {lat: search_lat, lng: search_lng},
                      destination: {lat: lat, lng: lng},
                      travelMode: "DRIVING"
                    }, function(response, status) {
                      if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                      } else {
                        window.alert('Directions request failed due to ' + status);
                      }
                    });
                }
                
                // CALCULATE THE SECOND ROUTE AND DIRECTIONS (WALKING) BETWEEN PARKINGG GARAGE AND FINAL DESTINATION "CENTER OF MAP"
                
                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    var selectedMode = 'WALKING';
                    directionsService.route({
                      origin: {lat: lat, lng: lng},
                      destination: {lat: centerOfMap.lat, lng: centerOfMap.lng},
                      travelMode: google.maps.TravelMode[selectedMode]
                    }, function(response, status) {
                      if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                      } else {
                        window.alert('Directions request failed due to ' + status);
                      }
                    });
                }

            } else {
                getLocationPopup();
                return;
            }

        }
        
    </script>
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&callback=initMap"></script>

</body>
</html>
    <script type="text/javascript">
        
    </script>
</body>
</html>


Solution

  • You have two issues with your code:

    1. the driving directions polyline is transparent (strokeOpacity: 0)
    2. you have two calculateAndDisplayRoute functions, one for DRIVING, one for WALKING, that won't work in javascript, either give them two different names or make one function to handle the two cases:
        function calculateAndDisplayRoute(start, end, driving) {
          var selectedMode; 
          if (driving) selectedMode = "DRIVING";
          else selectedMode = "WALKING";
          directionsService.route({
            origin: start,
            destination: end,
            travelMode: selectedMode
          }, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              if (driving) {
                directionsDisplayD.setDirections(response);
                var start = new google.maps.LatLng(lat, lng);
                var end = centerOfMap;
                calculateAndDisplayRoute(start, end, false);
              } else directionsDisplayW.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
      }
    }
    

    proof of concept fiddle

    [screenshot driving + walking

    code snippet:

    google.maps.event.addDomListener(window, "load", initMap);
    
    var centerOfMap;
    var geocoder;
    var map;
    var locations;
    var gmarkers = [];
    var search_lat;
    var search_lng;
    var infowindow;
    var directionsDisplayD;
    var directionsDisplayW;
    var directionsService;
    
    function initMap() {
    
      gmarkers = [];
    
      // Set the driving route line
    
      var drivingPathLine = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 1,
        fillOpacity: 1
      });
    
      // Set the walking route line
    
      var walkingLineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 1,
        scale: 3
      };
    
      var walkingPathLine = new google.maps.Polyline({
        strokeColor: '#0eb7f6',
        strokeOpacity: 0,
        fillOpacity: 0,
        icons: [{
          icon: walkingLineSymbol,
          offset: '0',
          repeat: '10px'
        }],
      });
    
      directionsService = new google.maps.DirectionsService();
    
      geocoder = new google.maps.Geocoder();
    
      // SET THE CENTER OF THE MAP
    
      centerOfMap = {
        lat: 38.5803844,
        lng: -121.50024189999999
      };
    
      // ADD THE MAP AND SET THE MAP OPTIONS
    
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: centerOfMap
      });
    
      directionsDisplayW = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        polylineOptions: walkingPathLine,
        map: map,
        preserveViewport: true
      });
      directionsDisplayD = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        polylineOptions: drivingPathLine,
        map: map
      });
    
      var center_marker = new google.maps.Marker({
        position: centerOfMap,
        icon: 'http://maps.google.com/mapfiles/ms/micons/orange-dot.png',
        map: map
      });
    
      center_marker.addListener('click', function() {
    
        var gOneContent = '<div id="info_window">' +
          '<h2>Center Of Map</h2>' +
          '<div style="clear:both;height:40px;">' +
          '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + centerOfMap.lat + ', ' + centerOfMap.lng + ');">Get Directions</a>' +
          '</div>';
    
        infowindow.setContent(gOneContent);
        infowindow.open(map, center_marker);
        map.setCenter(marker.getPosition());
    
      });
    
      locations = [
        ["Joes Parking Garage", "1001 6th St", "Sacramento", "CA", "95814", "38.58205649", "-121.49857521", "parking_garage"],
        ["Mikes Parking Garage", "918 5th St", "Sacramento", "CA", "95814", "38.5826939", "-121.50012016", "parking_garage"]
      ];
    
      infowindow = new google.maps.InfoWindow();
    
      var marker, i;
    
      var bounds = new google.maps.LatLngBounds();
    
      console.log("found " + locations.length + " locations<br>");
    
      for (i = 0; i < locations.length; i++) {
    
        var icon_image = 'http://maps.google.com/mapfiles/ms/micons/parkinglot.png';
    
        var coordStr = locations[i][5] + "," + locations[i][6];
        var coords = coordStr.split(",");
        var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
        bounds.extend(pt);
    
        var location_name = locations[i][0];
        var location_address = locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4];
    
        marker = new google.maps.Marker({
          position: pt,
          animation: google.maps.Animation.DROP,
          icon: icon_image,
          map: map,
          title: location_name,
          address: location_address
        });
    
        gmarkers.push(marker);
    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
    
            var content = '<div id="info_window">' + '<h2 style="margin:0;">' + locations[i][0] + '</h2>' + locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3] + ' ' + locations[i][4] + '<div style="clear:both;height:40px;">' + '<a href="#" id="getDirectionsButton" onclick="getDirectionsHere(' + locations[i][5] + ', ' + locations[i][6] + ');">Get Directions</a>';
    
            content += '</div>';
    
            content += '</div>';
    
            infowindow.setContent(content);
            infowindow.open(map, marker);
            map.setCenter(marker.getPosition());
    
          }
        })(marker, i));
      }
    }
    
    function getDirectionsHere(lat, lng) {
    
      // GET THE SEARCH ADDRESS
    
      var address = 'Carmichael, CA';
      console.log('search address: ' + address);
    
      if (address) {
    
        geocoder.geocode({
          'address': address
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            search_lat = results[0].geometry.location.lat();
            search_lng = results[0].geometry.location.lng();
            console.log('search FROM lat: ' + search_lat + ' search FROM lng: ' + search_lng);
            console.log('search TO lat: ' + lat + ' search TO lng: ' + lng);
            var start = new google.maps.LatLng(search_lat, search_lng);
            var end = new google.maps.LatLng(lat, lng);
            calculateAndDisplayRoute(start, end, true);
            // CHANGE THE ZOOM LEVEL AFTER THE USER SEARCHES TO FIT THE ROUTE WITHOUT SCROLLING
    
            map.setOptions({
              minZoom: 10,
              maxZoom: 17
            });
            map.setZoom(10);
    
            // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 
    
            // directionsDisplay.setMap(map);
            directionsDisplayD.setPanel(document.getElementById('directions'));
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
    
    
        // CALCULATE THE FIRST ROUTE AND DIRECTIONS (DRIVING) BASED ON ADDRESS
    
        function calculateAndDisplayRoute(start, end, driving) {
          console.log('start address coordinates: ' + start.lat() + ', ' + start.lng());
          var selectedMode; // = document.getElementById('mode').value;
          if (driving) selectedMode = "DRIVING";
          else selectedMode = "WALKING";
          directionsService.route({
            origin: start,
            destination: end,
            travelMode: selectedMode
          }, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              if (driving) {
                directionsDisplayD.setDirections(response);
    
                var start = new google.maps.LatLng(lat, lng);
                var end = centerOfMap;
                calculateAndDisplayRoute(start, end, false);
    
              } else directionsDisplayW.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
      }
    }
    html {
      height: 100%;
    }
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-size: 26px;
      font-family: "filson-soft";
    }
    #map_container {
      height: 100%;
    }
    #map {
      width: 100%;
      height: 100%;
      float: left;
    }
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
    <div id="map_container">
      <div id="map"></div>
    </div>