KnockoutJS by Example

Displaying route between markers

The last feature of the application is to draw a route between the two address markers. To implement this feature, we will:

• Create and initialize the direction service
• Request routing information from the direction service and draw the route
• Update the view to add a button to get directions

Let's get started by creating and initializing the direction service. We will use the google.maps.DirectionsService class to get the routing information and the google.maps.DirectionsRenderer class to draw the route on the map. Create two attributes in the MapsApplication module—one for directions service and the other for directions renderer:

/* the directions service */ var directionsService; /* the directions renderer */ var directionsRenderer; ...