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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
|
1 2 3 |
<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
|
1 2 3 |
<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> |
|
1 2 |
<script type="text/javascript"> function initialize() { |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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; } |
|
1 2 3 |
} }); } |
|
1 2 3 4 5 6 |
</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
Ce fut un bien beau truc… qui ne marche semble-t-il plus depuis quelques jours…
"google.loader.ClientLocation is null"… sniff
je ne comprend pas bien il semble que ça fonctionne toujours (si du moins j'en crois la page d'exemple)
… ça avait l'air bien intéressant, ça ne fonctionne plus ?
@anonyme : si
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
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
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 🙂
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
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à…
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 🙂
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 ^^
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.