Naast de Youtube API werd voor de Pukkelpop website ook de Google Maps API gebruikt. In mijn vorige blogpost over de integratie van Google Maps had ik reeds vermeld welke functionaliteiten en mogelijkheden er zijn binnen deze API. In deze blogpost wil ik dieper ingaan op hoe we gebruik gemaakt hebben van de Google Maps API voor de vernieuwde festivalwebsite van Pukkelpop. We hebben onder meer gebruik gemaakt van clusterMarkers, individuele markers, polygonen en custom infoWindows.

Voor dit project hebben we enerzijds alle bands in kaart gebracht zodat de bezoeker een mooi beeld krijgt van het feit dat Pukkelpop een erg internationaal festival is. Daarnaast werden ook alle leden samengebracht op de kaart zodat je als bezoeker kunt zien dat er niet enkel Europese leden zijn, maar ook van andere continenten. Je kan gemakkelijk op de kaart zien wie uit jouw buurt ook lid is.

Stap 1: Google Map API key aanvragen

Om gebruik te maken van de Google Maps dien je eerst een API key aan te vragen. Eens deze key aangevraagd is, kunnen we de nodige gegevens gaan opvragen en verwerken op de Google Map.

Stap 2: Opvragen en verwerken van de gegevens

Punten op kaart brengen gebeurt via coördinaten. Je kunt deze bekomen door gebruik te maken van de GClientGeocoder class, maar omdat dit voor ieder punt op de kaart een request doet en voor latency zorgt, maak ik gebruik van Geocoding via HTTP.

Een simpele request doen naar bv http://maps.google.be/maps/geo?output=xml&q=Houthalen&key=123456 (waar Houthalen de locatie en 123456 jouw Google Maps API key is) en je krijgt de coördinaten terug in het formaat dat je wenst. Om de load van de website nog te verlagen worden de coördinaten opgeslagen in de database bij opslaan van de gegevens. Dubbele coördinaten worden opgevangen binnen een straal zodat 2 punten niet op dezelfde plaats kunnen liggen.

Meer informatie over Geocoding via HTTP kun je terugvinden op http://code.google.com/intl/nl/apis/maps/documentation/geocoding/index.html

Stap 3: Map embedden in de website

Eens de coördinaten bekend zijn, kun je deze gemakkelijk op de kaart aanbrengen. Op http://www.pukkelpop.be/nl/community/pp-map/ krijg je een Google Map waar alle leden die hun adres hebben ingevuld samen werden gebracht. Omdat we met 1000+ resultaten zitten en dit voor een zware load zorgt op de website, hebben we ervoor gekozen om gebruik te maken van clusterMarker. Dit is een javascript uitbreiding op Google Maps die ervoor zorgt dat 1 of meer punten die visueel elkaar overlappen ondergebracht worden onder 1 marker (punt) op de kaart. Klik je op deze marker, dan zal de Google Map inzoomen en zich centreren binnen deze groep van punten.

Wanneer je op een punt klikt, krijg je de informatie te zien achter dit punt. Google voorziet standaard een infoWindow maar aangezien dit niet echt binnen de huisstijl past van Pukkelpop hebben we gebruik gemaakt van ExtInfoWindow om zelf een op maat gemaakt infoWindow te ontwikkelen. Net zoals de clusterMarker is ExtInfoWindow een uitbreiding en kun je simpelweg door middel van CSS jouw eigen infoWindow opbouwen.

Op http://www.pukkelpop.be/nl/line-up/map/ brengen we bands die dit jaar spelen op Pukkelpop samen op kaart met een verbinding naar de weide van Kiewit. Hiervoor maken we gebruik van GPolyLine, meer bepaald de Geodesic Polylines. Deze baseren zich in tegenstelling tot de gewone polylines op de kromming van de aarde en tekenen de lijnen dus gebogen op de kaart.