Spelen met Google Maps

• 19 juli 2010,
• nog geen reacties

Ze duiken steeds vaker op in websites: kleine kaartjes waarmee je als bezoeker ziet waar een bedrijf gevestigd is. Vaak kan je er mee scrollen, in- en uitzoomen, en soms zelfs je route berekenen. Telkens gaat het om kaartjes van Google Maps. Tot nog toe hadden we er bij Aurealis nog niet echt tijd voor vrijgemaakt om dit ook toe te passen, maar recent deden we het toch!

Google Maps

Ik denk dat Google Maps geen verdere introductie nodig heeft, maar ten overvloede doe ik het toch graag nog even: Google Maps is een gratis online kaartendienst die door Google ter beschikking gesteld wordt. Je kan het voor allerlei doeleinden gebruiken: van het opzoeken van een adres tot het plannen van je reis, en nog veel meer. Bezoek de site zeker eens, zelfs zonder duidelijk doel kan je er zomaar uren plezier aan beleven.

Het mooie van Google Maps is echter dat er naast de eigenlijke website ook een zogenaamde API (Application Programmers Interface) beschikbaar is, waarmee programmeurs zelf aan de slag kunnen gaan. Op deze manier kan iedereen die dit wenst Google Maps integreren op zijn of haar website. Het is dan ook van deze API dat we gebruik maken.

Integratie in onze systemen

Het was er nog niet echt van gekomen tijd vrij te maken om Google Maps in ons systeem in te bouwen. Bij de recente upgrade hebben we dit echter wel gedaan. Maar zoals steeds hebben we de lat net een tikkeltje hoger gelegd.

Door zelf regelmatig dergelijke kaartjes tegen te komen en te gebruiken waren de grootste pijnpunten ervan al duidelijk geworden. We hebben ons daarbij op de twee belangrijkste gefocust:

1. veel te kleine kaartjes: vaak zie je dat het kaartje veel te klein is om op een behoorlijke manier ermee te kunnen werken. Je kan dan wel zoomen, of soms een route berekenen, maar het resultaat ervan wordt in zo'n klein kadertje weergegeven dat je er eigenlijk bitter weinig mee kan aanvangen. Dat kaartje moest dus voldoende groot worden in ons systeem!
2. scrollen om te zoomen: Google biedt het als optie aan, als je scrollt met je muiswiel terwijl je in een kaart zit kan je in- of uitzoomen. Een erg handige functionaliteit op Google Maps zelf, omdat je daar niet hoeft te scrollen door de pagina (die is immers schermvullend, zonder meer). Maar als de kaart in een pagina “ingebed” ligt, en de pagina loopt door voorbij de kaart, dan ga je ineens zoomen in de kaart, in plaats van door de pagina heen te scrollen. Zij die het ook al merkten zullen het volmondig met me eens zijn: dit is enorm irritant, om de eenvoudige reden dat je niet langer aan het scrollen bent, en bovendien de positie in het kaartje kwijt bent... Die functionaliteit moest er dus ook hoe dan ook uitgegooid worden.

In onze oplossing zijn we uitgegaan van een dubbele benadering: enerzijds zorgen we voor zo'n “ingebed” kaartje in de website zelf, zodat een bezoeker ziet dat er een kaartje in gebruik is, en daarnaast zorgen we voor een popup-weergave, die zo groot mogelijk gemaakt wordt, en die actief wordt door te klikken op de kaart:

1. ingebedde versie: omdat we hier beperkt zijn door de layout van de website is deze kaart niet heel groot. Om ze toch voldoende groot te laten lijken zijn alle “controls” (knoppen voor de weergave, zoomen etc) weggelaten. Ook is er hier voor gezorgd dat de scroll-optie uitgeschakeld is om dat irritante gedrag te onderdrukken.
2. popup-versie: hier gaan we op dezelfde manier tewerk als bij de foto's, namelijk een zo groot mogelijke weergave. Bij de popup-versie laten we uiteraard wel de mogelijkheid om te scrollen om te zoomen. Ook wordt hier een tekstballon voorzien met meer informatie over de aangeduide locatie. En daarnaast voorzien we hier ook de mogelijkheid om de route te berekenen.

We geloven dat we op deze manier voor een praktische en gebruiksvriendelijke oplossing gezorgd hebben, die iedereen aanspreekt. Onze klanten reageren er alvast enthousiast op.

Bovendien worden de gegevens op de kaart aangestuurd vanuit ons CMS MySite, zodat je als sitebeheerder steeds de volledige controle hebt over de kaart.

Om onze implementatie even aan het werk te zien kan je best gebruik maken van onze demo-site, want op deze website hebben we het nog niet ingewerkt, dat staat voor later op de planning.

Omdat het niet altijd makkelijk is feedback van gebruikers los te weken verwelkomen we graag alle feedback. Wil je dus graag iets kwijt over onze benadering, laat het ons dan gerust weten hieronder!