Google Maps 2 – De Google Maps Ajax API
Google Maps heeft een nieuw uiterlijk: een ander schuifbalk om in en uit te zoomen, een nieuwe knop om terug te keren naar de oorspronkelijke locatie en een paar extra labels om meer te laten zien op de kaart. Onder de motorkap is er veel meer aan de hand; je kunt binnen Google Maps nu gebruiken maken van een nieuwe Ajax API (Application Programming Interface). Dit is dusdanig nieuw dat we beginnen met een nieuwe serie.
De nieuwe Google AJAX API gebruiken
Om van alle nieuwe mogelijkheden gebruik te maken stappen we over naar de nieuwe Google AJAX API. Het aanroepen hiervan is anders dan we tot nu deden. Hiervoor moeten we een aantal dingen aanpassen:
A. Aanroep van de API
Om te beginnen moeten we de nieuwe API aanroepen. Wijzig
in
<script type="text/javascript">
google.load("maps", "2");
</script>
De variabele $apiKey gebruik ik om verschillende keys te kunnen gebruiken, zodat ik automatisch van key kan switchen als ik op mijn eigen computer werk, of wanneer het op de server staat. Verder laden we hier met google.load() de juiste versie in.
B. Maps.js aanpassen
Dit bestand wordt fors aangepast. Het inladen van de juiste versie gebeurt ook in maps.js. Voeg bovenaan je maps.js het volgende toe:
google.load("maps", "2");
Als je de laatste testversie wil gebruiken, gebruik dan 2.x. Versie 2 is de laatste stabiele versie.
De load() functie krijgt een nieuwe naam: initialize(); hernoem deze.
Vervang overal waar een functie met een G begint dit door google.maps. (dit heet een namespace). Dit is nog niet per se nodig, maar zal in toekomstige API's verplicht worden.
Onderaan het bestand komt een nieuwe regel die ervoor zorgt dat de initialize() functie wordt ingeladen:
google.setOnLoadCallback(initialize);
C. De bodytag aanpassen
Verder moet je de body wijzigen. Verander
in
De onload functie vervalt en pas ook hier GUnload() aan naar google.maps.Unload(). Als het goed werkt je kaart nog steeds en zie je geen javascript fouten. Zie het eindresultaat.
Hoe nu verder?
Hiermee heb je de basis gelegd om meer uit je Google maps te halen. Meer over deze nieuwe mogelijkheden in volgende artikelen.
Arjan Kessels
22.12.08 - 11:40
In het voorbeeld zie ik nergens de nieuwe interface terug. Ook niet als ik jouw code overneem en aanpas voor mijn mijn eigen server. Hoe zit dat? Moet je bij Google misschien een andere api aanvragen?
Arjan
Theo Bakker
22.12.08 - 12:31
Dag Arjan,
bij het aanpassen van dat onderdeel ben ik nog niet beland in mijn verhaal. Dit staat op de rol.
Groet, Theo
Maarten
29.12.08 - 16:09
Hi Theo,
Bedankt voor deze warming-up. Ik ben benieuwd naar de rest.
Al je vorige info heeft me enorm geholpen om Google Maps te gerbuiken. Heb zelf ook een aanpassing in je maps.js gemaakt om een eigen InfoWindow te maken mbv CSS.
Als je wilt kan ik deze code uiteraard geven.
Theo Bakker
30.12.08 - 18:57
Dag Maarten,
Graag! Als je het me stuurt kan ik kijken of ik het kan verwerken in een nieuw artikel.
Groet, Theo
UberRookie
30.06.10 - 20:27
Moet het niet zijn:
<script src="http://www.google.com/jsapi?key=" type="text/javascript"/>
?
UberRookie
30.06.10 - 20:28
Vorige comment ging niet goed, maar ik bedoelde dat er een moet worden toegevoegd aan die regel
UberRookie
30.06.10 - 20:29
Sorry, weer niet goed….
Ik heb het over een /script (en dan tussen tags)