Google Maps API V3: De kaart krijgen

Door Wouter de Jong – Waldio
Google MapsElk bedrijf wil op zijn website graag laten zien waar het gevestigd is. Hiervoor natuurlijk het best een kaart gebruiken. Google Maps kaarten kun je makkelijk inladen met een iFrame. Maar wat als je meerdere punten wilt die je bijv. beheert vanuit een xml file? En wat als je de kaart naar je eigen wensen wilt aanpassen? In deze tutorial reeks van 5 lessen gaan we kijken hoe we zo’n kaart kunnen krijgen en hoe we dingen kunnen toevoegen en verwijderen.

Google Maps API V3
Om een kaart op je website te krijgen kun je het best werken met de Google Maps API, deze is vernieuwd tot versie 3. Het voordeel hiervan is dat het makkelijker te begrijpen is. De API werkt met JavaScript.

We zullen maar meteen beginnen met het inladen van de api:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
    <title>Google Maps API V3</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>
  <body>
  </body>
</html>

In regel nr. 6 laden we de api in. We zien op het eind dat we een parameter kunnen instellen: sensor. Dit is voor als je een kaart maakt voor mobiele browsers. Als de sensor op true staat wordt de positie van de mobiel bepaald. Aangezien we in deze tutorial voor computers gaan werken hebben we dit uit gezet.

Het instellen van verplichte velden

Laten we nu zelf een JavaScript pagina maken, we noemen hem maps.js. Deze laden we ook in in de index.html. In deze pagina zullen we alle code zetten die nodig is voor de kaart.
Het maken van de kaart moet je altijd in een functie zetten. Bij de body tag moet je met onLoad deze functie aanroepen.
We moeten eerst een paar dingen aanmaken voordat we kunnen beginnen met het inladen van de kaart:
– De coördinaten voor het centreren
– De verplichte opties die je moet instellen

Coördinaten moeten we altijd door de google maps functie LatLng halen. Laten we dat dus eerst doen:

function getMap() {

  var centerMap = new google.maps.LatLng(52.18958, 5.29524);

}

We zien hier meteen dat elke functie die we vanaf nu aanroepen moet beginnen met google.maps. Het woordje new ervoor betekend dat dit weer een nieuw coördinaat is, dit hoeft niet bij elke functie.

Op opties die we verplicht moeten toevoegen zijn:
center = De coördinaten waarop de kaart moet centreren
zoom = Het zoom niveau, dit is een getal.
MapTypeId = Dit is de map type, bijv. terrein, kaart, satelliet.

Deze opties stop je altijd in een array. Dit kan je op 2 manieren doen:
Met de push functie. Dit gebruiken we in dit geval niet
Door de {} te gebruiken en daartussen alles te zetten.

De opties variabele wordt dan:

var optionMap = {
  center: centerMap,
  zoom: 9,
  MapTypeId: google.maps.MapTypeId.ROADMAP
}; 

Bij de optie center zetten we de variabele die we niet hebben gemaakt. Het zoom level hebben we op 9 gezet, dit is altijd een beetje spelen om het gewenste resultaat te krijgen.
MapTypeId is iets ingewikkelder. Hierin moeten we namelijk een functie zetten. In dit geval hebben we de straten kaart geselecteerd met ROADMAP. Andere instellingen:
SATELLITE = Dit is de satelliet kaart.
HYBRID = Combinatie van Satellite en Road map.
TERRAIN = De terrein kaart.

Het maken van de kaart

Laten we nu de kaart aanmaken. Dit doen we met de functie Map. Deze functie moeten we 2 parameters meegeven:
– Het element waarin de kaart moet komen.
– De opties van de kaart.
Laten we eerst in onze html pagina een div maken met het id map:

<div id="map"></div>

Deze roepen we in JavaScript aan met document.getElementById(). In ons geval komt hier dus map te staan. De opties hebben we hierboven al in de var optionMap gestopt en die kunnen we dus gewoon aanroepen.
Laten we nu de Map functie geven aan de var map:

var map = new google.maps.Map(document.getElementById('map'), optionMap);

Nu moeten we de div#map nog een height en width meegeven in CSS en je hebt je eerste basis kaart.
De totale code van deze les:
Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
    <title>Google Maps API V3</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="maps.js"></script>
    <style type="text/css">
    	body, html, #map { margin: 0; width: 100%; height: 100%; }
    </style>
  </head>
  <body onLoad="getMap()">
    <div id="map"></div>
  </body>
</html>

Maps.js

function getMap() {

  var centerMap = new google.maps.LatLng(52.18958, 5.29524);
  var optionMap = {
    center: centerMap,
    zoom: 9,
    MapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'), optionMap);

}

Voorbeeld

3 Reacties

  1. Ik heb een Google Map op mijn nieuw te bouwen website in het programma van Weebly.com te plaasten. Deze bleef een paar dagen staan, hierna verdween het plaatje van de landkaart en kreeg ik de tekst , Gebruikersvoorwaarden } Na dit te hebben geopend, zie ik tientallen bladzijden maar niet op welke manier ik de landkaart legaal kan plaatsen of gebruiken.

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *