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

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.

Een aantal van jullie heeft me gevraagd of het mogelijk is om verschillende iconen te gebruiken voor je markers. Dit kan! In deze tutorial leg ik je uit hoe je dit kan meegeven in je xml bestand.

Voorkennis
Ik ga ervan uit dat je op de hoogte bent van voorgaande tutorials over Google Maps.

Hoe gaan we verschillende iconen op de kaart zetten?
Wat we doen is dat we het aanmaken van een icoon gaan onderbrengen in een nieuwe functie: getIcon(). Deze functie gaan we voorzien van de afbeelding die we willen gebruiken. De naam van de afbeelding gaan we opnemen in het xml bestand dat de data bevat van een marker.
Het eindresultaat zal er zo uit gaan zien:

1) Iconen aanmaken
Eerst maken we twee nieuwe iconen aan. Ik heb er een van Anne Frank en een van Berlage gemaakt. Ik zorg ervoor dat ze allebei even groot zijn: 23 x 24 pixels. Je kunt voor een groter formaat kiezen, maar let er dan wel op dat je de juiste maten opneemt in je script.

Stel je laat een kaart zien, maar je wilt bezoekers ook de gelegenheid geven om verder te navigeren romdom deze kaart. Hoe voeg je dan een overzichtskaart toe? Het antwoord is eenvoudig: gebruik het GOverviewMapControl.

De GOverviewMapControl toevoegen
In de code van de vorige tutorials (lees deze eerst…) voegen we hiervoor maar 1 regel toe in de load() functie:

Hoe werkt het?
Zet eerst het nieuwe element in een variabele: mini. Dit is handig omdat je er dan later nog wat extra's mee kan doen (zie later in dit bericht). Via de map.addControl functie geef je aan dat je een extra element op je kaart wilt zetten, nl. een overzichtskaartje (GOverviewMapControl). Daarbinnen geef je aan welk formaat die moet hebben. In het voorbeeld is het 100 x 100 pixels. De rest van de functie blijft onveranderd. Het effect ziet er zo uit:

Het kleine blauwe hoekje geeft aan welk gebied actief is in de overzichtskaart. Een bezoeker kan met zijn/haar muis dit verslepen en ziet hiermee de rest van de kaart.

Live demo
Bekijk een live demo van deze Google Maps overzichtkaart.

Als je zowel lokaal als op je server een versie van je Google map hebt staan, is het lastig dat je twee Google API keys moet gebruiken: een voor je ontwikkelcomputer (thuis) en een voor je live server. Met het volgende script kan je dat eenvoudig voor elkaar krijgen.

Een serverswitch toevoegen
Voeg boven aan je bestand de volgende code toe:

Je kijkt hier of de naam van je server gelijk is aan localhost. Zo ja, dan gebruik API key 1; zo nee, dan gebruik je de code van live server. Vervang in het voorbeeld de teksten door je eigen API codes. De nieuwe variabele ($apiKey) kan je nu gebruiken in de header van je document:

Je zult zien dat je nu zowel lokaal als op je server dezelfde pagina kunt gebruiken. Je kunt dit overigens eenvoudig aanpassen om zo meerdere domeinen te bedienen. Gebruik in dat geval een switch / case statement.

Met dank aan
Bovenstaande tip is met dank aan twee van mijn lezers die hier om gevraagd hebben.

Een terugkerende vraag is hoe je HTML kunt toevoegen aan Google Maps. Denk hierbij aan toelichtingen, hyperlinks en afbeeldingen. De mogelijkheid die ik had bedacht tot nu toe was niet echt handig. De nieuwe oplossing blijkt eenvoudiger dan verwacht. Aangezien ik al een tijd niets meer heb geschreven dit bonus artikel voor vandaag!

1. Een nieuw element toevoegen aan data.xml
In de eerste plaats moeten we het data.xml bestand aanpassen. In oudere versies gebruikten we het attribuut 'html' om de HTML kwijt te kunnen. Dat gaf nogal wat beperkingen. De oplossing is een nieuw element te hangen onder het marker element: infowindow.
Dit nieuwe element kunnen we niet zomaar met nieuwe HTML vullen. Dit moet binnen CDATA commentaar. Met CDATA kan je een XML document aangeven dat alles wat daarbinnen staat niet geëvalueerd moet worden.

Een vergelijking tussen de oude en de nieuwe versie maakt het verschil meteen duidelijk:

wordt

Een nieuwe element is overigens ook het label attribuut. Dit gebruiken we voor de linkjes in naast de kaart.