Insérer les coordonnées d’une adresse en BDD

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';
?>

10 Réponses à “Insérer les coordonnées d’une adresse en BDD”

  1. Panam21 :

    Bonjour à tous,

    J’ai testé ce tuto et ça fonctionne parfaitement !
    Un grand merci au concepteur pour son aide….

    Cordialement.

  2. l.2312 :

    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

  3. Nicolas :

    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.

  4. Nicolas :

    Je retire ma demande, j’ai reussi désolé du dérangement et encore merci pour vos tutos :)

  5. hl77 :

    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

  6. beef :

    Bonjour,
    Très bon post.
    Cependant FIrefox 4 ne semble pas fonctionner avec.
    Salutations

  7. webmaster :

    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,

  8. Geoff95 :

    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.

  9. eric :

    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

  10. ZaQ :

    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

Laisser une réponse

Security Code: