Utiliser la géolocalisation avec HTML 5 et JavaScript
Il est toujours possible d’exploiter les capacités de JavaScript avec HTML 5. Voyons un exemple de plus en plus répandu : la géolocalisation.
La géolocalisation
La géolocalisation permet de savoir où se trouve votre utilisateur, et de lui proposer du contenu en conséquence. Pour votre site, vous utiliserez simplement l’objet JavaScript navigator.geolocation.
Comment ça se passe ?
Exemple :
<script type="text/javascript">
// si l'objet navigator est dis ponible
if (navigator.geolocation) {
console.debug('geolocalisation en cours...');
navigator.geolocation.getCurrentPosition(getP osition, getError);
}
else
document.getElementById("error").innerHTML="La géolocalisation n'est pas disponible avec votre navigateur.";
function getPosition(position)
{
document.getElementById("latitude").innerHTML = "Latitude : "+latitude;
document.getElementById("longitude").innerHTML = "Longitude : "+longitude;
}
function getError(error)
{
switch(error.code) {
case error.PERMISSION_DENIED:
document.getElementById("error").innerHTML="User denied the request for Geolocation."
break;
default:
document.getElementById("error").innerHTML="Votre géolocalisation est impossible...";
}
};
</script>Au chargement de votre page, est-ce que l’objet navigator javascript est disponible ?
Si oui tant mieux, sinon vous faites un innerHTML sur la div error qui est contenue dans la partie body de votre page HTML. Si vous ne savez pas comment fonctionne innerHTML, regardez nos cours javascript sur www.develop4fun.fr, il y a des cours javascript qui vous expliquent comment fonctionne getElementById avec innerHTML.
Vous récupérez la div error et vous affichez le message pour expliquer au visiteur que la géolocalisation n’est pas disponible.
Si l’objet navigator est disponible, vous appellez la fonction de géolocalisation getCurrentPosition pour récupérer la position de l’internaute. Cette fonction prend deux paramètres essentiels: le premier
est la fonction que vous souhaitez appeler si la géolocalisation a fonctionné, et vous l’avez probablement anticipé.
Le second paramètre est une fonction qui sera appelée en cas d’échec. Dans notre cas, la fonction getPosition est appelée, et une fonction getError est appelée en cas d’erreur. Dans cette dernière, vous récupérez le code d’erreur. En fonction du code d’erreur, un message différent est affiché au visiteur.
Il existe plusieurs codes erreurs décrivant un refus de l’utilisateur d’être géolocalisé, ou une impossibilité de récupérer le lieu où se trouve l’utilisateur, un problème de temps de réponse pour récupérer la position, ou plus simplement une erreur inconnue. Vous gérez également un cas défaut pour couvrir tous les problèmes potentiels.
En cas de succès, la fonction getPosition est appelée. Notre fonction maison récupère la position, latitude et longitude, vous pouvez même récupérer la précision avec accuracy. Vous renseignez latitude et longitude avec innerHTML pour l’afficher dans la page web.
Conclusion
La géolocalisation va vous permettre de proposer un contenu plus proche de votre utilisateur, plus personnalisé ou encore de lui offrir des fonctionnalités spécifiques.
Utilisez l’objet navigator et pensez à gérer les exceptions qui peuvent survenir, comme le fait que l’utilisateur peut désactiver la géolocalisation.
➡️ Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
Voila, vous pouvez maintenant briller en soirée …
Formations de Develop4fun
- Parcours pour devenir un programmeur web
- Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
- Apprendre à coder en HTML et CSS : Cours Complet
- Parcours pour devenir un programmeur de jeux vidéo
- Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
- Apprenez à programmer en C#
- Apprenez à programmer en C++
