Sinds versie 2 van Google Maps API kun je routebeschrijvingen genereren. Na de release van versie 3 in mei werd eind oktober de release van de Directions class aangekondigd.
Er zijn wat zaken aangepast en toegevoegd ten opzichte van versie 2. Met deze blogpost zal ik de verschillen dan ook even aankaarten.

V2 vs V3

Google Maps wordt hoofdzakelijk gebruikt om de bezoeker uit te leggen hoe van punt A naar punt B te gaan. Bij Google heeft men ervoor gekozen om de routebeschrijvingen een grondige make-over te geven in plaats van deze simpelweg te porten van versie 2 naar 3.

Het GDirections object werd gesplitst over 2 afzonderlijke classes die perfect samenwerken om je routebeschrijving te kunnen genereren. Enerzijds is er de DirectionsService class die de queries zal doorsturen naar de servers en een gepast JSON reponse zal terugsturen. Deze JSON reponse zal door de DirectionsRenderer class verwerkt worden tot de uiteindelijke routebeschrijving.
Ook werd het "load" event uit v2 weggelaten, ter vervanging is er nu een callback functie die de gegenereerde route zal doorgeven aan de DirectionsService.

Verder is het mogelijk om je resultaten te beïnvloeden via nieuwe opties in v3. Vaak is het mogelijk om op verschillende manieren van punt A naar punt B te reizen, daarom biedt v3 ook de mogelijkheid aan om alternatieve routes - indien deze er zijn - weer te geven op de kaart via de optie provideTripAlternatives.
Via de optie unitSystem kun je kiezen of de resultaten in het metrisch (kilometers) of het imperiaal (mijlen) stelsel weergegeven worden.

Een voorbeeld

Hieronder kun je een stuk code vinden uit een voorbeeld om een routebeschrijving te genereren.

			
//declare variables
var directionDisplay;
var directionsService;
var map;
var map_canvas;
var directionsPanel;

function initialize() {
	//declare elements
	map_canvas  = document.getElementById("map_canvas");
	directionsPanel  = document.getElementById("directionsPanel")

	//declare DirectionsService and DirectionsRenderer
	directionsService = new google.maps.DirectionsService();
	directionsDisplay = new google.maps.DirectionsRenderer();
	
	//set inventis position
	var inventis = new google.maps.LatLng(51.022947, 5.464969);
	
	//set map option
	var mapOptions = {
		zoom:12,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: inventis
	}
	//declare map
	map = new google.maps.Map(map_canvas, mapOptions);
	
	//set DirectionsRenderer
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(directionsPanel);
	
	//set inventis marker
	marker = new google.maps.Marker({
		position: inventis,
		map: map,
		icon: 'googlemapsicon.png'
	});
	
	//calculate route
	calcRoute();
}

function calcRoute() {
	//fetch start and end point
	var start = document.getElementById("start").value;
	var end = document.getElementById("end").value;
	
	//declare request
	var request = {
		origin:start, 
		destination:end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING,
		provideTripAlternatives: true
	};
	
	//generate route by request
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}
			
		

initialize()

Via deze functie gaan we de DirectionsService en DirectionsRenderer koppelen aan onze Google Maps. Deze functie dient aangeroepen te worden nadat de pagina volledig geladen is.

calcRoute()

Deze functie zal de waardes uit de dropdown velden ophalen en via de DirectionsService een request doen naar de Google Maps servers. De response van deze request koppelen we dan aan de DirectionsRenderer zodat de routebeschrijving in het gewenste element op de website getoond wordt.

De request kan bestaan uit volgende parameters:

						
waypoints: [
	{
	  location:"Rochefort, België", 
	  stopover:false
	},{
	  location:"Houthalen, België",
	  stopover:true
	}
]						
						
					

Klik hier om het voorbeeld te bekijken.

Meer info over de release en aanpassingen over de routebeschrijving binnen V3 kun je nalezen op de Googlegeodevelopers blog.