API Google Maps Partie 1 : géolocalisation

Publié le 27 juillet 2016 par Frédéric
Catégorie(s) : Développement

Nous commençons une série de 3 articles sur l’utilisation de l’API Google Maps. Dans ce premier article, nous allons voir comment afficher votre position sur une carte. Nous en profitons également pour poursuivre notre tour d’horizon des nouvelles fonctionnalités apportés par le HTML5 avec l’API Geolocation. Cette API permet tout simplement d’accéder à la localisation de vôtre appareil, que ce soit un smartphone ou votre ordinateur portable.

L’API Geolocation est disponible sur la plupart des navigateurs récents, que ce soit sur mobile ou non.

Aperçu

Dans cet article, nous n’utiliserons qu’une seule fonction : navigator.geolocation.getCurrentPosition() et est utilisable de cette façon :

navigator.geolocation.getCurrentPosition().then(function(objPosition) {
    ...
});

Cette fonction renvoie un objet de type Position contenant plusieurs informations sur la position de votre appareil, comme la longitude, la latitude, l’altitude, etc. Vous pouvez consulter cette page sur le Mozilla Developer Network pour de plus amples informations sur les données retournées par l’API. Dans cet article, nous nous intéresserons principalement à deux valeurs : la latitude et la longitude.

Dis-moi où tu es…

Pour ce premier exemple, nous allons utiliser la fonction citée plus haut pour afficher toutes les informations qu’elle nous renvoie.

Ouvrez votre éditeur favori et saisissez le code suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Geolocation API test</title>
        <meta charset="utf8" />
        <script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(objPosition) {
        document.getElementById("latitude").innerHTML = objPosition.coords.latitude;
        document.getElementById("longitude").innerHTML = objPosition.coords.longitude;
        document.getElementById("accuracy").innerHTML = objPosition.coords.accuracy;
        document.getElementById("altitude").innerHTML = objPosition.coords.altitude;
        document.getElementById("altitudeaccuracy").innerHTML = objPosition.coords.altitudeAccuracy;
        document.getElementById("heading").innerHTML = objPosition.coords.heading;
        document.getElementById("speed").innerHTML = objPosition.coords.speed;
    }, function(objErreur) {
        var strErreur = '';
        switch(objErreur.code) {
            case objErreur.PERMISSION_DENIED:
                strErreur = "Vous n'avez pas donné la permission de déterminer votre position."
                break;
            case objErreur.TIMEOUT:
            case objErreur.POSITION_UNAVAILABLE:
                strErreur = "Votre position n'a pas pu être déterminée."
                break;
            default:
                strErreur = "Erreur inconnue."
                break;
        };
        alert(strErreur);
    }, {
        timeout: 20,
        enableHighAccuracy: true,
        maximumAge: 0
    });
}
        </script>
    </head>
    <body>
        Latitude : <span id="latitude"></span><br />
        Longitude : <span id="longitude"></span><br /> 
        Précision : <span id="accuracy"></span> mètres<br /> 
        Altitude : <span id="altitude"></span><br />
        Précision de l'altitude : <span id="altitudeaccuracy"></span> mètres<br /> 
        Direction : <span id="heading"></span> degrés<br />
        Vitesse : <span id="speed"></span> m/s<br />
    </body>
</html>

Dans ce code, nous avons passé trois paramètres à la fonction getCurrentPosition() :

une première fonction qui sera appelée quand la localisation est obtenue;
une deuxième fonction qui sera appelée si une erreur est survenue durant la récupération de la localisation;
un tableau de paramètres. Ici, nous avons demandé à l’API de nous fournir des informations précises (« enableHighAccurate »), et un temps de 20 secondes maximum allouée au matériel pour obtenir la localisation (« timeout »). Comme les informations de localisation peuvent venir d’un cache, nous avons demandé à ce que le matériel ne s’en serve pas (« maximumAge »).

Enregistrez le fichier au format HTML et ouvrez-le dans votre navigateur. Pour des raisons de confidentialité, le navigateur vous demandera si vous voulez autoriser la page web à accéder à votre localisation. Acceptez la demande, sinon l’exemple ne fonctionnera bien évidemment pas.

Selon l’appareil, l’OS et la méthode employée pour vous localiser, il est possible que la fonction ne renvoie pas toutes les informations. Par exemple, depuis un poste fixe où la localisation s’effectue grâce à l’adresse IP publique de la machine, seules la longitude, la latitude et la précision sont renvoyés :

En revanche, sur un smartphone équipé d’un GPS, les informations renvoyées sont bien plus précises :

Vous êtes ici !

Dans ce deuxième exemple, nous allons voir comment placer un repère sur une carte Google Maps à partir d’une latitude et d’une longitude. Dans un premier temps, entre les balises <head> insérez le code suivant :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    position: relative;
}
#maps {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
</style>

Toujours entre les balises <head>, remplacez le bout de code JavaScript par celui-ci :

var objLocation, objMaps, objCurrentLocationMarker, objInfoWindow;

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        objLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        objMaps = new google.maps.Map(document.querySelector("#maps"), {
            zoom: 16, 
            center: objLocation, 
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            zoomControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        objCurrentLocationMarker = new google.maps.Marker({
            position: objLocation,
            map: objMaps,
            title: "Vous êtes ici !" 
        });
        google.maps.event.addListener(objCurrentLocationMarker, 'click', function() {
            objInfoWindow.setContent("Vous êtes ici !");
            objInfoWindow.open(objMaps, this);
        });

        objInfoWindow = new google.maps.InfoWindow();
    }, function(msg) {
        alert("Erreur : " + msg);
    });
}

Dans ce code, nous initialisons notre carte grâce à l’appel à la fonction new.google.maps.Map() en passant deux arguments : la div qui contiendra la carte et un objet contenant divers réglages dont :

zoom : le niveau de zoom de la carte;
center : la position géographique qui apparaîtra au centre de la page;
streetViewControl : l’affichage ou non des contrôles permettant d’utiliser la fonction StreetView. Ici, nous n’affichons pas ces contrôles.
zoomControl : l’affichage ou non des contrôles permettant de zoomer/dézoomer. Ici, ces contrôles sont affichés;
mapTypeControl : l’affichage ou non des contrôles permettant de changer de type de carte. Ici, nous n’affichons pas ces contrôles.
mapTypeId : le type de carte.

Quatre types de cartes sont disponibles :

MapTypeId.ROADMAP : affiche une carte toute simple avec le nom des rues et des lieux;
MapTypeId.SATELLITE : affiche des images satellites provenant de Google Earth, mais sans le noms des rues;
MapTypeId.HYBRID : affiche des images satellites mais avec le nom des rues;
MapTypeId.TERRAIN : ce quatrième type est en fait similaire à ROADMAP, sauf que les informations sont affichées ici plus clairement.

Nous plaçons un repère sur cette carte à partir des coordonnées récupérés grâce à l’API Geolocation en appelant la fonction new.google.maps.Marker(), en oubliant pas de passer en paramètre la position (variable objLocation).

Dans la balise <body>, n’oubliez pas d’ajouter une div vide qui contiendra la carte :

<div id="maps"></div>

Enregistrez les modifications, puis dans votre navigateur, rafraichissez la page. Une carte Google Maps s’affiche sur toute la page avec, au centre, un repère indiquant votre position :

Pour finir…

Ce sera tout pour cet article. L’exemple que nous avons vu jusqu’ici nous a permis d’exploiter les données de l’API Geolocation en plaçant un repère sur une carte. Dans la deuxième partie, nous enrichirons cet exemple en exploitant un peu plus l’API Google Maps pour afficher, par exemple, les établissements présents autour de la position de l’utilisateur.

Mots-clefs : API Geolocation Google Maps HTML5 JavaScript

2 réponses à “API Google Maps Partie 1 : géolocalisation”

Frédéric
Publié le 29 juillet 2016 à 17:44

Merci de votre visite sur notre blog, et de nous avoir remonté l’erreur de permissions sur la rédaction des commentaires. Nous avons réglé le problème.

Concernant l’article, effectivement, il s’agissait bien du même objet entre le switch et le case. L’article a été corrigé.

Frédéric
Cebo
Publié le 29 juillet 2016 à 17:38

Bonjour,

à la recherche d’information sur la localisation par IP ou GPS, je suis tombé sur votre tuto.
Merci pour les informations, notamment sur la manière de faire en JS.

PS: est-ce qu’il ne n’agit pas du même objet entre switch et case ?
switch(objErreur.code) {
case objErreur.PERMISSION_DENIED:

Les commentaires ont été désactivés sur cet article.