Bloknood: Geolocatie in HTML5

Naar aanleiding van een vraag op het PHP-forum PHPhulp heb ik me vanochtend eens gebogen over geolocatie: het vinden of gebruiken van de huidige geografische positie van een internetgebruiker. Met HTML5 blijkt geolocatie kinderspel. En aangezien ik binnen enkele minuten een werkende locatievinder had, heb ik er meteen maar een plattegrond aan toegevoegd via de API van Google Maps.

Webpagina in HTML5 met geolocatie (listing)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Geolocatie in HTML5</title>
  <meta name="author" content="Ward van der Put">
</head>
<body>

  <p id="positie"></p>
  <div id="kaartje"></div>

  <script>
    // Deze JavaScript-functie meldt de geolocatie-eigenschappen
    // position.coords.latitude (breedtegraad) en position.coords.longitude
    // (lengtegraad) van de huidige positie.  Deze geografische coördinaten
    // geven we vervolgens door aan de API van Google Maps.
    function showPosition(position)
    {
      document.getElementById("positie").innerHTML 
        = "Breedtegraad: " + position.coords.latitude
        + "<br>Lengtegraad: " + position.coords.longitude;

      var pos = position.coords.latitude + "," + position.coords.longitude;

      var src = "http://maps.googleapis.com/maps/api/staticmap?center="
        + pos + "&zoom=15&size=640x480&maptype=roadmap&sensor=false";

       document.getElementById("kaartje").innerHTML = "<img src='"
         + src + "' alt='Google Maps'>";
    }

    // Als een browser geolocatie met HTML5 ondersteunt, kun je de huidige
    // locatie ophalen met de methode getCurrentPostion() van het object
    // navigator.geolocation.  Als er een positie wordt gevonden, dan geven
    // we die door aan de bovenstaande functie showPosition().
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      document.getElementById("positie").innerHTML
        = "Geolocatie wordt niet ondersteund door deze browser.";
    }
  </script>

</body>
</html>

Bloknood

dinsdag 11 juni 2013

Geolocatie in HTML5

Webpagina in HTML5 met geolocatie (listing)

1 opmerking: