Accueil > html5_css3 > geoloc-html5-google-maps

{ Géolocalisation html5 + google maps api }

Introduction

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

  • Suggérer des annonces ou publicités de manière ciblée
  • Adapter la langue du site (même si ça peut être fait autrement)
  • Etablir des itinéraires depuis là où se trouve le visiteur

Géolocalistion HTML5

Voyons donc dans la prochaine étape comment intégrer une carte toute simple qui localiserait les visiteurs sur une carte Google Maps

Code complet

<!-- 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>

Utilisation

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 :