Google Map API V3 how to draw walking path like GoogleMaps web applications?

Question

In my application I draw driving route from origin to destination using code like this:

directionsStartService.route(start_request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response); etc...

I added a new features to show intersectionPoints to path that user can do by walking, but I need to draw this paths like this:

https://www.google.it/maps/dir/Via+Giuseppe+Moruzzi,+1,+I-56124+Pisa+PI,+Italia/Dipartimento+di+Chimica+e+Chimica+Industriale/@43.7185239,10.4238179,18z/data=!3m1!4b1!4m14!4m13!1m5!1m1!1s0x12d591c15cbd6abd:0xb773ccba3d93b1d8!2m2!1d10.4222234!2d43.7185511!1m5!1m1!1s0x0:0xe33d73daefe47799!2m2!1d10.427329!2d43.7172621!3e2

Is it possible? I used Maps Javascript API.

Best regards, Gianluca

Answer 1

One option, leveraging the code from the related question: How do you change the color of the dotted line on Google map v3 directions (changing the travelMode to WALKING and adding an extra polyline from the end of the directions result to the location requested would be the code below.

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var m1 = new google.maps.Marker({
    map: map,
    title: "start",
    position: new google.maps.LatLng(43.718526, 10.422241)
  });
  var m2 = new google.maps.Marker({
    map: map,
    title: "end",
    position: new google.maps.LatLng(43.717234, 10.427337)
  });

  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
  calculateAndDisplayRoute(new google.maps.LatLng(43.718526, 10.422241),
    new google.maps.LatLng(43.717234, 10.427337),
    directionsService, directionsDisplay);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('right-panel'));
}
google.maps.event.addDomListener(window, "load", initialize);

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.WALKING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      // directionsDisplay.setDirections(response);
      console.log(end.toUrlValue(6));
      renderDirectionsPolylines(response, start, end);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var walkingPolylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#C83939',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#C83939',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};
var walkingPolylineOptions2 = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#808080',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#808080',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};

function renderDirectionsPolylines(response, start, end) {
  var legs = response.routes[0].legs;
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      if (steps[j].travel_mode == google.maps.TravelMode.WALKING) {
        stepPolyline.setOptions(walkingPolylineOptions)
      }
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      stepPolyline.setMap(map);
    }
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(start, stepPolyline.getPath().getAt(0)) > 1) {
    // add "dotted line"
    var extraLine1 = new google.maps.Polyline(walkingPolylineOptions2);
    extraLine1.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
    extraLine1.setMap(map);
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(end, stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1)) > 1) {
    // add "dotted line"
    var extraLine2 = new google.maps.Polyline(walkingPolylineOptions2);
    extraLine2.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
    extraLine2.setMap(map);
  }
  map.fitBounds(bounds);
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>