Google Maps integreren op je website
Google Maps, één van de vele services aangeboden door Google, is vandaag niet meer weg te denken uit het hele internetgebeuren. Vaak wordt Google Maps enkel gebruikt als locatieaanduiding, maar Google Maps heeft veel meer in zijn mars. Om Google Maps te integreren binnen je website is er de Google Maps API.
Functionaliteiten Google Map
Google Maps biedt volgende functionaliteiten aan:
- geïntegreerde zoekresultaten: wanneer je bijvoorbeeld zoekt op “Inventis” worden de meest relevante resultaten onmiddellijk weergegeven op de kaart
- versleepbare kaarten: met een simpele klik- en sleepbeweging kun je doorheen de kaart navigeren en nabije gebieden bekijken
- satellietbeelden: satellietweergave van de kaart met een mogelijkheid tot in- en uitzoomen
- terreinkaarten: landschapskenmerken zoals bergen en bebossing worden op de kaart weergegeven, dit met hoogte-arcering
- street view: bekijk sommige kaarten vanop straathoogte in 360° en navigeer doorheen de kaarten
- gedetailleerd routebeschrijvingen: geef een adres op en Google Maps brengt de route in kaart, pas de route aan door simpel te klikken en slepen.
Elk van deze functionaliteiten is gemakkelijk te gebruiken met toetsenbord en muis. Er zijn zelfs sneltoetsen aanwezig. Met de pijltjestoetsen kunt u over de kaart schuiven, grotere stappen zijn mogelijk met HOME, END, PAGE UP en PAGE DOWN. In -en uitzoomen is ook kinderspel. Op het toetsenbord met + of -, met het scrollwiel van de muis of links dubbelklikken om in te zoomen en rechts dubbelklikken (CTRL + dubbelklikken voor de Mac-gebruikers onder ons) om uit te zoomen.
Google Maps verkennen? Klik hier.
Hoe de Google Maps API gebruiken
Om een Google Map te kunnen integreren op je website dien je eerst een Google Maps API key aanvragen. Dit kan op http://code.google.com/apis/maps/signup.html.
Na de aanvraag van een Google Maps API key krijg je volgende boodschap te zien :

Het belangrijkste uit deze boodschap is de key, deze is noodzakelijk voor de werking van Google Maps op je website.
Verder staat er ook een voorbeeld van een integratie. Dit is slechts een voorbeeld van een snelle en gemakkelijke integratie. De Google Maps biedt een grote waaier van mogelijkheden zoals animatie, markers, map overlays, routebeschrijvingen, ...
Elk van deze mogelijkheden en voorbeelden van Google Maps integraties kun je terug vinden op http://code.google.com/apis/maps/documentation/examples/index.html
Het hele Google Maps gebeuren is gebaseerd op JavaScript, maar sinds kort is er ook een API voor Flash gereleased. Meer info hierover op http://code.google.com/apis/maps/documentation/flash/
Alle informatie over de Google Maps API, voorbeelden, docs kun je terugvinden op http://code.google.com/apis/maps/
Geen Javascript of Flashgoeroe ?
Ben je geen Javascript of flash guru, maar je wilt toch een Google Maps op je website?
Geen enkel probleem, met een google-account kun je zonder problemen een locatie toevoegen op de kaart. Wanneer je ingelogd bent klik op mijn kaarten op http://maps.google.be

Hier kun je dan een nieuwe kaart toevoegen door het icoontje
aan te klikken en te slepen naar de gewenste locatie op de kaart. Het volgende scherm zal verschijnen waar je een naamgeving en korte omschrijving kunt toevoegen.

Wanneer je de locatie hebt toegevoegd kun je rechtsbovenaan op link
klikken wanneer onderstaande scherm zichtbaar wordt.

Kopieer en plak de code van het veld HTML in website plakken in je website en Google Maps werd geïntegreerd op je website zonder enige kennis van Javascript of Flash.
Deze week nieuwe update Google Maps API gereleased
Deze week is er een nieuwe update vrijgegeven van de Google Maps API. Vanaf nu is er ook reverse geocoding mogelijk. Geocoding wil zeggen het vertalen van een adres (bv: Weg naar Zwartberg 85/3, 3530 Houthalen) naar een punt (coördinaten) op de kaart. Reverse geocoding doet het tegenovergestelde, het vertalen van een punt (coördinaten) naar een leesbaar adres.
Projecten uit onze portfolio met een Google Maps integratie
- Take-a-trip.eu
- Castlelord.eu
- Belisol.nl
- Kaazo.be
- 3hoogleuven.be
- Drukkerijpietermans.be
- Alvermanneke
- Immo-town.be
- Meer projecten? Bekijk dan zeker onze portfolio .



6 reacties tot nu toe
Liviooo zei 3 jaar geleden:
Fréderic Cox zei 3 jaar geleden:
Dieter Verjans zei 3 jaar geleden:
Dieter Verjans zei 3 jaar geleden:
webdesign zei 3 jaar geleden:
Groeten,
Mark
Wouter Van den Neste zei 3 jaar geleden: