Google Maps op je contactpagina – de basis (1)
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, zonder dat je precies hoeft te weten hoe de software zelf werkt. Dit wordt een API genoemd (een Application Programming Interface). Een leuk onderwerp voor een nieuwe serie tutorials. In dit artikel de basis.
Een Google Map maken
Volg de volgende stappen om een Google Map toe te voegen op je website:
1) 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.
2) Ga op deze pagina akkoord met de voorwaarden, vul het adres van je site in en klik op Generate API key
3) Google genereert nu een unieke key voor je die goed is voor je eigen website (domein).
4) Ook geeft Google de nodige code om te starten! Die ziet er in mijn geval alsvolgt uit:
"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=[een hele lange 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>
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.
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 GUunload() functie.
4) Een plek in je pagina waar de kaart getoond gaat worden.
Het eerste resultaat
Als je het bovenstaande voorbeeld zou gebruiken zie je het volgende:
De Map zo aanpassen dat je je eigen adres kunt opgeven
Maar je wilt waarschijnlijk wat anders, nl. een kaart van bijvoorbeeld de locatie van je bedrijf. 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 coordinaten 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.
2) In de load() functie vervang je nu de waarden:
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.375300, 4.896059), 13);
}
}
//]]>
</script>
Het effect is nu:
En nu verder
In het volgende artikel in deze serie o.a. meer over de mogelijkheden van inzoomen.
Artikelenserie - Google Maps
- Google Maps op je contactpagina – de basis (1)
- Google Maps op je contactpagina – inzoomen (2)
- Google Maps op je contactpagina – satellietkaarten (3)
- Google Maps op je contactpagina – markers (4)
- Google Maps – tekstballonnen (5)
- Google Maps – meerdere markers (6)
- Google Maps – meerdere tekstballonnen (7)
- Google Maps polylines – verbindingslijnen tussen markers (8)
- Google Maps – eigen markers maken (9)
- Google Maps – HTML invoegen in XML bestanden (10)
- Google Maps – de taal van je kaart instellen (11)
- Google Maps – markers op basis van adressen (12)
- Google Maps – hyperlinks naar markers naast je kaart (13)
- Google Maps – HTML invoegen in XML bestanden – dl 2 (14)
- Google Maps – Een serverswitch voor je Google API key (15)
links for 2007-04-10 « Rost in de branding
11.04.07 - 1:15
[...] Google Maps op je contactpagina – de basis (1) – WHELP! (tags: googlemaps) [...]
Eus Wust
23.07.07 - 20:23
Hoi Theo,
Ik heb een key van google ontvangen en jouw tutorial doorlopen. Mooi stukje werk. Ik zie echter op jouw kaarten steeds nederlandse buttons staan (dus kaart i.p.v. map etc). Ik ben al wezen rondneuzen hoe ik de "taal" van de maps kan instellen. Tot op heden zonder succes. Heb jij een idee?
Dank en groet, Eus
Martijn
24.10.07 - 16:50
Hoi Theo,
Google heeft haar code ineens veranderd waardoor alle Google Maps scripts niet goed meer werken in Internet Explorer (getest in 6 en 7). Je krijgt de foutmelding 'GMap2 is undefined' en verder niets.. Ook jouw voorbeelden werken niet meer. Weet jij hoe dit opgelost kan worden???
Theo Bakker
24.10.07 - 18:56
Hoi Martijn,
Ik heb ernaar gekeken en misschien het antwoord gevonden. Zie http://www.whelp.nl/2007/10/24/google-maps-IE-problemen/.
Kan je me laten weten of het hiermee is opgelost?
Groet, T
Marinus
25.10.07 - 13:53
Hoi Theo,
Ik wil je bedanken voor jouw informatie over de Google Maps API. Door jouw voorbeelden kon ik snel aan de slag en had ik snel iets moois draaiend.
Ga zo door zou ik zeggen.
Groeten,
Marinus
Theo Bakker
25.10.07 - 16:35
Dag Marinus,
bedankt voor het compliment!
Groet, T
Henk
05.11.07 - 16:43
THeo,
Ik probeer al enige tijd Google maps op mijn website krijgen. Ik krijg echter steeds de melding dat deze APIkey al gerigistreerd is voor een andere website en dat ik een andere aan moet vragen. Helaas dit levert steeds dezelfde foutmelding op de site op. In mijn websitebuilder werkt het allemaal nog goed, maar na het uploaden gaat het fout.
Heeft het iets te doen met IE versies?
Theo Bakker
05.11.07 - 21:05
Dag Henk,
op welke server host je je websitebuilder – als ik het zo lees is dit localhost? Als dit een andere is dan je website is dat het probleem. Vraag een API aan voor het adres van je website zelf. Dit betekent dat je 2 sleutels moet hebben om het testen: 1 voor lokaal en 1 voor remote. Op basis van servervariabelen kan je switchen van key.
Mocht iemand anders een andere idee hebben, meld deze dan als commentaar!
Groet, Theo
Daniel
02.04.08 - 14:58
Ik heb het zelfde probleem als Henk
als ik de het .html bestand op mijn computer opstart dan krijg ik gewoon alles goed te zien.
maar als ik hem online zet, zegt hij hetzelfde als bij Henk.
ik heb mijn server gehost bij freehostia.com
kun je me uitleggen hoe ik dit moet doen om het ook werked te krijgen op mijn site?
(prismabv.freehostia.com/beschikbaarheid.html)
Daniel
02.04.08 - 15:00
ik heb het probleem al opgelost.
ik had als pagina ingevoerd voor de API key: prismabv.freehostia/beschikbaarheid.html
dit moet niet.
ik moest gewoon intypen:
prismabv.freehostia.com
Heel erg bedankt man!
Theo = De Man :)!
Jan
14.08.08 - 17:08
Dag Theo,
Na het lezen van de verschillende opmerkingen en tips,
heb ik dan ook een API key aangemaakt op naam van mijn host, kan je me uitleggen hoe ik moet switchen op basis van servervariabelen, wat is het script.
groeten
jan
ps. ik heb voorlopig google van mijn site gehaald en terug mijn oud voorbeeld eropgezet.
Jan
17.08.08 - 14:34
Dag Theo,
Hartelijk dank voor uw medewerking, uw script "Google maps onder het n°15) werkt perfekt, even een kijkje nemen op http://www.ifbas.net
ps. heeft uw een klein logo, zodat ik dat kan plaatsen bij mijn "liens"
Beste groeten
jan
CJ
29.08.08 - 13:47
Veel dank! Hier kan ik wat mee … beter dan die onhandige uitleg in Google zelf Theo!
Chapoo
CJ
Maarten
21.12.08 - 12:54
Theo,
Ik heb als beginneling je voorbeelden gelezen. Alleen ik lees nergens hoe ik nu moet starten (of ik kijk er overheen) Hoe krijg ik jouw fantastische uitleg werkend op een joomla site. Wat plaats ik in een artikel ? Moet ik jouw uitleg opslaan in een javascript bestand? Hoe roep ik het aan ? Graag hulp als het kan
Theo Bakker
21.12.08 - 13:38
Dag Maarten,
voor Google maps in Joomla zou ik gebruik maken van de Google Maps API. Dit is een extensie waarmee je Google Maps in Joomla kunt gebruiken.
Mocht je wat verder willen, dan zul je je template erop aan moeten passen.
Groet, Theo
Veerle
16.05.09 - 10:12
Hallo,
Ik krijg heel de tijd de fout: a is undefined.
Weet iemand hoe dit komt?
http://veerlestruyf.dreamhosters.com/Antwerpen2.php
Groeten Veerle
Marcel
31.08.09 - 21:11
Het is een top tutor,
Ben benieuwd of de adressen ook voor postcode
te regelen is. Regelmatig vindt het script niet de juiste
plek
gr Marcel
Angela Steevens
07.09.09 - 12:23
Beste Theo,
Ik heb google maps in mijn website geplaats en krijg onderaan de kaart 'kaartgegevens: blablabla'. Ik maak gebruik van de totale Europa kaart en de verschillende landen. Deze regel met kaartgegevens past bij het ene land wel in de breedte en bij het andere land niet. Kun je deze weg laten of bijvoorbeeld een breedte aan mee geven zodat hij niet naast de kaart gaat lopen? Mijn kaart zelf is 300 px breed.
Bedankt, Angela
Martin
23.10.09 - 9:25
Ik vraag me af hoeje een inputveld maakt en dat je dan een plaats in kan vullen en daar heen gaat en je de dichtbijzijnde bedrijven te zien krijgt in een overzicht? of is dit te veel asp/php
Als het lijstje te moeilijk is ben ik al heel blij met het inputveldje waarmee je naar een plaats kan gaan.
Als voorbeeld:
http://www.bovag.nl/index.php?locationsearch=5854hb&search_name=cars&latitude=51.6084512&longitude=6.057383&pageID=12
Google Maps API :TomVD
04.12.09 - 8:04
[...] markers based on addresses. The addresses are stored in an XML file.There full tutorial starts here [...]
Tom
21.02.10 - 18:23
Voor Google Maps AVI versie 3 is er geen key meer vereist.