Google Maps toevoegen: API of iFrame?

Hoe kun je Google Maps toevoegen aan je website?

Toen Google Maps op 8 februari 2005 werd gelanceerd, hadden zelfs de verantwoordelijken van het bedrijf geen vermoeden hoezeer de online kaartendienst ons dagelijks leven zou veranderen. Al ruim tien jaar voorziet de webservice zijn gebruikers van satellietbeelden van plaatsen over de hele wereld en sinds de opkomst van mobiele telefoons is Google Maps al helemaal onmisbaar geworden. Nog thuis wordt heel eenvoudig uitgezocht hoe ver het gekozen hotel van het strand af ligt of welke hippe restaurants zich in de buurt bevinden. Google Maps is onderweg regelmatig een redder in nood en wijst je de weg naar je bestemming – te voet, op de fiets of met de auto. Zelfs de vertrektijden van de trein en de bus kunnen worden opgevraagd.

Als websitebeheerder kun je van de diensten van Google gebruikmaken door (gedeeltes van) Google Maps op je website te plaatsen. Hierin kun je bijvoorbeeld de locatie van je bedrijf, hotel, winkel of praktijk markeren of een routebeschrijving toevoegen, zodat je bezoekers je eenvoudig kunnen vinden. Hoe kun je Google Maps integreren in je site en met welke voorwaarden moet je rekening houden voor het commerciële gebruik?

Google Maps toevoegen aan je website: een account aanmaken en eigen kaarten maken

Om een kaart te maken, heb je een Google account nodig. Heb je deze nog niet, dan kun je een Google-account aanmaken. Na het inloggen open je je Google apps en start je de kaartendienst met een klik op “Maps”.

Door op ‘Maps’ te klikken, opent de kaartendienst van Google (bron: Google.com)

Vervolgens zie je in het navigatiemenu verschillende configuratiemogelijkheden waarmee je bijvoorbeeld fietsroutes of de routes van het openbaar vervoer kunt integreren en er staan tips en trucs. Via het menupunt ‘My Maps’ start je de Map-editor waarmee je je eigen kaart kunt maken. Je kunt ook gebruikmaken van reeds bestaande kaarten.

Google Maps met iFrame insluiten

Zodra je je eigen kaart naar wens hebt gemaakt, integreer je die in je website. Daarvoor open je het navigatiemenu en selecteer je ‘Kaart delen of insluiten’. Google Maps maakt meteen een HTML-code aan die in een pop-upscherm verschijnt:

Zodra je je kaart klaar hebt, kun je deze met behulp van de HTML-code in je website insluiten (bron: Google.com)

Daarna kopieer je deze code in de broncode van je website. Met het aantal pixels in de code (in het voorbeeld 640 x 480 pixels) regel je de grootte van de kaart. Omdat de ingesloten HTML-code een zogenaamd iFrame-element is, wordt de kaart telkens parallel aan het openen van jouw website door de server van Google geladen, zonder dat jouw webserver hierbij betrokken is. Deze inline frame technologie (iFrame) wordt door bijna alle browsers ondersteund en wordt bijvoorbeeld ook gebruikt bij het insluiten van social media-elementen.

De integratie van Google Maps via iFrame is alleen toegestaan voor privégebruik. Wanneer je Google Maps wilt weergeven op een commerciële website, moet je de service integreren met de officiële Google Maps API’s.

Kaarten integreren met Google Maps API’s

Het insluiten van Google Maps op een commerciële website is met behulp van een Google Maps API (application programming interface) iets complexer dan met de iFrame-technologie. Tegelijkertijd biedt het gebruik van deze programmeerinterface ontwikkelaars nieuwe mogelijkheden om Google Maps te integreren in je site. Bij WhatsApp is het dankzij zo’n API bijvoorbeeld mogelijk om je vrienden de exacte locatie op een kaart te sturen. En ook de webservice planefinder.net die alle vertrek- en aankomsttijden van het vliegverkeer wereldwijd toont, maakt gebruik van verschillende Google Maps API’s.

Om een overzicht van de verschillende API’s te krijgen en uit te vinden welke programmeerinterfaces het beste passen bij jouw webproject is het raadzaam om de Google API Picker te raadplegen.

Google Maps insluiten via API

Het werken met Google Maps API’s is niet geschikt voor onervaren gebruikers zonder specifieke programmeerkennis. Een degelijke kennis van JavaScript helpt in het bijzonder bij het insluiten van complexe kaarten.

1. Net als bij het insluiten van Google Maps via iFrame moet je voor het gebruik van de API’s een Google-account hebben. Kies de API die jij wilt gebruiken en vraag een sleutel aan. In dit voorbeeld hebben wij gekozen voor de JavaScript API.
   
   


De Google Maps JavaScript API biedt een uitstekende mogelijkheid om je eigen kaart te integreren (bron: https://developers.google.com)




2. Vervolg het proces door op ‘GET A KEY’ te klikken, de naam van je project in te voeren en de gebruikersvoorwaarden te accepteren. Wanneer je op ‘CREATE AND ENABLE API’ klikt, krijg je de Google Maps API-key te zien.
3. De Google Maps API key kun je meteen gebruiken voor je website. Om te weten wat je in je HTML-document moet invoeren en waar de sleutel moet worden geïntegreerd, heeft Google een stap-voor-stap handleiding gemaakt.

Wat kost het gebruik van Google Maps API’s?

Het gebruik van Google programmeerinterfaces is niet altijd aan kosten verbonden. Het hangt ervan af wat voor een soort website of app je beheert. Bij bijvoorbeeld projecten die iedereen gratis kan gebruiken, betaal je voor de meeste API’s alleen als je website meer dan een bepaald aantal bezoekers per dag of per maand heeft. Wanneer je website of app de locatie van mensen of objecten volgt, kost het integreren van Google Maps API’s altijd geld. Een overzicht van de verschillende prijs- en gebruiksmodellen vind je hier. Op deze overzichtspagina kun je ook de contactinformatie vinden van het verkoopteam van Google als je twijfelt welk model het beste bij jouw project past.

Google Maps toevoegen aan je website: een kwestie van knowhow en toepassing

De voordelen van het integreren van de Google online kaartendienst in je eigen website zijn duidelijk: je laat je bezoekers eenvoudig zien hoe ze je kunnen vinden, terwijl de webserver van Google het werk doet en het jouw webserver geen extra capaciteit kost. Om deze reden heeft Google in 2012 het professionele gebruik voor webprojecten met veel bezoekers gedeeltelijk betaald gemaakt. Voor deze projecten, net als voor commerciële apps en websites, is het gebruik van Google Maps API’s verplicht voor het insluiten van de kaarten.

Wanneer je in de kaart meer dan alleen een markering van je locatie wil, heb je kennis nodig van JavaScript en HTML. Wie Google Maps wil integreren in een site die alleen voor privédoeleinden wordt gebruikt en ook geen grote hoeveelheden bezoekers verwacht, kan voor het insluiten het best gebruikmaken van het eenvoudige iFrame.