Google Maps API V3 routebeschrijvingen

Geschreven door: Dieter Verjans Dieter Verjans

Routebeschrijvingen genereren via de Google Maps API lukt sinds versie 2. Eind oktober werden de routebeschrijvingen voor versie 3 gelanceerd. In de blogpost worden de verschillen tussen versie 2 en 3 dan ook in beeld gebracht.

Google Maps API V3 routebeschrijvingen

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:

Parameter Gebruik
origin verplicht, kan een string (bv 'Houthalen, België') of een LatLng waarde zijn
destination verplicht, idem origin
travelMode verplicht, hiermee duid je aan welk vervoersmiddel er gebruikt zal worden.
google.maps.DirectionsTravelMode.DRIVING voor auto en google.maps.DirectionsTravelMode.WALKING voor voetganger
unitSystem optioneel, standaard wordt het stelsel gebruikt van het het land van herkomst.
google.maps.DirectionsUnitSystem.METRIC voor het metrisch stelsel (in kilometers) en google.maps.DirectionsUnitSystem.IMPERIAL voor het imperiaal stelsel (in mijlen)
waypoints optioneel, een array van punten waar de route langs moet gaan.
bv:
						
waypoints: [
	{
	  location:"Rochefort, België", 
	  stopover:false
	},{
	  location:"Houthalen, België",
	  stopover:true
	}
]						
						
					
Een waypoint bestaat uit een location (string of LatLng) en stopover (boolean). Met stopover kun je aanduiden of de route hier moet stoppen, deze wordt dan opgesplitst in meerdere routes.
provideTripAlternatives optioneel, zet deze parameter op true en indien mogelijk zullen er alternatieve routes getoond worden
region optioneel, de resultaten kunnen beïnvloed (vertaling) worden door het land van herkomst. Via deze parameter kun je de region (landcode) instellen waarop de resultaten gebaseerd moeten worden

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.

3 Reacties op deze blogpost:

Rob Frederix
Door Rob Frederix op 22 november 2009

Ik gebruikte versie 2 van Google Maps API al vaker binnen onze ontwikkeling, dus bedankt voor deze nuttig informatie. Nog even de classes doornemen en we hebben het weer onder de knie, bedankt Google en @DieterVerjans

Isabelle Plessers
Door Isabelle Plessers op 23 november 2009

Zeer interessante blogpost, ga dit zeker eens gebruiken. Hopelijk zal ik onze ontwikkeling hierdoor nog wat gebruiksvriendelijker kunnen maken naar de eindgebruiker toe.

Dave Peters
Door Dave Peters op 22 mei 2012

Over:

travelMode verplicht, hiermee duid je aan welk vervoersmiddel er gebruikt zal worden.
google.maps.DirectionsTravelMode.DRIVING voor auto en google.maps.DirectionsTravelMode.WALKING voor voetganger

Is there a possiblity to set for BIKING and BUS too or is this function limited too DRIVING and WALKING only

{* Remarketing tag *}