Dans cette démo de l’Api Google Map, nous allons voir un exemple parmi d’autres de l’utilisation de la classe Geocoder pour récupérer les coordonnées d’un point puis insérer ces dernières dans une base de données.
Pour cette application, un appel AJAX sera nécessaire pour appeler le script PHP chargé de l’insertion des coordonnées de l’adresse en base de données. Il faudra donc penser à créer l’objet XMLHttpRequest ou alors charger un fichier tiers comme la librairie JQuery par exemple.
Source et Explications
SECTION HTML <html> <head> ... ... /* Appel API Google Map et fichier tiers pour appel AJAX */ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/ jquery.min.js"></script> ... ... </head> <body> /* Formulaire HTML */ <input type="text" id="adresse" value="saisissez votre adresse à géolocaliser" /> <input type="button" onclick="geolocalise()" value="géolocaliser" /> Latitude : <input type="text" id="lat" value="" /> Longitude : <input type="text" id="lng" value="" /> /* Div où s'affichera le retour de l'appel AJAX (non obligatoire) */ <div id="answer">Réponse de l'appel AJAX :</div> ... ... SCRIPT DE L'APPLICATION <script type="text/javascript"> /* Déclaration des variables globales */ var geocoder = new google.maps.Geocoder(); var addr, latitude, longitude; /* Fonction chargée de géolocaliser l'adresse */ function geolocalise(){ /* Récupération du champ "adresse" */ addr = document.getElementById('adresse').value; /* Tentative de géocodage */ geocoder.geocode( { 'address': addr}, function(results, status) { /* Si géolocalisation réussie */ if (status == google.maps.GeocoderStatus.OK) { /* Récupération des coordonnées */ latitude = results[0].geometry.location.lat(); longitude = results[0].geometry.location.lng(); /* Insertion des coordonnées dans les input text */ document.getElementById('lat').value = latitude; document.getElementById('lng').value = longitude; /* Appel AJAX pour insertion en BDD */ var sendAjax = $.ajax({ type: "POST", url: 'insert-in-bdd.php', data: 'lat='+latitude+'&lng='+longitude+'&adr='+addr, success: handleResponse }); } function handleResponse(){ $('#answer').get(0).innerHTML = sendAjax.responseText; } }); } </script> </body> </html> SECTION PHP (fichier insert-in-bdd.php) <?php header('Content-type: text/html; charset=ISO-8859-1'); if(isset($_POST['lat']) && isset($_POST['lng'])){ $lat = addslashes($_POST['lat']); $lng = addslashes($_POST['lng']); $adr = addslashes($_POST['adr']); $db = mysql_connect(SERVER, USER, PASSWORD); $select = mysql_select_db(DATABASE, $db); mysql_query('INSERT INTO ma_table (lat,lng,adresse) VALUES ("'.$lat.'","'.$lng.'","'.$adr.'")'); echo 'Vos coordonnées ont bien été insérées en base de données.'; }else echo 'Problème rencontré dans les valeurs passées en paramètres'; ?>
30 janvier 2011 à 9 h 17 min
Bonjour à tous,
J’ai testé ce tuto et ça fonctionne parfaitement !
Un grand merci au concepteur pour son aide….
Cordialement.
1 février 2011 à 12 h 20 min
Super !! un grand merci pour ce tuto vraiment intéressant et utile !
Petite question, imaginons que j’ai plusieurs champs pour l’adresse (je veux séparer les données dans ma base pour un autre usage sur mon site par exemple 4 champs : adresse, code postal, ville et pays.
comment faire pour récupérer les données de ces 4 champs et ensuite faire que la géolocalisation fonctionne comme expliqué sur ce tuto ?
Une idée de comment procéder au niveau du javascript ?
Merci d’avance pour votre aide !
Meilleures salutations
8 avril 2011 à 17 h 11 min
Bonjour,
Tout d’abord merci beaucoup pour ce tuto. En revanche, j’aurai besoin de faire l’inverse : inscrire des coordonnées que je récupère dans ma bdd pour les afficher sur la carte google map de ma page.
Est-ce possible ? J’ai essayé en insérant une balise php dans la fonction LatLng() mais sans résultat.
8 avril 2011 à 17 h 14 min
Je retire ma demande, j’ai reussi désolé du dérangement et encore merci pour vos tutos
2 mai 2011 à 16 h 34 min
Bonjour Nicolas
Je te cite :
“Tout d’abord merci beaucoup pour ce tuto. En revanche, j’aurai besoin de faire l’inverse : inscrire des coordonnées que je récupère dans ma bdd pour les afficher sur la carte google map de ma page.”
Tu dis ensuite que tu as réussi. Peux-tu m’expliquer ta solution ?
Merci d’avance
15 mai 2011 à 12 h 33 min
Bonjour,
Très bon post.
Cependant FIrefox 4 ne semble pas fonctionner avec.
Salutations
18 mai 2011 à 8 h 44 min
Bonjour Beef,
De mon côté je ne rencontre aucun problème sur Firefox 4… Peut-être as-tu omis d’inclure une librairie ou autre…?
Cdlt,
22 mai 2011 à 11 h 53 min
Salut,
J’utilise une boutique PrestaShop (elle n’est pas utilisée comme boutique en ligne mais comme catalogue pour VDI), et je voudrais utiliser ce script lors de la validation d’inscription. En fait, les Vendeuses s’inscrivent, et lors de l’inscription elle définissent un rayon d’action (jusque là pas de soucis), ensuite quand elles valide, je veux que le script s’exécute pour rechercher en fonction de la ville indiquée.
Ce que je voulais savoir, c’est est-ce que si la personne qui s’inscrit n’active pas le JS sur son PC/Mac le script s’exécutera tout de même(puisque c’est finalement sensé se passer côté Server non?)?
Cordialement,
Geoffrey.
31 mai 2011 à 18 h 01 min
Bonjour,
comment faire pour importer les donnés de la base sur ma carte
google earth
merci pour ce tuto et de votre réponse
29 août 2011 à 15 h 45 min
Bonjour,
je voudrais récupérer les adresses d’une base de données pour ensuite les convertir en latitude et longitude et les afficher sur ma carte en tant que marqueurs
Comment faire ?
Merci