GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps

GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps Google Maps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps      

 

 

 

 

 

INHOUDSOPGAVE Inleiding ……………………………………………………………………………..

3

Een Google Map maken …………………………………………………………..

4

Een eigen adres opgeven …………………………………………………………

7

Inzoomen op je eigenkaart ……………………………………………………….

8

Satellietbeeld op je eigenkaart ………………………………………………….

10

Markers plaatsen ………………………………………………………………….

13

Tekstballon plaatsen ……………………………………………………………..

15

Meerdere markers plaatsen ……………………………………………………..

18

Een XML bestand inladen ……………………………………………………….

19

Meerdere tekstballonnen plaatsen …………………………………………….

20

Bronnen ………………………………. …………………………………………….

20

Werken met Google Maps   

Pagina 2 

Inleiding Google Maps wordt steeds populairder. Met deze dienst van Google kan je landkaarten gebruiken en voorzien van eigen informatie. Google stelt de software van Google Maps gratis ter beschikking. De software is zo gemaakt dat je het door toevoeging van eigen gegevens naar je hand kunt zetten. Dit wordt gedaan doormiddel van een API (een Application Programming Interface). In dit document zullen we kijken naar de opties van Google Maps en zullen we kijken hoe we de opties kunnen toepassen op je eigen website. We zullen doormiddel van HTML en JavaScript kijken hoe je snel een interactieve kaart in je webpagina kunt opnemen die functionaliteit bevat zoals: in- en uitzoomen, markeringen plaatsen en tekstballonnen plaatsen.

 

Werken met Google Maps   

Pagina 3 

Een Google Map maken Om een Google Map toe te voegen op je website moet er het volgende gebeuren. Om de Google Maps API te kunnen gebruiken moet een sleutel hebben waarmee je jezelf als unieke gebruiker identificeert. Dit heet een API-key. Die kun je gratis aanvragen bij Google.

  Ga op deze pagina akkoord met de voorwaarden,vul het adres van je site in en klik op Generate API key. Google genereert nu een unieke key voor je die goed is voor je eigen website (domein). Ook geeft Google de nodige code om te starten! Die kan er als volgt uit zien: Voorbeeld van een API- Key:

ABQIAAAAdEYsXI1V4dPLmI0l5_GIqhSWFzE4E7BWMOMx4jvDgkY64bOkeBSoNByXRShPb7YyvhI1vUh6onn A9P

  JavaScript Maps API voorbeeld:

... <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false &key=ABQIAAAAdEYsXI1V4dPLmI0l5_GIqhSWFzE4E7BWMOMx4jvDgkY64bOkeBSoNByXRShPb7Yyvh I1vUh6onnA9P" type="text/javascript"> ...

Werken met Google Maps   

Pagina 4 

In HMTL ziet het er als volgt uit:  <script src="http://maps.google.com/maps?file=api&v=2&key=[de hele lange key...]" type="text/javascript"> <script type="text/javascript"> //

De opbouw van de Google Map code De code bestaat uit vier onderdelen: 1) Het algemene javascript dat je van Google krijgt (met je API key). 2) Een specifiek stukje javascript dat een locatie op de wereld aangeeft - de functie load() met daarin de GLatLng functie. Let op: Google Maps vraagt eerst de breedtegraad, daarna de lengtegraad. function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(52.0782886, 4.313685), 13); } }

3) Twee aanwijzingen in de body tag (het startpunt van de inhoud van je webpagina): op het moment dat je webpagina inlaadt in de browser start de load() functie en als deze pagina wordt gesloten start de GUnload() functie.

4) Een plek in je pagina waar de kaart getoond gaat worden.

Werken met Google Maps   

Pagina 5 

Het resultaat

  Als je het bovenstaande voorbeeld zou gebruiken zie je het volgende: 

 

Werken met Google Maps   

Pagina 6 

 

Een eigen adres opgeven Doe hiervoor het volgende: 1) Zoek de breedtegraad en lengtegraad van je adres op; dit kan bijvoorbeeld met Google Earth. Stel dat je adres Damrak 277, 1012 ZJ Amsterdam is (dit is het adres van de Beurs van Berlage). Een zeer handige website hiervoor is www.gpscoordinaten.nl (van TeleAtlas). Op deze manier vinden we dat de coördinaten van de Beurs van Berlage N 52.375300° E 4.896059 zijn. Je kan dit natuurlijk ook met een eigen GPS doen. Op de site wordt ook Google Maps gebruikt, maar ik werk voor nu zelf door aan het voorbeeld.

In de load() functie vervang je nu de waarden: <script type="text/javascript"> //

Het effect is nu:

 

Werken met Google Maps   

Pagina 7 

Inzoomen op je eigenkaart Nu we een eigenkaart hebben, gaan we eens kijken hoe je kunt Inzoomen. Inzoomen Je kunt op twee manieren inzoomen op een kaart: Door middel van een inzoom-element (dan bepaalt de bezoeker dat hij wil inzoomen) of door zelf van te voren aan te geven hoe ver erop de kaart ingezoomd wordt. inzoom-element Voeg voor een inzoom-element 1 regel toe aan de load() functie van je kaart: map.addControl(new GSmallMapControl());

  De functie wordt nu: <script type="text/javascript"> //

  De regel map.addControl(new GSmallMapControl()); zorgt ervoor dat de kaart een inzoom-element bevat. Als een bezoeker inzoomt komt hij steeds dichter bij de Beurs van Berlage. Het effect is nu:

 

Werken met Google Maps   

 

Pagina 8 

Zelf inzoomen Dit doe je door het getal 13 uit map.setCenter() in de code door een hoger getal te vervangen. Dit getal heet de z-waarde van de kaart. Ik heb er nu 14 van gemaakt. De functie wordt nu: <script type="text/javascript"> //

  Het effect is nu:

  Er is ook een mogelijkheid om beide mogelijkheden te combineren.

Werken met Google Maps   

Pagina 9 

Satellietbeeld op je eigenkaart We gaan nu kijken hoe je een satellietbeeld kunt toevoegen aan je kaart. Satellietbeelden als mogelijkheid toevoegen aan een Google Map Google biedt de mogelijkheid om niet alleen kaart informatie te laten zien, maar ook satellietkaarten van de werkelijkheid. Ook hiervoor geldt dat je dit op twee manieren kunt doen. Optie 1 is dat de bezoeker het zelf instelt en optie 2 is dat de kaart standaard satellietbeelden laten zien. Satellietbeelden als optie Voeg voor een keuze-element 1 regel toe aan de load() functie uit het vorige artikel: map.addControl(new GMapTypeControl());

De functie wordt nu: <script type="text/javascript"> //

De regel map.addControl(new GMapTypeControl()); zorgt ervoor dat de kaart toevoegd met een satellietkaart element. Als een bezoeker klikt op Satelliet ziet hij de Satellietkaart, bij Beide ziet hij de twee kaarten door elkaar heen.

Werken met Google Maps   

Pagina 10 

Het effect is nu:

 

 

Satellietbeelden standaard instellen Als je direct wilt starten met een beide beelden door elkaar heen (dit heet hybride), voeg dan een extra variabele toe aan de methode map.setCenter(), nl. G_HYBRID_MAP: <script type="text/javascript"> //

Werken met Google Maps   

Pagina 11 

Het effect is nu:

 

 

Er zijn hier hierin 3 mogelijkheden: A) G_NORMAL_MAP - de standaardkaart (als je geen variabele meegeeft, is dit de standaardkaart) B) G_SATELLITE_MAP - de satellietkaart C) G_HYBRID_MAP - de hybride kaart Combineren Ook hier geldt dat je deze twee dingen natuurlijk kunt combineren! Zo start je dan met de hybride kaart en kan de bezoeker een andere optie kiezen. <script type="text/javascript"> //

Werken met Google Maps   

Pagina 12 

Marker plaatsen We gaan nu verder kijken hoe je een marker. Het doel is dat we een plek op de kaart aanwijzen die we extra van belang vinden. Een marker op je Google Map zetten Om een marker op de kaart te zetten moet je een klein stukje code toevoegen aan het script dat we al hadden: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(52.375300, 4.896059), 14); var marker = new GMarker(new GLatLng(52.375300, 4.896059)); map.addOverlay(marker); } }

Zoals je kunt zien hebben we twee nieuwe regels aan het eind: Eerst vertellen we wat de coördinaten zijn van de marker (dezelfde als de Beurs van Berlage) Daarna voegen we die met de functie addOverlay() toe aan de kaart. Het effect is nu:

 

Werken met Google Maps   

Pagina 13 

Het load() script vereenvoudigen Het script dat we hebben kan echter beter. We hebben nu namelijk twee keer de coördinaten ingeprogrammeerd. Dat is niet de bedoeling. Dit vervangen we door een nieuwe variabele: point. Deze vullen we 1x en gebruiken we daarna op de plaatsen waar het nodig is. Het effect blijft hetzelfde. function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var point = new GLatLng(52.375300, 4.896059); map.addControl(new GMapTypeControl()); map.setCenter(point, 14); var marker = new GMarker(point); map.addOverlay(marker); } }

  Eigenschappen van de marker Het bijzondere aan de marker is dat het automatisch een element wordt dat de bezoeker kan aanklikken.

Werken met Google Maps   

Pagina 14 

Tekstballon plaatsen Nu we weten hoe je een marker op je map maakt , is de basis er om een tekstballon toe te voegen aan die plek. Deze tekstballon verschijnt als een bezoeker met zijn muis over de marker gaat en kan gevuld worden met inhoud (tekst en afbeeldingen). Een tekstballon op je Google Map zetten Google noemt een tekstballon een InfoWindow. We voegen deze toe met een nieuwe regel code aan het eind van het script: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var point = new GLatLng(52.375300, 4.896059); map.addControl(new GMapTypeControl()); map.setCenter(point, 14); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("Beurs van Berlage"); } }

Het effect is nu:

 

Werken met Google Maps   

Pagina 15 

Een tekstballon / InfoWindow tonen bij het aanklikken van de marker  Als je wilt dat een tekstballon pas verschijnt op je kaart als een bezoeker de marker aanklikt. Dan kun je het volgende doen door het aanroepen van de ballon pas te laten gebeuren, nadat je bezoeker op de marker heeft geklikt. Sluit daarvoor de openInfoWindowHtml() in een methode die 'luistert' of er op de marker geklikt wordt. Dit wordt een eventlistener genoemd:  function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var point = new GLatLng(52.375300, 4.896059); map.addControl(new GMapTypeControl()); map.setCenter(point, 14); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("Beurs van Berlage"); }); } }

  Extra eigenschap van de tekstballon / InfoWindow: maximize Het is mogelijk om je tekstballon te voorzien van een 'maximize' adres. Hierdoor verschijnt een maximize icoon. Als je bezoeker hierop klikt ziet hij deze extra pagina. Hiervoor kan je een gewone html pagina maken en deze aan de openInfoWindowHtml() functie toevoegen zoals hieronder: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var point = new GLatLng(52.375300, 4.896059); map.addControl(new GMapTypeControl()); map.setCenter(point, 14); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("Beurs van Berlage",{maxUrl:"details.html"}); }); } }

Werken met Google Maps   

Pagina 16 

Het effect is nu:

 

Werken met Google Maps   

Pagina 17 

Meerdere markers plaatsen Nu we weten hoe je een marker op je map maakt. We gaan nu kijken hoe je meerdere markers op een kaart kunt plaatsen. Meerdere markers toevoegen aan je Google Map In het voorbeeld hieronder zie je twee markers: 1 bij de Beurs en 1 bij het Anne Frank Huis.

 

 

Werken met Google Maps   

Pagina 18 

Een XML bestand inladen Er zijn verschillende manieren om coördinaten in te laden, maar ik heb ervoor gekozen dit met een xml bestand te doen. Het voordeel daarvan is dat je de inhoud van je kaart kunt scheiden van de code waarmee je de kaart opbouwt. Hierdoor is het beheer van je kaart eenvoudiger. De aanpassing van de code is als volgt: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); GDownloadUrl("xml/13/data.xml", function(data, responseCode) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); map.setCenter(point, 14); var marker = new GMarker(point); map.addOverlay(marker); } } ); } }

GDownloadUrl() toevoegen Om een xml bestand in te laden moet je de functie GDownloadUrl() gebruiken. In dit voorbeeld laad ik xml/13/data.xml in. Dit bestand ziet er alsvolgt uit:

<markers> <marker lat="52.375066" lng="4.883756" /> <marker lat="52.375300" lng="4.896059" />  Vul per regel een locatie in. De coördinaten van het Anne Frank huis heb ik opgezocht   Loop over de markers Wat nieuw is, is dat je de waardes voor de point variabele uit het XML document haalt en deze eerst in een array bewaart: var markers. var markers = xml.documentElement.getElementsByTagName("marker");

Daarna loop je over dit array (met de for loop) op de manier zoals boven beschreven. Je kunt zien dat je zo de attributen "lat" en "lng" gebruikt uit het XML bestand en toewijst aan nieuwe markers. Door het laatste element in je XML document de Beurs van Berlage te laten zijn wordt er voor gezorgd dat je kaart daarop centreert.

Werken met Google Maps   

Pagina 19 

Meerdere tekstballonnen plaatsen We hebben meerdere markers op de kaart gemaakt. We gaan nu kijken hoe je meerdere tekstballonnen op een kaart kunt plaatsen. Om de code overzichtelijker te maken zal ik deze eerst wat anders indelen. De Javascript code scheiden van de HTML pagina In de eerste plaats scheid je de Javascript code van de webpagina. Dit heeft het voordeel dat je het apart kunt bewerken en kan je de code eenvoudiger controleren op fouten. Maak voor de code een apart bestand, en roep dit aan in de header: <script src="scripts/17/maps.js"type="text/javascript">

  De load() functie van je Google Map opdelen De load() functie is nu nog één grote functie. Deze deel je op in twee functies. Uit de load() functie haal je de code die nodig is voor het aanmaken van een marker, met de click eventlistener voor het InfoWindow. Deze plaats je in een nieuwe functie: createMarker(). //Create marker and set up event window function createMarker(point,html){ var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

Het XML document voorzien van informatie voor de tekstballonnen Het XML document verrijk je nu met de informatie voor je tekstballon. Dit doen we voorlopig met een extra attribuut: html. Hierin staat de inhoud van de tekstballon. Je XML bestand ziet er nu alvolgt uit: <markers> <marker lat="52.375066" lng="4.883756" html="Anne Frank Huis"/> <marker lat="52.375300" lng="4.896059" html="Beurs van Berlage"/>

Je zult merken dat bij het aanroepen van dit xml bestand met GDownloadUrl() je browser het bestand cachet. Hierdoor worden wijzigingen niet meegenomen. Hiervoor is een eenvoudige oplossing: voeg bij het aanroepen een extra parameter toe met een willekeurig nummer. Dit kan je op de volgende manier in je Javascript bestand doen: //create randomnumber and retrieve xml file var randomnumber=Math.floor(Math.random()*11111) GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responseCode) { …

Werken met Google Maps   

Pagina 20 

De tekstballonnen aanroepen Wijzig de load functie nu zo dat je de HTML informatie aanroept en dit doorgeeft aan de nieuwe functie. function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); //create randomnumber and retrieve xml file var randomnumber=Math.floor(Math.random()*11111) GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responseCode) { var xml = GXml.parse(data); //store markers in markers array var markers = xml.documentElement.getElementsByTagName("marker"); //loop over the markers array for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); map.setCenter(point, 14); var marker = createMarker(point,html); map.addOverlay(marker); } //close for loop } ); //close GDownloadUrl } //close GBrowserIsCompatible } //close load

Zoals je kunt zien plaats je elke element dat van belang is binnen de for loop eerst in een variabele en geef je die daarna door aan twee onderdelen: 1) je point en 2) de nieuwe createMarker functie. Hierna zet je alles op de kaart met de map.addOverlay(marker) functie.

Het eindresultaat Het eindresultaat is klaar: een Google Map met meerdere tekstballonnen geladen vanuit een XML bestand.

Werken met Google Maps   

Pagina 21 

Bronnen Verwijzing naar boeken Google Maps Applications Development (boek)

Verwijzing naar Internet bronnen. http://maps.google.nl http://code.google.com/intl/nl/apis/maps

Werken met Google Maps   

Pagina 22