Google Maps op je mobiel

Het tonen van een Google Maps op je mobiel is niet zo spannend. Het uitvoeren van een actie wanneer de gebruiker op een specifieke locatie is kan daarin tegen wel weer leuke dingen toevoegen. Een stads tour waarbij je bonus punten krijgt wanneer je op de Dam in Amsterdam bent is bijvoorbeeld mogelijk. In deze tutorial laat ik zien hoe je dit voor elkaar krijgt.

Voorbereiding

Om deze tutorial optimaal te kunnen volgen raad ik je aan om Google Chrome te installeren met de Manual GeoLocation plugin. Hiermee kun je live je huidige locatie veranderen zonder van je stoel af te komen. Helaas heb ik geen goede alternatieven voor andere browsers kunnen vinden.

Nog een tip: Google Chrome heeft een beveiliging ingebouwd waardoor lokaal opgeslagen pagina's niet je huidige locatie mogen opvragen. Upload daarom eerst je bestand naar een server voordat je een en ander test!

Google Maps aanmaken

Eerst beginnen we met het aanmaken van een Google Maps kaart. Dit is de basis waarmee we gaan werken, later gaan we dit uitbreiden. De standaard kaart ziet er zo uit:

  1. <!DOCTYPE html>
  2.         <head>
  3.                 <title>Standard Google Maps</title>
  4.                 <style type="text/css">
  5.                         html { height: 100% }
  6.                         body { height: 100%; margin: 0; padding: 0 }
  7.                         #map_canvas { height: 100% }
  8.                 </style>
  9.                 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry"></script>
  10.                 <script type="text/javascript">
  11.                         function initialize() {
  12.                                 // Hier wordt de map aangemaakt en de oude afbeelding ingeladen
  13.                                         zoom: 15,
  14.                                         mapTypeControl: false,
  15.                                         streetViewControl: false
  16.                                 });
  17.                         }
  18.                 </script>
  19.         </head>
  20.         <body onload="initialize()">
  21.                 <div id="map_canvas" style="width:100%; height:100%"></div>
  22.         </body>
  23. </html>

Een beetje uitleg over de code hierboven is denk ik wel op zijn plaats. In de style wordt wat opmaak meegegeven zodat de kaart op fullscreen wordt getoond. In de eerste script tag wordt de Google Maps functionaliteit geladen. De aanroep van deze URL kan verschillen. Ik geef hier een kleine uitleg over de aanroep:

  • http://maps.googleapis.com/maps/api/js - Dit is het minimum vereiste om de Google Maps bibliotheek aan te roepen
  • sensor=true - Moet Google Maps zelf de locatie opzoeken of halen wij deze zelf op? Deze parameter is verplicht - Of hier nu true of false staat. Wanneer deze niet toegevoegd is zal Google Maps een alert geven en niet laden.
  • libraries=geometry - Dit laad een extra bibliotheek in. Hier later meer over.

Bij de tweede script tag wordt het pas leuk, hier gaan wij straks daadwerkelijk programmeren. Hierin wordt een initialize functie aangemaakt. Deze functie wordt in de body tag aangeroepen door middel van de onload parameter. Deze functie wordt dus uitgevoerd zodra de pagina geladen is. In deze functie wordt de Google Maps kaart aangemaakt. Door middel van document.getElementById('map_canvas') wordt aangegeven in welk element de kaart geplaatst moet worden. In dit geval is dat een DIV element met het ID map_canvas. Ook wordt er een object meegegeven met een aantal opties:

  • zoom: 15 - Hoever dient er ingezoomd te worden? Minimum is 0: De hele wereld. Maximum is 19: Een kijkje bij je in de achtertuin
  • mapTypeControl: false - Zorg ervoor dat de bezoeker het type kaart niet kan wijzigen.
  • streetViewControl: false - De gebruiker mag niet gebruik maken van Streetview

Dan hebben we ook nog een divje waarin Google Maps geladen wordt. Nu de hele code compleet is kun je hier een werkend exemplaar zien:

Huidige locatie opvragen

Nu de standaard staat kunnen we aan de slag met echt boeiende dingen! Dit doen we door de volgende code toe te voegen aan het einde van de intialize functie:

  1. if(navigator.geolocation) { // Kijk of de bezoeker de geo locatie functie heeft
  2.         navigator.geolocation.watchPosition(function(position) { // De bezoeker heeft geo locatie en staat toe dat deze gebruikt wordt.
  3.                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // Maak een LatLng object adv de locatie. Dit is nodig voor Google Maps
  4.                 map.setCenter(pos);
  5.         }, function() { // De bezoeker heeft geo locatie, maar staat niet toe dat deze gebruikt wordt
  6.                 handleNoGeolocation(true);
  7.         });
  8. } else {
  9.         // Browser doesn't support Geolocation
  10.         handleNoGeolocation(false);
  11. }

Het resultaat is hier te zien:

Circles toevoegen

Nu werkt dit prima, alleen is het niet duidelijk waar de gebruiker zich precies bevindt. Dit kunnen we duidelijker maken door een zogenaamde circle toe te voegen. Dit is niks meer dan een rondje, maar het maakt het meteen een stuk duidelijker. De code wordt dan als volgt:

  1. if(navigator.geolocation) {
  2.         var circle = new google.maps.Circle({ // Maak een cirkel aan en plaats deze op een willekeurige plek.
  3.                 center: new google.maps.LatLng(52.376018, 4.901962),
  4.                 radius: 50,
  5.                 map: map
  6.         });
  7.        
  8.         navigator.geolocation.watchPosition(function(position) {
  9.                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  10.                 accuracy = parseFloat(position.coords.accuracy); // Hoe nauwkeurig is de locatie? Hoe nauwkeuriger, hoe kleine de cirkel.
  11.                 circle.setCenter(pos); // Verplaats de cirkel van de willekeurige locatie naar de locatie van de bezoeker
  12.                 circle.setRadius(accuracy);
  13.                 map.fitBounds(circle.getBounds()); // Zorg ervoor dat er ingezoomd worden als de accuracy beter is
  14.                 map.setCenter(pos);
  15.         }, function() {
  16.                 circle.setMap(null); // De bezoeker geeft geen toestemming om zijn locatie te bekijken, dus de cirkel moet ook weer verwijderd worden.
  17.                 handleNoGeolocation(true);
  18.         });
  19. }

Probeer dit maar eens uit op je mobiel. Je locatie wordt precies bijgehouden.

Markeringen toevoegen

Nu we de locatie kunnen volgen, kunnen we ook kijken of de gebruiker in een bepaald gebied is. Wanneer we dat weten kan daar weer een actie aan gehangen worden? Bij een puzzeltocht kun je dan bijvoorbeeld een vraag laten invullen, maar ook dat je in de buurt van een winkel bent behoort bijvoorbeeld tot de mogelijkheden.

Kijken of we in de buurt van een locatie zijn kan op een paar manieren, maar het makkelijkste is om nog een cirkel toe te voegen. Om te kijken of we in de buurt zijn hebben we de geometry bibliotheek nodig van Google Maps. Indien je de eerste stap goed hebt gedaan is deze al geladen doordat de parameter libraries=geometry aan je script aanroep toe te voegen. Het toevoegen van een cirkel hebben we al gezien. Nu moeten we kijken of deze in de buurt van de huidige locatie cirkel is. Voor de cirkel gebruik ik als variabele $vasteCirkel De code ziet er dan als volgt uit:

  1. bounds = $vasteMarker.getBounds();
  2. if(bounds.contains(pos)) {
  3.         alert('Welkom in het Vondelpark');
  4. }

Vrij simpel hé? In de eerste regel kijk je hoe groot de cirkel is, en in de tweede regel kijken ik of de huidige positie hierbinnen valt. Indien dat het geval is zorg ik ervoor dat er een popup komt. Uiteraard is het helemaal vrij wat hier de actie moet zijn. De code komt er dan zo uit te zien:

  1. if(navigator.geolocation) {    
  2.         var circle = new google.maps.Circle({
  3.                 center: new google.maps.LatLng(52.376018, 4.901962),
  4.                 radius: 50,
  5.                 map: map
  6.         });
  7.        
  8.         $vasteMarker = new google.maps.Circle({
  9.                 radius: 500,
  10.                 center: new google.maps.LatLng(52.357256, 4.865055),
  11.                 map: map
  12.         });
  13.        
  14.         navigator.geolocation.watchPosition(function(position) {
  15.                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  16.                 accuracy = parseFloat(position.coords.accuracy);
  17.                 circle.setCenter(pos);
  18.                 circle.setRadius(accuracy);
  19.                 map.fitBounds(circle.getBounds());
  20.                 map.setCenter(pos);
  21.                
  22.                 bounds = $vasteMarker.getBounds();
  23.                 if(bounds.contains(pos)) {
  24.                         alert('Welkom in het Vondelpark');
  25.                 }
  26.         }, function() {
  27.                 circle.setMap(null);
  28.                 handleNoGeolocation(true);
  29.         });
  30. } else {
  31.         // Browser doesn't support Geolocation
  32.         handleNoGeolocation(false);
  33. }

Hoe weet Google Maps mijn locatie?

Je laptop heeft geen ingebouwde GPS maar toch weet Google Maps je locatie. Hoe kan dat? Eigenlijk is het heel simpel: Je browser haalt je locatie op aan de hand van het IP-adres. Nu is dat niet heel nauwkeurig, maar over het algemeen is dat wel het goede land. Wanneer er ook een GPS apparaat aanwezig is wordt de locatie nog nauwkeuriger bepaald.

Zien waar de Noobtutorials bezoekers vandaan komen?