Google Maps API part 2 Bicycle Routing

My daughter rescheduled today's ride to tomorrow so I decided to spend more time looking at the Google Maps API. I found that routing and elevation profiles are easy too. If you have completed yesterday's tutorial, take a look at this.

I want to be able to click on two locations on the map and have the recommended cycling route displayed. To do this we need to define two map marker objects to show the start and end of the route and a directionsService object to get the route. Add the following variable declarations before the initialize function.

var directionsService = new google.maps.DirectionsService();
var startMarker, endMarker;

Now the click event handler we wrote in the previous tutorial needs to be extended. The first time we click the startMarker will be null so we will create it at the click location. The second time we click the startMarker will not be null so we will create the endMarker at the click location and then calculate the route. Like geocoding, routing is also asynchronous so we will make the request and tell Google Maps where to send the results. Add the following code to the end of the showaddress function (ideally we would rename it at this point but for simplicity we won't).

if (startMarker != null && endMarker != null)
{ // Clear the existing route, if any
  startMarker=null;
  endMarker=null;
  directionsRenderer.setMap(null);
}

if (startMarker == null)
{ // No markers so create the startMarker
  var markerOptions={position:event.latLng, map:map, title:"Start"};
  startMarker = new google.maps.Marker(markerOptions);
}
else if (endMarker == null)
{ // Start marker exists so create end marker and request route
  var markerOptions={position:event.latLng, map:map, title:"End"};
  endMarker = new google.maps.Marker(markerOptions);
  var DirectionsRequest = { origin: startMarker.position,
     destination: endMarker.position,
     travelMode: google.maps.TravelMode.BICYCLING,
     unitSystem: google.maps.UnitSystem.METRIC,
     avoidHighways: true,
     avoidTolls: true };
  directionsService.route(DirectionsRequest, displaydirections);
}

Now we need to add the routing callback function for Google Maps to pass the results to. It will use a directions rendering object to draw the route. Add the following declaration below the directionsService declaration.

var directionsRenderer = new google.maps.DirectionsRenderer();

Add the following function below the showaddress function.

function displaydirections(result, status)
{ if (status == google.maps.DirectionsStatus.OK)
  { startMarker.setMap(null); // the renderer displays its own markers
    endMarker.setMap(null);
    directionsRenderer.setDirections(result);
    directionsRenderer.setMap(map);
  }
  else
    alert("Plotting route:" + status);
}

Run the page and click on two locations. The recommended route between those locations is shown. Note how the map redisplays with the cycling layer displayed because we specified TravelMode.BYCYCLING. It would be nice if the map originally displayed in cycling mode. Bicycling mode is added as a layer. Add the following code to the end of the initialize function.

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);