HTML5 / CSS 2.x/3 / PHP / MySQL ...

HTML et géolocalisation

Préambule

L'API de géolocalisation est disponible depuis firefox version 3.5 ainsi que sur de nombreux navigateurs de téléphones mobiles de dernière génération.

Cet API récupère les coordonnées via le récepteur GPS intégré au téléphone mobile. Accessoirement, il peut aussi communiquer avec le noeud de raccordement WiFi ou routeur si celui-ci est lui-même géolocalisé.

Pour assurer la confidentialité, une alerte similaire à un bloqueur de popup demande si vous autoriser le navigateur à communiquer la position depuis la la page qui exploite cet API de géolocalisation. Si vous autorisez la communication de cette géolocalisation, l'API pourra exploiter ces données.

Exemple de code javascript donnant accès à l'API de géolocalisation:

<script type='text/javascript'>
    function myCallback(pos) {
        var myLatitude  = pos.latitude;
        var myLongitude = pos.longitude;
        var myAltitude  = pos.altitude;
    }
 
    /**
     * Test pour support de GeoLocation
     */
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(myCallback);
    }
</script>

Il suffit ensuite d'injecter les coordonnées longitude et latitude (et accessoirement altitude) dans des champs <input type='hidden'...> puis de passer la main à un autre script qui saura exploiter ces géocoordonnées et ainsi bluffer l'usager en lui proposant des informations liées directement à sa position géographique...

Application pratique

Voici un exemple très simple et pratique pour récupérer ces données géolocalisées dans un formulaire HTML5:

<script type="text/javascript">
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
        var latitude  = position.coords.latitude;
        var longitude = position.coords.longitude;
        var altitude  = position.coords.altitude;
        document.getElementById('geolocation').innerHTML = '<input type="hidden" name="latitude" value="' + latitude + '">'
            + '<input type="hidden" name="longitude" value="' + longitude + '">'
            + '<input type="submit" value="aires à proximité de\r\nma position actuelle">';
    });
}
</script>
<form id="geolocation" onLoad="getCoordPosition();" 
      method="POST" action="index.php?page=aires/listeAiresAutourDeVous">
</form>

Le code javascript détecte si le navigateur accepte la géolocalisation. Si c'est le cas, il injecte les éléments input entre form et /form. Si cette injection échoue, on retrouve dans le source HTML ceci:

<form id="geolocation" onLoad="getCoordPosition();" 
      method="POST" action="index.php?page=aires/listeAiresAutourDeVous">
</form>

L'élément form n'affichera rien si on n'a aucun champ de saisie et de validation visible.

Si l'injection s'effectue avec succès, on doit retrouver ce code dans le formulaire de saisie:

<form id="geolocation" onLoad="getCoordPosition();" 
      method="POST" action="index.php?page=aires/listeAiresAutourDeVous">
      <input type="hidden" name="latitude" value="48.543589741">
      <input type="hidden" name="longitude" value="2.3454345">
      <input type="submit" value="aires à proximité de\r\nma position actuelle">
</form>

Dans ce cas, l'utilisateur peut valider le formulaire, ce qui lui donnera accès à la page qui exploitera les données longitude et latitude de notre formulaire de saisie.

Tous les articles sur ce thème