11. Géocoder une adresse

Ecrit par fabien le 7/09/2008.

| |

Sommaire

Introduction
Initialisation
Géocodage
Code complet
Démonstration
Remarques
Conclusion

Introduction

L'API Google Maps possède des fonctions de géocodage à l'adresse qui permettent d'obtenir la longitude et la latitude à partir d'une adresse.
Nous allons voir dans ce tutoriel comment utiliser cette fonctionnalité et comment ajouter un champ de saisie sur la carte.

Initialisation

Reprendre la carte du tutoriel n°2.

Géocodage

Définir la fonction showAddress qui géocode l'adresse saisie et créé un marqueur cliquable :

function showAddress(address) {
  if (geocoder) {
    geocoder.getLatLng(address,function(point) {
      if (!point) {
        alert(address + " not found");
      } 
      else {
        map.setCenter(point);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        var html = '<img src="./logos/logo_geotribu.png">';
        GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
        });
     }
    });
  }
}

Définir un géocodeur grâce à la classe GClientGeocoder :

geocoder = new GClientGeocoder();

Définir un container qui appelle le formulaire de saisie :

var address = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(60, 10));
address.apply(document.getElementById("address"));
map.getContainer().appendChild(document.getElementById("address"));

Et éditer le formulaire en HTML :

<form id="address" action="#" onsubmit="showAddress(this.address.value); return false">
  <input type="text" size="40" name="address" value="Allée Machado, 31000 Toulouse, France" />&nbsp;&nbsp;&nbsp;<input type="image" style="vertical-align:middle;"src="./buttons/go_orange_75.png" onclick="document.form.submit();"/>
</form>

Code complet

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
     [Google Maps] 11. Géocoder une adresse
   </title>
   <style type="text/css">
     html { overflow:hidden; height:100%; } 
     body { height:100%; margin:0; }
     #map { width:100%; height:100%; }
   </style>
   <link rel="icon" type="image/png" href="./favicon.png"/>
   <script src="http://maps.google.com/maps?file=api&v=2&key=votre_clé_ici" type="text/javascript"></script>
   <script type="text/javascript">
 
     var map = null;
     var geocoder = null;
 
     function showAddress(address) {
       if (geocoder) {
         geocoder.getLatLng(address,function(point) {
           if (!point) {
             alert(address + " not found");
           } 
           else {
             map.setCenter(point);
             var marker = new GMarker(point);
             map.addOverlay(marker);
             var html = '<img src="./logos/logo_geotribu.png">';
             GEvent.addListener(marker, 'click', function() {
               marker.openInfoWindowHtml(html);
             });
           }
         });
       }
     }
 
     function initialize() {
       if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById('map'));
 
       map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
       map.addControl(new GMapTypeControl());
       map.removeMapType(G_HYBRID_MAP);
       map.addMapType(G_PHYSICAL_MAP);
       map.setMapType(G_PHYSICAL_MAP);
       map.addControl(new GOverviewMapControl());
       map.addControl(new GScaleControl());
       map.addControl(new GLargeMapControl());
       map.enableScrollWheelZoom();
 
       geocoder = new GClientGeocoder();
 
       var address = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(60, 10));
       address.apply(document.getElementById("address"));
       map.getContainer().appendChild(document.getElementById("address"));
 
      }
      else{
       alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form id="address" action="#" onsubmit="showAddress(this.address.value); return false">
      <input type="text" size="40" name="address" value="Allée Machado, 31000 Toulouse, France" />&nbsp;&nbsp;&nbsp;<input type="image" style="vertical-align:middle;"src="./buttons/go_orange_75.png" onclick="document.form.submit();"/>
    </form>
    <img id="logo" src="./logos/logo_geotribu.png">
    <div id="map"></div>
   </body>
</html>

Démonstration

Résultat pleine page
Evidemment le résultat est plus joli en pleine page :-)

Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées.
Le nombre de géocodage est limité à 15000 par jour et par adresse IP.
La requête de géocodage renvoie deux codes : le premier est le statut (savoir si la requête a réussi, si le nombre de requêtes autorisés est dépassé, etc) et le second le niveau de précision du géocodage (de 1 à 8).

Conclusion

Le géocodage à l'adresse est très simple à mettre en place grâce à l'API Google Maps.
Cette fonctionnalité enrichie de belle manière une interface cartographique.

Auteur : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

GeoTribu