Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

26februari

Statische kaarten met Google Maps

Op steeds meer websites zie je kaarten opduiken die afkomstig zijn van Google Maps. Dit is niet zo verwonderlijk, want Google stelt de code die nodig is om kaartjes in een webpagina op te nemen gratis beschikbaar via de Google Maps API.

Met enkele regels HTML en JavaScript kun je op deze manier snel een interactieve kaart in je webpagina opnemen die precies dezelfde functionaliteit bevat als de volledige versie van Google Maps: in- en uitzoomen, verschuiven, routes plannen, markeringen plaatsen en nog veel meer. Om hiermee te beginnen hoef je alleen een Google Maps API Key op te vragen. Zodra je deze hebt (gratis) kun je je eigen dynamische kaarten maken.

Statische kaarten

Soms is een dynamische kaart echter niet de beste oplossing. Dynamische kaarten met de Google Maps API worden gemaakt met behulp van JavaScript (niet altijd beschikbaar in browsers en/of mobiele telefoons) en het kan soms lang duren voordat de kaart geladen is, zeker bij tragere internetverbindingen. Er is aardig wat overhead vereist voor een dynamische kaart.

Kortom, als je gewoon even snel een kaartje in een pagina wilt plaatsen, is het gebruik van de Google Maps API al snel overkill.

Sinds kort biedt Google echter ook de optie om statische kaarten in je webpagina op te nemen. Deze bieden minder functionaliteit (niet scrollen, niet zoomen), maar laden razendsnel en zijn erg eenvoudig te maken. Hieronder zie je een voorbeeld van een statische Google Map met de locatie van ons kantoor in Doesburg.

Technische achtergronden

Bij een statische kaart kun je gewoon de algemene tag <img> invoegen in de pagina op de plaats waar de kaart moet komen. Het attribuut src=".." mce_src=".." laat je vervolgens verwijzen naar de coordinaten van de kaart, en met het attribuut key="..." geef je je persoonlijk Google Maps API Key op. De totale code voor een kaart zie er dan uit als

<img src="http://maps.google.com/staticmap?center=52.010877,6.137674&markers=52.010877,
6.137674,red&zoom=15&size=480x480&key=jouw_google_key" />

Hierin moet de tekst jouw_google_key natuurlijk worden vervangen door een echte Google Maps API Key. Deze is enkele tientallen tekens lang en ziet er bijvoorbeeld uit als ABQIACFDwlt31CnZMUVmUIoAlicZ0hSuTLwashVo9ZdMxpEBj (dit is een fake-key).

Een statische Google Map maken

Het proces om een statische Google Map te maken bestaat uit verschillende stappen.

  1. Maak een Google account op www.google.com/accounts/. Als je al een Google account hebt voor bijvoorbeeld Gmail of AdSense dan kun je deze accountgegevens gebruiken.
  2. Maak een persoonlijk Google Maps API Key op code.google.com/apis/maps/signup.html.
  3. Ga naar de wizard om een nieuwe statische kaart te maken. Dit is de speciale Google Static Maps Wizard
  4. Typ het adres in waarvoor u de kaart wilt maken en klik op Create Marker Here.
  5. Verander desgewenst de hoogte en breedte van de kaart. De maximale afmetingen zijn 512x512 pixels. Voor een kaart voor een mobiele telefoon geeft u bijvoorbeeld de afmetingen 176x240 op.
  6. Voer de URL van uw site in (dit moet dezelfde URL zijn als u in stap 2 hebt opgegeven, bij het maken van de Google Maps API Key) en klik op Generate Key.
  7. Kopieer en plak de code die wordt gegenereerd naar een <img>-tag in uw HTML-pagina.

Meer informatie

-- Peter Kassenaar
26 februari 2008