feedback
jobs
about
content

Géolocaliser ses visiteurs avec Google API loader.

De nombreuses applications et sites pour mobile, utilisent la géolocalisation en se basant sur les informations transmises par le téléphone. . Cependant, pour les personnes consultant un site à partir d'un ordinateur fixe, le seul moyen de récupérer des données est la localisation IP, c’est à dire la localisation du point de connexion Internet auquel est connecté votre ordinateur (ce qui est plus ou moins précis).

  • L'api Google API loader( qui sert par exemple accéder à plusieurs librairie de scripts ) propose par défaut une fonction qui permet de connaître
  • la latitude,
  • la longitude,
  • la ville
  • la région,
  • et le pays de connexion de l'utilisateur

Pour utiliser cette API, rendez-vous sur le site de Google api loader, et enregistrez votre site pour obtenir une clé d'API (c'est ici) http://code.google.com/intl/fr/apis/loader/signup.html

Pour l'utiliser il faut charger le script google api loader entre les balise de votre page :
On écrit ensuite le code qui vas afficher les infos de géolocalisation :

 

<script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
 
 var adr = "ta latitude : " + google.loader.ClientLocation.latitude +"<br>";
 adr += "ta longitude : " + google.loader.ClientLocation.longitude +"<br>";
 adr += "ta ville : " + google.loader.ClientLocation.address.city +"<br>";
 adr += "ta region : " + google.loader.ClientLocation.address.region +"<br>";
 adr += "ton pays : " + google.loader.ClientLocation.address.country +"<br>";
 document.getElementById("test_gloader").innerHTML = adr;
 }
 
 </script>
</head>
<body onload="initialize()">
 <div id="test_gloader">Patientez...</div>
 </body>

comme on peut le voir dans l'exemple, on obtient la région, la ville et le pays...
c'est pas magnifique ça ?

Oui mais vous auriez aussi voulu le code postal, le département et qu'en plus ça cause français aulieu d'anglais pour le nom de la région ?

Et bien c'est possible, pour cela nous allons utilisé la célébre Api de google map qui est capable de faire du géocodage inversé, c'est a dire donnée les coordonées postales d'un lieu en fonction de sa latitude et sa longitude.

Le principe est donc le suivant :
on récupère la latitude et la longitude avec les fonction de google api loader.
On les injecte dans l'api google map

<script src="https://www.google.com/jsapi?votre cle google api" type="text/javascript"></script>
 <script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true">
 </script>
<script type="text/javascript">
 function initialize() {
var adr2 ="";
 var lat=google.loader.ClientLocation.latitude;
 var longi=google.loader.ClientLocation.longitude;
 var latlng = new google.maps.LatLng(lat, longi);
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({'latLng': latlng}, function(results, status) {
 
 if (status == google.maps.GeocoderStatus.OK) {
 if (results[0]) {
 
 var elt = results[0].address_components;
 
 for(i in elt){
 if(elt[i].types[0] == 'postal_code')
 gmap_cp=elt[i].long_name;
 if(elt[i].types[0] == 'locality')
 gmap_ville=elt[i].long_name;
 if(elt[i].types[0] == 'administrative_area_level_1')
 gmap_region=elt[i].long_name;
 if(elt[i].types[0] == 'administrative_area_level_2')
 gmap_departement=elt[i].long_name;
 if(elt[i].types[0] == 'country')
 gmap_pays=elt[i].long_name;
 }
 adr2 += "ta ville : " + gmap_ville +"<br>";
 adr2 += "ton code postal : " + gmap_cp +"<br>";
 adr2 += "ton département : " + gmap_departement +"<br>";
 adr2 += "ta région : " + gmap_region +"<br>";
 adr2 += "ton pays : " + gmap_pays +"<br>";
 document.getElementById("test_gloader_gmap").innerHTML = adr2;
 }
}
 });
 }
</script>
 </head>
 <body onLoad="initialize()">
 
 <div id="test_gloader_gmap" >teoo..</div>
 </body>

Vous pouvez voir dans l'exemple qu'on obtient le nom de la ville, du département, de la région, et le code postal (le tout dans la langue d'origine tu pays ou l'on se trouve).

Et qu'est ce qu'on fait avec tout ça ?

Et bien on peut maintenant imaginer plein de services liés à la géolocalisation sur son site, comme par exemple :

  • Simplifier le remplissage d'un formulaire en pré remplissant les champs de ville et de département
  • Proposer une liste de point de vente à proximité de l'utilisateur
  • Proposer un point de départ pour un itinéraire à partir du point de connexion.
  • Proposer la météo sur la région ou on se connecte.

Les exemples sont ici : http://passeurs-de-savoirs.fr/lab/google-api-geolocalisation.html

search

12 commentaires

Abonnez vous au flux des commentaires Cliquez ici

  1. LeSnark dit :

    Ce fut un bien beau truc… qui ne marche semble-t-il plus depuis quelques jours…
    "google.loader.ClientLocation is null"… sniff

  2. Lolobobo dit :

    je ne comprend pas bien il semble que ça fonctionne toujours (si du moins j'en crois la page d'exemple)

  3. Anonymous dit :

    … ça avait l'air bien intéressant, ça ne fonctionne plus ?

  4. Nicolas dit :

    Cela fonctionne toujours, mais google à un peu de mal à retrouver certaines ip…
    par exemple chez moi cela fonctionne, mais quand je passe par un réseau d’entreprise, google.loader.clientlocation est null.
    selon moi, et arrêtez moi si je me trompe, google.loader.clientlocation deviens null si il n’a pas d’ip en entrée.
    donc le mieux est de trouver un moyen de récupérer une l’ip de l’utilisateur de manière certaine comme sur MonIp.org, et de trouver le moyen de récupérer la latitude et longitude de celle ci, après le code si dessus avec quelques modif, fonctionnera à tous les coups.
    Si quelqu’un a ce moyen, je suis preneur

    • sidi dit :

      Bonjour

      je suis sur le script google load que vous avez postez , et je souhaiterais vivement une aide si vous avez trouver la solution et si fonctionne merci

  5. sebastien dit :

    Une petite question relativement simple : je veux afficher le nom des boutiques qui se trouve dans la région du visiteur mais pour ça je dois écrire une fonction php qui va récupérer la région et ça va donc faire un truc du genre
    if ($region= »bourgogne)
    et du coup je voudrais voir la liste des regions récupérées par l’api google pour savoir si je dois ecrire, par-exemple
    $region = paca
    $region= PACA
    $region = provence alpes cote d’azur
    $region = Provence-Alpes-Côtes-d’Azur
    etc…
    quelqu’un sait où je peux trouver cette liste ?
    Merci par avance :-)

    • laurentB dit :

      Salut Sebastien

      Après une rapide recherche sur google, il semble que :
      les nom de régions envoyés par Google apiloader sont :

      – En anglais (par exemple, Bourgogne c’est Burgundi),
      – Que les accents sont toujours absents (par exemple, Rhônes-Alpes est Rhone Alpes).
      – et que, pour les régions aux noms composés, les traits d’union sont absents.

      pour une liste des nom de régions françaises en anglais, il y en a une là : http://www.france-pub.com/list_regions.html

  6. sebastien dit :

    c’est gentil laurent, mais ça ne répond pas vraiment à ma question. Moi je voudrais savoir non pas comment les anglais traduisent Provence-Alpes-Côte d’Azur mais comment l’api google map va traduire.

    Par exemple dans le tableau (de ton lien) on voit qu’en anglais on dit : Rhone-Alps et en français on dit Rhône-Alpes
    Donc google en français écrira « Rhône-Alpes » ?
    Or dans ton commentaire tu dis que ce serait Rhone Alpes…

    Je suis un peu perdi là…

  7. sebastien dit :

    je viens de faire un test
    j’ai changé la latitude et la longitude dans le code pour voir ce que ça afficher
    je constate que pour ces trois régions :
    Île-de-France
    Midi-Pyrénées
    Provence-Alpes-Côte d’Azur
    ce qui s’affiche est effectivement identique (en français) à ce qui est écrit dans le tableau de ton lien :-)

  8. sebastien dit :

    rectificatif : le tableau ne semble pas bon car selon ce tableau on devrait avoir « Pays-de-la-Loire » alors que c’est « Pays de la Loire » qui s’affiche en réalité…
    je vais devoir faire le test pour chaque région ^^

  9. LaurentB dit :

    Houla, tu reviens sur un commentaire vieux d’un mois. je vais a voir du mal a me souvenir de ce que j’avais lu a l’époque. par contre, si tu fait un test sur toutes les régions (et que tu as une liste) n’hésite pas à la publier et a mettre un lien cici, ça pourra simplifier la vie d’autres développeurs confrontés aux mêmes problèmes que toi.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


7 − = 4

jobs
feedback
Bear