Géocoder une adresse - V3

Pour récupérer les coordonnées géographiques d’une adresse ou d’une ville, nous pouvons utiliser le service de geocodage : geocoder, de l’api Google Map.

Dans cet exemple, 2 points sont abordés :

  • Récupérer les coordonnées d’une adresse en affichant un marker sur la map
  • Supprimer les markers au fil des recherches afin de n’avoir toujours qu’un seul marker sur la carte

<script type="text/javascript">

  /* Déclaration des variables  */
  var geocoder;
  var map;
  var markers = new Array();
  var i = 0;

  /* Initialisation de la carte  */
  function initialize() {
   /* Instanciation du geocoder  */
   geocoder = new google.maps.Geocoder();
   var paris = new google.maps.LatLng(48.8566667, 2.3509871);
   var myOptions = {
    zoom: 4,
    center: paris,
    mapTypeId: google.maps.MapTypeId.HYBRID
   }
   /* Chargement de la carte  */
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  /* Fonction de géocodage déclenchée en cliquant surle bouton "Geocoder"  */
  function codeAddress() {
   /* Récupération de la valeur de l'adresse saisie */
   var address = document.getElementById("address").value;
   /* Appel au service de geocodage avec l'adresse en paramètre */
   geocoder.geocode( { 'address': address}, function(results, status) {
    /* Si l'adresse a pu être géolocalisée */
    if (status == google.maps.GeocoderStatus.OK) {
     /* Récupération de sa latitude et de sa longitude */
     document.getElementById('lat').value = results[0].geometry.location.lat();
     document.getElementById('lng').value = results[0].geometry.location.lng();
     map.setCenter(results[0].geometry.location);
     /* Affichage du marker */
     var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
     /* Permet de supprimer le marker précédemment affiché */
     markers.push(marker);
     if(markers.length > 1)
      markers[(i-1)].setMap(null);
      i++;
     } else {
      alert("Le geocodage n\'a pu etre effectue pour la raison suivante: " + status);
     }
    });
  }

</script>

8 Réponses à “Géocoder une adresse - V3”

  1. iDavid :
    9 janvier 2011 à 13 h 56 min

    Bonjour et merci pour ce code.

    Je ne suis pas très bon en JS et je désirais passer l’adresse à géocoder par une variable JS et non par un champs.
    Comment puis je adapter le champs en conséquence?

    Merci

  2. webmaster :
    10 janvier 2011 à 10 h 27 min

    La valeur de la ville ou de l’adresse à géocoder est récupérée dans la fonction codeAddress à l’aide de la ligne

    var address = document.getElementById("address").value;

    Pour passer par une variable JS, il suffit de supprimer cette ligne et d’appeler la fonction codeAddress avec un paramètre address :

    function codeAddress(address){ ....

    Cdlt,

  3. Zebu :
    14 janvier 2011 à 14 h 57 min

    Bonjour,

    est il possible de récuperer le département et le pays ?

    Merci

  4. webmaster :
    14 janvier 2011 à 19 h 20 min

    Bonjour Zebu,

    Je t’invite à consulter l’exemple d’utilisation du Géocoder de Google situé à cette adresse :

    http://www.weboblog.fr/recuperer-departement-et-pays-google-map

    Il devrait répondre à ta question.

    Cdlt,

  5. mr bob :
    16 février 2011 à 14 h 19 min

    Si l’on souhaite placer plusieurs points (car on a plusieurs adresse), on fait comment ?

  6. 0sef :
    30 mars 2011 à 0 h 52 min

    soit le bout de code suivant :

    /* Fonction de géocodage déclenchée dans l’init! */
    function codeAddress(address) {

    /* Récupération de la valeur de l’adresse saisie notre more necessary */
    //var address = document.getElementById(”address”).value;

    /* Appel au service de geocodage avec l’adresse en paramètre */
    geocoder.geocode({ ‘address’: address}, function(results, status) {

    /* Si l’adresse a pu être géolocalisée */
    if (status == google.maps.GeocoderStatus.OK) {

    /* Récupération de sa latitude et de sa longitude */
    document.getElementById(’lat’).value = results[0].geometry.location.lat();
    document.getElementById(’lng’).value = results[0].geometry.location.lng();
    map.setCenter(results[0].geometry.location);

    /* Affichage du marker */
    var marker = new google.maps.Marker({
    map: map,
    position: results[0].geometry.location
    });

    /* Permet de supprimer le marker précédemment affiché */
    markers.push(marker);
    if(markers.length > 1)
    markers[(i-1)].setMap(null);
    i++;
    } else {

    alert(”Le geocodage n\’a pu etre effectue pour la raison suivante: ” + status);
    }
    });
    }

    j’ai pour toute réponse le message d’alerte avec le statut “0 result” mon “address” contient “Bordeaux” moi pas comprendre :p

    merçi d’avance si j’obtiens de l’aide

  7. Nico :
    4 janvier 2012 à 14 h 33 min

    Un grand merci, c’est exactement ce dont j’avais besoin!

  8. arverne :
    6 février 2012 à 18 h 35 min

    Bonjour,
    Est il possible de personaliser le marker ?
    Merci.

Laisser une réponse

Security Code: