Adresses au format JSON

Dans cet exemple d’application, nous allons lire un fichier JSON contenant un ensemble d’adresses postales généré au préalable à l’aide d’un langage comme le PHP par exemple.

L’idée est donc de récupérer les adresses au format JSON, d’évaluer l’objet à l’aide de la fonction eval puis pour chacune de ces adresses, nous tenterons de les géolocaliser au moyen de la classe Geocoder de l’API Google Map.

Pour les adresses dont la géolocalisation aura réussie, nous étendrons les limites de la carte afin que le zoom final soit calculé automatiquement en fonction de ces points à l’aide de la classe LatLngBounds et des méthodes extend et fitBounds.

NB : L’application nécessitant un appel AJAX, un fichier tiers sera appelé pour créer l’objet XMLHttpRequest et traiter le retour de cet appel. Il faudra donc inclure ce fichier dans la page.

Voir un exemple de l’utilisation de la méthode fitBounds.

Source et Explications

CONTENU DU FICHIER fichier-json.json LISTANT LES ADRESSES
({
 "adresses": [ {
  "adresse": "rue rivoli paris"
  },{
  "adresse": "rue daumesnil 75012 paris"
  },{
  "adresse": "porte de versailles paris"
 } ]
} )

/* 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="utils.js"></script>

/* Script de l'application */ 
<script type="text/javascript">

 /* Déclaration des variables globales */ 
 var map = document.getElementById('map');
 var i = 0;
 /* Servira à stocker temporairement les coordonnées de l'adresse */ 
 var coords;
 /* Déclaration de l'objet de type Geocoder */ 
 var geocoder = new google.maps.Geocoder();
 /* Déclaration de l'objet de type LatLngBounds qui définira les limites de la carte */ 
 var bounds = new google.maps.LatLngBounds();

 /* Déclaration des options de la map */ 
 var options = {
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.HYBRID
 }

 /* Instanciation de l'objet de type Map */ 
 var map = new google.maps.Map(map, options);

 /* Appel de la fonction chargée de lancer l'application */ 
 addMarkers();

 /* Fonction chargée de lancer l'application */ 
 /* Elle appelle la fonction "downloadUrl" pour aller lire
  le fichier fichier-json.json en AJAX*/ 
 function addMarkers(){
  downloadUrl('fichier-json.json', function(data){
   /* Evaluation du retour AJAX au format JSON */ 
   var response = eval(data);
   var nombreAdresse = response.adresses.length;

   /* Tant que l'on a des adresses, on tente de les géolocaliser */ 
   for(i = 0; i < nombreAdresse; i++){
    if(response.adresses[i].adresse)
     /* Appel de la fonction de Géocodage avec l'adresse postale en paramètre */ 
     geocodeAddress(response.adresses[i].adresse);
   }
  });
 } 

 /* Fonction de géocodage d'une adresse */ 
 function geocodeAddress(addr){
  geocoder.geocode( { 'address': addr}, function(results, status) {
   /* Si la géolocalisation réussit */
   if (status == google.maps.GeocoderStatus.OK) {
    /* On récupère les coordonnées de l'adresse */
    coords = results[0].geometry.location;
    /* On étend les limites de la carte afin d'y inclure ce nouveau point */
    bounds.extend(coords);
    /* On déclare le marker associé */
    var marker = new google.maps.Marker({
     position: coords
    });
    /* On l'ajoute à la carte */
    marker.setMap(map);
    /* On affiche la carte avec un zoom adapté afin de voir tous nos markers */
    map.fitBounds(bounds);
   }
  });
 }

</script>

5 Réponses à “Adresses au format JSON”

  1. BONVARLET :

    Bonjour,

    tout d’abord merci pour ton tuto très bien expliqué.
    J’ai réussi à réaliser ce que je souhaitais, néanmoins j’ai un problème.

    Voici l’url de mon projet : chauffage-solaire-piscine-bonvarlet.fr/temperatures/googlemap.html

    Le but est d’afficher donc sur la carte un certains nombre de marqueurs (j’en ai un peu plus de 300). Pour cela je génère un fichier JSON dynamiquement accessible ici :chauffage-solaire-piscine-bonvarlet.fr/temperatures/json.asp

    Il semblerait que lorsqu’une adresse n’est pas géocodée par la fonction geocodeAddress(), les adresses suivantes ne sont plus marquées sur la carte. J’affiche donc 20 marqueurs car l’adresse 21 n’est pas géocodée.

    J’ai donc modifier mon script pour afficher une “alert();” pour voir quelles sont les adresses non géocodées. J’ai donc une popup js qui m’affiche mes erreur et qui m’oblige à cliquer sur le bouton “ok” pour voir l’erreur suivante (puisque nous sommes dans une boucle).
    A mon grand étonnement, après avoir cliqué sur tous les “ok”, tous mes marqueurs s’affichent !!! (sauf ceux non géocodés évidement). C’est un truc à se taper la tête par terre.

    Pour tester le phénomène, voici le même script de départ + l’alert : chauffage-solaire-piscine-bonvarlet.fr/temperatures/googlemap2.html

    Auriez-vous une idée ??

    Merci d’avance,

    Damien

  2. BONVARLET :

    Alors j’ai un peu avancé en affichant le statut du Géocoder et j’obtiens ce message "OVER_QUERY_LIMIT".
    Ce qui est étonnant c\’est que ce message s’affiche alors que dans mon test (un autre encore), je n’ai que 20 adresses…

    Une idée ??

  3. pierre :

    un excellent exemple sur la v3 ;)
    je me pose juste une question j’essaie de définir un zoom mais ça ne marche pas. comment peut on faire pour définir le niveau du zoom ?

    avec
    [code]
    var options = {
    zoom : 7,
    disableDefaultUI: false,
    mapTypeId: google.maps.MapTypeId.HYBRID

    }
    [/code]

  4. Emyleen :

    Bonjour,

    Je me suis basé sur ce code pour générer une map contenant les marqueurs issus d’une liste de contact dans un fichier json.

    Pour les adresses françaises tout fonctionne à merveille, par contre dès que je lui donne une adresse étrangère il refuse de m’afficher les contacts suivants.

    Sauriez-vous pourquoi?

    Merci d’avance.

  5. Thomas Gottvalles :

    à BONVARLET :

    Yo,

    C’est normal que tous tes marqueurs s’affichent après avoir cliqué sur le Ok de tes boites de dialogue car tu marques un temps de pause à chaque itération de ta boucle.

    D’après la doc OVER_QUERY_LIMIT signifie que tu “as dépassé le quota de requêtes dans un laps de temps trop court”. Il faut donc temporiser ta boucle avec mais je trouve que ça ralenti trop l’affichage des marqueurs.

    Bye
    Tomix

Laisser une réponse

Security Code: