Uw browser is sterk verouderd. Upgrade je browser voor een betere gebruikers ervaring en veiligheid.

Artikels

Google Maps API V3 routebeschrijvingen

Geschreven door

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.