Home
Handleiding Google Maps - Pagina 1
In deze handleiding wordt uitgelegd hoe je een interactieve Google Map (type API 2*) op je website kunt maken met het programma Dreamweaver, maar als je met een andere webeditor werkt kun je waarschijnlijk ook aan de slag met deze informatie. Voorbeelden van Google Maps vind je op mijn Reisverhalen site. Ieder Reisverhaal heeft een eigen Google Map met daarop de locatie waar het verhaal over gaat.
Een voorbeeld van zo'n Google Map zie je ook hieronder. Als locatie heb ik De Dam in Amsterdam gekozen. Via de knopjes rechtsboven kun je kiezen voor een gewone kaart, een satelliet kaart, of een combinatie van beide. De controls vind je linksboven. Je kunt hiermee in- en uitzoomen. Door met de muis de kaart te slepen kun je andere posities vinden. Gewoon heel leuk om iemand te laten zien waar je woont, ter illustratie van een verhaal, of alleen maar om iemand te laten zien hoe De Dam er vanuit de lucht uit ziet.
|
|
1. Voorbereidend werk - key aanvragen!
2. Een werkpagina maken met daarop de standaard kaart
3. De kaart aanpassen met controls en kaarttype
4. De positie van je kaart bepalen
5. Een kaart op een bestaande pagina invoegen
6. Een kaart in een tabel invoegen
Deze handleiding is uit een zestal stappen opgebouwd; volg deze stappen één voor één anders gaat je Google Map niet werken! De codes die gebuikt worden zijn javascript codes en het is erg belangrijk dat je de codes heel precies overneemt. Een spatie, haakje of letter verkeerd en de code werkt niet! Wil je kopiëren en plakken, gebruik dan Kladblok als tussenstap. Kladblok haalt alle overbodige opmaak weg en je houdt een schone code over die je van je kladblok weer kopieert en dan pas in je webpagina plakt!
Deze handleiding bestaat uit 6 stappen. Begin met stap 1 en vraag een key aan! Zonder key kun je de andere stappen niet maken!!
1. Voorbereidend werk- Key aanvragen
Het eerste wat je moet doen is een Key aanvragen bij Google Maps; zonder deze key zal je Google Map nooit werken dus dat is een eerste vereiste. Key kun je hier aanvragen. Lees op die pagina de voorwaarden, vul de url in van je website (niet de pagina, maar de website want dan kun je je pagina overal binnen je site maken!) waarop je de Google Map wilt plaatsen en klik op "Generate Api Key". Je komt dan in een nieuw Google venster waar je je moet aanmelden met je Google Account; heb je nog geen Google Account, maak die dan meteen of maak die eerst voordat je verder gaat, op deze pagina.
Na het inloggen krijg je je Key:
Die key zélf is een enorm lange regel met allemaal cijfers en letters. Als je slim bent sla je de hele pagina op als "tekstbestand" voor een volgende keer dat je je key weer nodig hebt. Op de pagina waarop je key staat vind je iets lager:
Here is an example web page to get you started on your way to mapping glory:
(Dit is een voorbeeld webpagina om je op weg te helpen)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=JOUW KEY
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Kopiëer nu het blauwe gedeelte van bovenstaande code van de pagina waarop jouw key staat. De code hierboven gaat op een webpagina niet werken omdat er geen key in staat!!!
2. Een werkpagina maken met een standaard kaart.
Open een nieuwe webpagina en selecteer de bron; delete alles en plak daarvoor in de plaats de html code die je net van je key-pagina hebt gekopieerd (het gedeelte dat hierboven blauw en dikgedrukt is en begint met <script ... t/m </div>. Sla je pagina op als je standaardkaartpagina en bekijk hem in je browser voorbeeld. Als je het goed gedaan hebt zie je nu een webpagina met daarop de kaart van Palo Alto in Amerika. Deze pagina kun je nu steeds als basis gebruiken voor volgende kaarten.
In je browservoorbeeld zie je de standaard map die we nu gaan aanpassen.
De Controls
Voor het aanpassen van de kaart is dit stukje belangrijk: var map = new GMap2(document.getElementById("map")); Zoek dit stukje in je bron, ga achter de puntkomma staan en geef een Enter.
Nu kun je kiezen welke controls je op je kaart wilt hebben; échter je kunt er maar één kiezen, kopieer die code en plak die in je bron.
map.addControl(new GSmallZoomControl());
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
Er is nog de mogelijkheid om een kaart te maken die je niet kunt "bewegen" met de muis. Wil je dat; voeg dan deze code toe:
map.disableDragging();
Je moet dan wel de kleinste van de controls gebruiken anders heeft deze toevoeging natuurlijk geen zin!
Het type kaart
Wil je de bezoekers een keuzemogelijkheid bieden uit een gewone Kaart, een Satelliet kaart, of een combinatie van beide; voeg dan na een enter, de code onder het plaatje toe.
map.addControl(new GMapTypeControl());
Een overzichtschermpje op je kaart?
map.addControl(new GOverviewMapControl());
Standaard formaat van de kaart is 500 x 300 pixels, die gegevens staan hier: <div id="map" style="width: 500px; height: 300px"></div> wil je een ander formaat kaart, verander dan deze maten.
Er zijn nog meer controls die je aan je kaart kunt toevoegen zoals markers of pop-ups met een mededeling; informatie daarover kun je op de Google API Informatie Pagina vinden! Een voorbeeld van pop-ups en markers zie je op de printscreen die hieronder staat.
4. De positie van de kaart bepalen
Standaard staat de map dus op Palo Alto in Amerika; dat is dit stukje:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
De cijfers 37.4419 en -122.1419 zijn de coördinaten van Palo Alto. Hier ga je nu de coördinaten vervangen door die welke jouw Map moet hebben; het eerste cijfer is de lattitude (breedtegraad) ; het tweede de longtitude (de lengtegraad). Een geweldige website om deze coördinaten of geocodes op te zoeken is: http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php. Er zijn meer van dit soort websites maar wij gebruiken nu even deze omdat die erg precies en fijn werkt.
Ga naar http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php. en zoom op die pagina naar de plaats waarvan je een map wilt maken, dubbelklik dan precies daar waar je wezen wilt. De codes voor die plaats worden nu ingevuld. In het voorbeeld hieronder heb ik de codes voor 's-Hertogenbosch opgezocht. Die codes zijn dus 51.696395 en 5.305023.
Kopieer nu de codes die je hebt gevonden voor de kaart die je wilt maken en plak die in je code die er dan zo uit gaat zien als je de codes voor 's-Hertogenbosch zou invoegen: map.setCenter(new GLatLng(51.696395, 5.305023), 13);
Codes ok? Kijk dan nu weer in je preview window en als je alles goed hebt gedaan zie je jouw eigen kaart!
Zoomgrootte
Het cijfer 13 achter de coördinaten is het cijfer van vergroting. Hoe hoger je het zet, hoe meer je inzoomt, maar pas op, heel snel wordt het beeld onzuiver. Kijk zelf even wat de beste vergroting is voor jouw kaart maar ga niet hoger dan 15 of 16!
Hoever je kunt inzoomen hangt af van de beschikbaarheid van beelden bij Google Maps zélf; sommige delen van de aarde zijn beter in beeld gebracht dan andere stukken, maar er wordt aan gewerkt dus zo af en toe maar even kijken of er nieuwe beelden beschikbaar zijn. Denk er wel aan dat sommige gebieden met opzet niet duidelijk zijn, dit uit veiligheidsoverwegingen!
Je kaart is klaar! Wil je nu deze kaart invoegen op een bestaande pagina; kijk dan op de volgende pagina!
5. Kaart op een bestaande pagina invoegen
Note: Type API 2 is de nieuwste versie van Google Maps. Een Application Programming Interface (API) is een verzameling definities op basis waarvan een computerprogramma kan communiceren met een ander programma of onderdeel (meestal in de vorm van bibliotheken). Vaak vormen API's de scheiding tussen verschillende lagen van abstractie, zodat applicaties op een hoog niveau van abstractie kunnen werken en het minder abstracte werk uitbesteden aan andere API's. Hierdoor hoeft bijvoorbeeld een tekenprogramma niet te weten hoe het de printer moet aansturen, maar roept het daarvoor een gespecialiseerd stuk software aan in een bibliotheek, via een afdruk-API. (Source: Wikipedia).
Google Maps website links:
http://www.google.com/apis/maps/
http://www.google.com/apis/maps/documentation/
Pagina bijgewerkt: 2010-02-19
© Mieks 2006 - 2010
www.mieks.com