Aller au contenu

11. Géocoder une adresse#

📆 Date de publication initiale : 07 septembre 2008

Introduction#

logo Google

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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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 = '![](./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 :

1
2
3
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 :

Info

Le serveur hébergeant le formulaire n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée est désactivée.

Code complet#

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.39.115/fabien/geotribu/%5bgeotribu%5d_Google-Maps_tuto11.html" height="350px" width="100%"></iframe>

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 Goblet#

portrait

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.


Dernière mise à jour: 10 juin 2022
Créé: 10 juin 2022

Contributions à cette page : Julien Moura (36.49%), Florian Boret (63.51%)

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.