Ainsi vous avez décidez d'intégrer cette merveilleuse technologie qu'est la géolocalisation !? Excellente idée car c'est réellement un outil très puissant qui a de très nombreuses utilités dans la conception des sites internet. Voici quelques idées d'applications web qui peuvent se baser sur cette technologie de géolocalisation HTML5
Voyons donc dans la prochaine étape comment intégrer une carte toute simple qui localiserait les visiteurs sur une carte Google Maps
<!-- Déclaration type HTML5 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Geolocation</title> <!-- Inclusion de l'API Google Maps --> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> // On vérifie si le navigateur supporte la géolocalisation if(navigator.geolocation) { function hasPosition(position) { // Instanciation var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude), // Ajustage des paramètres myOptions = { zoom: 15, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }, // Envoi de la carte dans la div mapDiv = document.getElementById("mapDiv"), map = new google.maps.Map(mapDiv, myOptions), marker = new google.maps.Marker({ position: point, map: map, // Texte du point title: "Vous êtes ici" }); } navigator.geolocation.getCurrentPosition(hasPosition); } </script> <style> #mapDiv { /* Modifier la taille de la carte avec width et height */ width:700px; height:500px; border:1px solid #efefef; margin:auto; -moz-box-shadow:5px 5px 10px #000; -webkit-box-shadow:5px 5px 10px #000; } </style> </head> <body> <!-- La carte sera chargée ici --> <div id="mapDiv"></div> </body> </html>
Lorsqu'un visiteur accédera à cette page, le navigateur va automatiquement lui signaler que le site souhaite connaître sa position géographique, cette demande se présente sous différentes formes selon les navigateurs dont en voici quelques exemples :
Voici comment réagit Opera :
Voici comment réagit Google Chrome :
Voici comment réagit Internet Explorer :