Afficher des placemarks (JSON)

Dans l’exemple qui suit, nous utilisons la méthode getLocations de la classe GClientGeocoder de l’api Google Map.

L’avantage de cette méthode sur la méthode getLatLng est que le résultat renvoyé contient l’ensemble des points trouvés pour l’adresse passée en paramètre et non le point jugé le plus pertinent, point qui ne correspond pas toujours aux attentes de l’utilisateur.

La problématique approchée concerne donc l’affichage des placemarks au format JSON renvoyés par le service web de géocodage de Google en fonction de l’adresse passée en paramètre.

Nous afficherons également le listing des résultats obtenus sur la droite de la map. Chaque item sera cliquable et aura pour effet d’ouvrir l’infobulle (infowindow) sur le marker concerné.

Format de la réponse de la méthode getLocations

Avant de commencer, voici un descriptif des éléments retournés par la méthode getLocations :

La réponse est composée de 3 parties principales:

  • name : Cet élément contient la chaîne recherchée exactement comme elle a été saisie. Cela peut s’avérer pratique pour vérifier si l’adresse envoyée au service de géocodage a été proprement encodée.
  • Status : L’élément Status contient le code de la réponse de Google. Ce code indique si la géolocalisation a pu être effectuée ou non. Consultez le tableau des codes réponses du geocoder de Google pour plus d’informations.
  • Placemark : Cet élément n’est accessible uniquement si l’adresse envoyée au service web de géocodage de Google a pu être localisée avec succès. Il est bien-entendu possible qu’une réponse contienne plusieurs éléments Placemark.
    Le placemark contient lui aussi 3 éléments principaux :

    • address : L’adresse est la forme complète (et propre …) de votre requête telle que Google l’utilise après traitement. Ce format s’avère pratique pour différentes raisons, comme par exemple obtenir un jeu de résultats homogènes pour un stockage en base de données.
    • Point : Cet élément Point représente les coordonnées en 3D de votre recherche à savoir, la longitude, la latitude et l’élévation. À noter que l’élévation n’est pas toujours disponible. Si aucune valeur n’est dispoinible, l’élévation vaudra 0, ce qui ne veut pas forcément dire que le point recherché se trouve au niveau de la mer …
    • AddressDetails : Cet élément est un bloc qui utilise un format standard pour les adresses appelé eXtensible Address Language (xAL).

Afficher les placemarks sur une map

Saisissez votre recherche dans le champ prévu à cet effet et observez les résultats. (code source et explications sous l’application).

Comment afficher les placemarks au format JSON

<script type="text/javascript">

   /* Déclaration de la map */
   var map = new GMap2(document.getElementById("map"),{mapTypes: [G_HYBRID_MAP]});
   /* Attribution des paramètres par défaut de la Google Map */
   map.setUIToDefault();
   /* Désactivation du zoom  + / - généré par la molette de la souris */
   map.disableScrollWheelZoom();

   /* Création d'un objet  GLatLngBounds qui permettra de recentrer la carte en fonction
   des points obtenus */
   var bounds = new GLatLngBounds();

   /* Déclaration des variables utilisées dans l'application */
   var markers = [];
   var htmlSidebar = [];
   var myDiv = document.getElementById('mySidebar');
   var i = 0;
   var htmls = [];
   var myListing = '';

   /* Création de la map centrée sur Paris */
   map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);

   /* Déclaration de l'objet GClientGeocoder utilisé dans l'application */
   var geocoder = new GClientGeocoder();

   /* Déclaration de la fonction chargée de communiquer avec le geocoder de Google */
   function useGeoCoder(adr){
     /* On vide le cache de l'objet geocoder */
     geocoder.reset();
     /* On efface tous les markers présents sur la map */
     map.clearOverlays();
     /* On réinitialise nos variables afin que l'application ne prenne en compte
     uniquement les éléments de la recherche en cours*/
     var markers = new Array();
     var htmlSidebar = new Array();
     myListing = '';

     /* Si une adresse a été saisie (champ de recherche non vide) */
     if(adr != ''){
       var i = 0;
       /* Appel envoyé au geocoder de Google */
       geocoder.getLocations(adr,function(ADRESSE){
         /* Si l'adresse n'a pu être géolocalisée */
         if (!ADRESSE) {
           alert(ADRESSE+" n'existe pas ou n'a pu être géolocalisée ...");
         }else {
           /* Le service web de géocodage de Google a renvoyé au moins un résultat */
           bounds = new GLatLngBounds();
           if(ADRESSE.Placemark){
             /* Le service web de géocodage de Google a renvoyé au moins un point  */
             /* nombrePlacemarks représente le nombre de points renvoyés */
             var nombrePlacemarks = ADRESSE.Placemark.length;
             var iPlacemark;
             var placemark;
             /* Tant que l'on a des résultats, on les traite */
             for (iPlacemark = 0 ; iPlacemark < nombrePlacemarks ; iPlacemark ++){
              placemark = ADRESSE.Placemark[iPlacemark];
              createMarker(placemark);
             }

           /* Préparation des éléments HTML pour l'affichage des résultats */
           myDiv.style.width = '225px';
           document.getElementById('resultLibel').style.display = 'block';
           document.getElementById('apply').style.width = '635px';
           myDiv.innerHTML = myListing;
           /* Rechargement de la map */
           reloadMap();
         }else
           alert('Aucun resultat trouve pour cette recherche ! ...');
       }});
     }
   }

   /* Déclaration de la fonction chargée d'ajouter les markers sur la map */
   function createMarker( placemark){
     /* Récupération des coordonnées du point */
     var coord = placemark.Point.coordinates;
     markers[i] = new GMarker(new GLatLng(coord[1], coord[0]));
     /* Récupération du contenu de l'infobulle (infowindow) */
     htmls[i] = getHtml(placemark);
     /* Ajout de l'écouteur d'événement sur le marker */
     clickMarker(i);
     /* Ajout du marker sur la map */
     map.addOverlay(markers[i]);
     /* Création du listing des résultats (colonne de droite) */
     myListing += '<a href="javascript:openMarker('+i+')" class="linkSidebar">';
     myListing += htmlSidebar[i];
     myListing += '</a>';
     /* Extension des limites de la carte en ajoutant le nouveau point obtenu */
     bounds.extend(new GLatLng(coord[1], coord[0]));
     i++;
   }	

   /* Déclaration de la fonction chargée d'ouvrir l'infobulle après un click
   sur un item du listing des résultats ou sur un marker */
   function openMarker(m){
     markers[m].openInfoWindowHtml(htmls[m]);
   }

   /* Déclaration de la fonction "écouteur d'événement" sur les markers */
   function clickMarker(a){
     GEvent.addListener(markers[a], "click", function() {
       openMarker(a);
     });
   }

   /* Déclaration de la fonction chargée de récupérer le contenu de l'infobulle
   pour le point concerné */
   function getHtml(placemark){
     /* Implémentation du contenu du listing de résultats */ 
     htmlSidebar[i] = placemark.address;
     var html  = '<p style="width: 200px; font-size: 11px; font-family: verdana;">';
     html += placemark.address;
     html += '<br />';
     html += placemark.Point.coordinates[1] + ' - '+ placemark.Point.coordinates[0];
     html += '<br />';
     /* Si l'élément de réponse contient les informations liées à l'adresse
     postale du point, on les récupère */
     if (placemark.AddressDetails.Country.AdministrativeArea){
       var administrativeArea = placemark.AddressDetails.Country.AdministrativeArea;
       html += administrativeArea.AdministrativeAreaName;
       if (administrativeArea.SubAdministrativeArea){
         var subAdministrativeArea = administrativeArea.SubAdministrativeArea;
         html += '';
         html += subAdministrativeArea.SubAdministrativeAreaName;
         if (subAdministrativeArea.Locality){
           var locality = subAdministrativeArea.Locality;
           html += '<br />';
           html += locality.LocalityName;
           if (locality.DependentLocality){
             html += '<br />';
             html += locality.DependentLocality.DependentLocalityName;
           }
         }
       }
     }
     html += '</p>';
     return html;
   }

   /* Déclaration de la fonction chargée de réafficher la map */
   function reloadMap(){
     /* Récupération du zoom optimum pour contenir tous les points */
     var newZoom = map.getBoundsZoomLevel(bounds);
     /* Définition d'un zoom maximum, ici 13 */
     if(newZoom >= 14)
       newZoom = 13;
     /* Récupération du nouveau centre de la map */
     var newCentre = bounds.getCenter();

     /* Affichage de la map */
     map.setCenter(newCentre, newZoom);
   }

   /* Déclaration de la fonction qui appelle la fonction useGeoCoder
   après avoir enfoncé la touche "entrée" */
   function enterPressed(evn) {
     if (window.event && window.event.keyCode == 13)
       useGeoCoder(document.getElementById('addr').value);
     else if (evn && evn.keyCode == 13)
       useGeoCoder(document.getElementById('addr').value);
   }

   document.onkeypress = enterPressed;

</script>
EXEMPLE DE RÉPONSE RETOURNÉE PAR GOOGLE POUR LA RECHERCHE "PARIS" ({ "name": "paris", "Status": { "code": 200, "request": "geocode" }, "Placemark": [ { "id": "p1", "address": "Paris, France", "AddressDetails": { "Accuracy" : 4, "Country" : { "AdministrativeArea" : { "AdministrativeAreaName" : "Ile-de-France", "SubAdministrativeArea" : { "Locality" : { "LocalityName" : "Paris" }, "SubAdministrativeAreaName" : "Paris" } }, "CountryName" : "France", "CountryNameCode" : "FR" } }, "ExtendedData": { "LatLonBox": { "north": 48.9153630, "south": 48.7979015, "east": 2.4790465, "west": 2.2229277 } }, "Point": { "coordinates": [ 2.3509871, 48.8566667, 0 ] } } ] } )

Codes réponses du Geocoder de Google

CODE CONSTANTE DESCRIPTION
200 G_GEO_SUCCESS Aucune erreur rencontrée. L’adresse a pu être localisée et Google a renvoyé un résultat.
500 G_GEO_SERVER_ERROR La requête ne peut être exécutée et la raison exacte n’est pas définie.
601 G_GEO_MISSING_ADDRESS Aucune valeur n’a été passée en paramètre au geocoder.
602 G_GEO_UNKNOWN_ADDRESS Aucune correspondance trouvée pour l’adresse envoyée. Cela peut arriver si l’adresse est récente ou si sa saisie est incorrecte.
603 G_GEO_UNAVAILABLE_ADDRESS Le geocoder ne peut retourner d’informations sur l’adresse concernée pour des raisons légales ou contractuelles.
610 G_GEO_BAD_KEY La clé d’authentification de l’Api n’est pas valide ou ne correspond pas au domaine où est hébergée l’application faisant appel au geocoder de Google.
620 G_TOO_MANY_QUERIES Vous avez atteint le nombre limite de requête imposé par le geocoder de Google ou votre compte est temporairement ou définitivement bloqué.

Une Réponse à “Afficher des placemarks (JSON)”

  1. Philippe :

    Bonjour,

    Ton tutoriel est exactement ce que je recherche. Après analyse de la v3, je n’arrive pas à trouver l’équivalent de la fonction “getLocations”.
    Par exemple, dans ton tutoriel, si je recherche la ville de “Springfield”, Google me retourne les 9 villes des USA correspondantes.
    En v3, avec google.maps.Geocoder, je n’ai uniquement qu’une seule ville. Comment faire pour récupérer l’ensemble des villes comme en v2 pour que l’utilisateur puisse choisir ?

    Merci de ton aide sur le sujet.

Laisser une réponse

Security Code: