Afstandsberekening wordt van oudsher gedaan met een postcode tabel. Echter, de prijzen voor een postcode tabel beginnen vanaf zo’n € 600,=. Misschien niet zo interessant voor een hobby-matige website of een klein koeriersbedrijf.
Met Google Maps kun je ook leuke dingen doen, mits er een “wegennet” beschikbaar is voor jouw omgeving. In onderstaand voorbeeld is die omgeving Nederland en Google Maps is goed voorzien wat betreft Nederlandse geodata.
1. API sleutel
Allereerst moet je een API sleutel hebben voor jouw domein. Deze kun je hier aanvragen: http://code.google.com/apis/maps/signup.html.
Vervolgens roep je in <HEAD>-tag de volgende code aan:
<script src=”http://maps.google.nl/maps?file=api&v=2&key=JOUW EIGEN API SLEUTEL” type=”text/javascript”></script> om je browser te vertellen dat we met Google Maps gaan werken.
Open daarna een nieuwe <script type=”text/javascript”>-tag om de daadwerkelijke code te schrijven.
2. Javascript functies
In de nieuwe SCRIPT-tag gaan we het GDirections-object initialiseren:
function initialize()
{
if (GBrowserIsCompatible())
{
gdir = new GDirections();
GEvent.addListener(gdir,"load", set_distance);
}
}
Omdat we GEEN routebeschrijving willen en GEEN kaartje willen tonen, roepen we GDirections aan zonder de (twee) gebruikelijke parameters.
Vervolgens voegen we een addListener-functie toe. Deze functie roept de functie set_distance aan, die straks de daadwerkelijke afstand in een DIV gaat stoppen. Omdat GDirections asynchronous werkt, moeten we dat hier al doen. Diegenen die reeds met Ajax hebben gewerkt, weten wat asynchronous requests zijn, voor meer info: http://econym.org.uk/gmap/async.htm.
Vervolgens roepen we de load-method van het aangemaakt GDirections-object aan. Deze load-methode kan voorzien worden van diverse parameters, om o.a. aan te geven of de afstand berekend moet worden voor de auto of voor de wandelaar en of de snelwegen vermeden moeten worden. Deze parameters zijn de zgn. GDirectionsOptions.
De load-methode wordt aangeroepen in een functie setDirections, die als input 3 parameters vereist: het vertrekadres, het bestemmingsadres en de lokale settings. De lokale setting is in ons geval altijd “nl”, maar voor de volledigheid heb ik deze variabele erin gelaten.
function setDirections(fromAddress, toAddress, locale)
{
gdir.load("from: " + fromAddress + " to: " + toAddress, {locale: locale, travelMode:G_TRAVEL_MODE_DRIVING,avoidHighways: false} );
}
Als laatste functie maken we de set_distance-functie, die tijdens de initialisatie van het object via de addListener wordt aangeroepen:
function set_distance()
{
document.getElementById("afstand").innerHTML = gdir.getDistance().html;
}
Sluit vervolgens de SCRIPT-tag af (</script>), we zijn klaar met de Javascript. We gaan nu de FORM maken.
3. Formulier
Roep de GDirection initialize-functie aan in de <BODY>-tag:
<body onload="initialize()" onunload="GUnload()">
Voeg daarna het onderstaande formulier toe:
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, 'nl'); return false">
<table border="0">
<tbody>
<tr>
<td>van: </td>
<td><input id="fromAddress" name="from" size="40" type="text" value="zuiddijk 415, zaandam" /></td>
<td>naar: </td>
<td><input id="toAddress" name="to" size="40" type="text" value="dam 1, amsterdam" /></td>
<td><input name="submit" type="submit" value="Bereken afstand!" tabindex="1" /></td>
</tr>
</tbody></table>
</form>
Ik heb in het voorbeeld standaard waardes ingevuld voor het vertrek- en het bestemmingsadres. Dat is natuurlijk niet verplicht.
Wel raad ik aan om via Javascript te controleren of de gebruiker echt iets (zinnigs!) invult in deze twee velden. De GDirections-functie van Google Maps accepteert strings, d.w.z. alleen de postcode invullen werkt, maar ook de combinatie adres, postcode, plaatsnaam.
Als de adres-velden zijn ingevuld, stuurt de submit-button deze twee waardes naar de setDirections-functie, die vervolgens een request naar de Google servers doet en output terugstuurt. Uit deze output, kun je via de getDistance-methode de daadwerkelijke afstand filteren.
Deze afstand wordt via de set_distance-functie onderaan het formulier geplaatst in de DIV met het id “afstand”.
Let op: de afstand die wordt teruggegeven is een string. Behalve het kilometer-aantal staat er ook een spatie en het woordje “km” in. Als je deze afstand wilt gebruiken om transportkosten te berekenen, kun je misschien beter gdir.getDistance().meters in plaats van gdir.getDistance().html gebruiken.
Google neemt geen verantwoordelijkheid voor de nauwkeurigheid van de route. Ik heb resultaten vergeleken met andere online routeplanners zoals b.v. routenet.nl.
Hieruit blijkt dat Google Maps standaard de SNELSTE route neemt, dus niet altijd de KORTSTE, met andere woorden: er wordt zo snel mogelijk een snelweg gezocht.
Je kunt goochelen met de avoidHighways-parameter, maar dat levert ook niet altijd de gewenste resultaten op…
4. Voorbeeld
5. Download
Bovenstaande voorbeeld is heel basic. Je moet er zelf toevoegingen aan doen, om het passend te krijgen voor jouw kilometerstand-, vervoersbedrijf- of wandelroute-applicatie. Je kunt hier een HTML bestand downloaden, waarin het voorbeeld is toegepast.
. Klik hierop en een RSS feed in de vorm van