Artikelen

Van postcode naar geolocatie

Gepost door joost op 15 mrt 2010 in de categorie Google HTML Algemeen
Stel dat je een database hebt waarin je naast postcodes ook latitude (LAT) en longitude (LNG) wil opslaan, hoe doe je dat dan? Je kunt natuurlijk betalen aan een bedrijf dat de koppeling tussen geolocaties en postcodes verzorgt, maar het kan slimmer. Google biedt deze functionaliteit namelijk gratis aan via zijn API. Het enige dat je hoeft te doen is de GMaps API key aanvragen en de onderstaande instructies volgen... EASY!


Code voor in de head
Om te beginnen moet je een Google Maps API Key aanvragen. Als je dit hebt gedaan zie je bovenaan de pagina je API Key staan. Dit is een lange reeks met tekens, waarvoor we in het voorbeeld 'AAAAAAAAAAAAAAA' gebruiken. Voor iedere domeinnaam moet je een aparte Google Maps API Key aanvragen. Vervolgens maken we een HTML file met het volgende in de head:

  1. <head>
  2. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
    key=AAAAAAAAAAAAAAA" type="text/javascript" ></script>
  3. <script language="JavaScript" src="address_script.js"></script>
  4. </head>

De inhoud van de address_script.js is ietwat complex. Deze kun je gewoon downloaden en hergebruiken. De drag en move functionaliteit kun je er eventueel nog uitslopen.


Code voor in de body tag
Vervolgens zetten we in de body dat Google Maps moet worden in- en uitgeladen (middels de load en GUnload functie) en dat het adres moet worden geupdate (voor het hypothetische geval het postcodeveld al gevuld is).

  1. <body onLoad="load(); updateAddress();" onUnload="GUnload();">


Het formulier met de kaart
Tenslotte maken we een formolier met een latitude en longitude veld. Omdat deze getallen de gebruiker niets zeggen, zetten we deze op type='hidden'. Het postcodeveld noemen we address. Dit doen we omdat het google niet uitmaakt of je hier nu een postcode of een address intypt. De  address_script.js file voegt aan de ingevulde postcode ', Netherlands' toe om ervoor te zorgen dat de postcode-resultaten Nederlandse postcodes zijn. Zou je dat niet doen, dan zou 1074VJ bijvoorbeeld niet in Nederland liggen, maar in Louisville in West-Virginia. Tenslotte voegen we een div toe waar we de kaart in plaatsen. Deze div krijgt als id 'map'. De rest doet de JavaScript file. Uiteraard is het mooi om deze div nog een beetje opmaak mee te geven, zoals je ziet in het onderstaande voorbeeld.

  1. <form>
  2. <label>Postcode</label>
  3. <input type="hidden" name="lat" id="lat" />
  4. <input type="hidden" name="lng" id="lng" />
  5. <input type="text" id="address" name="address" value=""
    onBlur="updateAddress();" />
  6. <div id="map" style="width: 290px; height: 200px; display: none; border:
    1px solid black;"></div>
  7. </form>

Bekijk het LIVE voorbeeld van postcode naar geolocatie op bewired en wees overtuigd!





Terug