Google Maps API

Application Programming Interface

naar de slides

 

Google Maps
JavaScript object
JavaScript object

Leerdoelen

  • Objecten
  • Google Map API verkennen
  • Mogelijkheden met API

Opdracht

Google Maps tutorial
Google Maps tutorial

 

2. API key beperken

Voorkom dat anderen jouw key in hun pagina gaan gebruiken

 

3. API betaling instellen

De key kan echt werken als er betaling wordt ingesteld. De eerste 300 euro per jaar zijn gratis. Views van jouw kaart leveren kosten op.
Daarom is die beperking zo belangrijk.
Ook kun je de key bij mogelijk misbruik omzetten.

 

4. Kaart op juiste plaats

De kaart kan inzoomen en uitzoomen en het punt waarop gecentreerd wordt, kan worden opgezocht en ingesteld. Plek uitzoeken met: https://www.latlong.net/

 

5. Marker plaatsen

Een marker kun je zelf op de kaart plaatsen Plek uitzoeken met: https://www.latlong.net/

 

6. Marker vormgeven

Je kunt een andere afbeelding in plaats van de standaard marker plaatsen

 

7. Info-venster

Een marker kan worden uitgebreid met een info-venster.
Deze verschijnt bij een klik op de marker.
https://developers.google.com/maps/documentation/javascript/infowindows

 

8. pushen op GitHub

Vóór de volgende stap eerst op GitHub. Dat kan eenvoudig met de Terminal.
Zet hem private en deel met Theo-denBlanken.
Lever de link in. (Live versie in README.md)

 

9. Meerdere markers plaatsen

Voor meerdere markers eerst een functie maken, die objecten als parameter hebben.
Dan kun je sneller de functie aanroepen, met verschillende objecten als argument.
Pas de functie met een if-conditional aan voor het geval de marker een andere afbeelding moet krijgen.

 

Alteratieve video instructie

Asl je tussentijds commits op GitHub plaatst mag je deze tutorial ook volgen

 

wordt vervolgd....

Credits

Deze presentatie is gemaakt met gebruik van:

  1. WebSlides
  2. Video tutorial Brad Traversy
  3. documentatie WebSlides