Points inclus dans un périmètre

Dans cet exemple d’application, nous allons coupler la démonstration concernant le clustering des markers avec la création de polygones tels que des cercles ou des rectangles.

  • Dans un premier temps, il est demandé de choisir le type de polygone à tracer sur la google map (par défaut, le mode cercle est sélectionné).
  • L’utilisateur choisit son type de polygone en cliquant sur le libellé approprié (cercle ou rectangle). Pour visualiser les points concernés, il faudra alors cliquer sur la carte (afin de déterminer le centre du cercle ou le coin supérieur gauche du rectangle) puis déplacer ce point afin de définir le polygone à la volée.
  • Le rechargement se fera de manière asynchrone via un appel ajax (GXmlHttp.create [ bientôt en ligne]) et les markers inclus dans le polygone seront affichés sous forme de clusters. La carte sera mise à jour suite à un zoom ou à déplacement de celle-ci.

Cliquez sur “tout effacer” pour réinitialiser la map.

Si des markers apparaissent en dehors du polygone tracé, cela s’explique par le fait que la carte est découpée en cellules rectangulaires et que le marker la représentant est centré dans cette cellule.
Par exemple, un point situé au dessus d’un polygone de type cercle signifiera que les points concernés par le cluster se trouvent au sud de la cellule “à cheval” sur le périmètre du cercle.

Explications bientôt en ligne …

Méthodes infowindow - GMap2

Les méthodes liées aux fenêtres d’informations (infobulle ou infowindow) de la classe principale GMap2 de l’Api permettent de gérer toutes les actions d’ouverture, de paramétrages et autres de ces infobulles.

Ces méthodes peuvent être appliquées tant à un objet GMarker qu’à l’objet map lui-même ou encore à tout autre élément présent sur la carte.

openInfoWindow()

Signature de la méthode openInfoWindow :
openInfoWindow(latlng : GLatLng, node : contenu, opts? : GInfoWindowOptions) .

Cette méthode permet d’ouvrir une infobulle au point latlng ayant pour contenu le second paramètre noté node. Le dernier paramètre est optionnel. Il sera utile si vous souhaitez modifier les paramètres par défaut de l’infobulle.

À l’ouverture de cette infobulle, la map se recadrera afin que la fenêtre d’information soit entièrement visible.

<script type="text/javascript">

 /* dans cet exemple, nous ajoutons un écouteur d'événements
 à la carte. Au click de la souris, une infobulle s'ouvrira au point clické
 avec pour contenu les coordonnées de ce point.*/

 var map = new GMap2(document.getElementById('map'), { size: new GSize(400,400)});
 /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
 avec une taille de 400 * 400 pixel */

 /* Affichage de la carte */
 map.setCenter(new GLatLng(48.8566667, 2.3509871), 12);

 /* Ecouteur d'événements appliqué à la map */
 GEvent.addListener(map, 'click', function (overlay,latlng){
   var contenu = 'LAT : '+latlng.lat()+' / LNG : '+latlng.lng();
   map.openInfoWindow(latlng, contenu);
 });

</script>

openInfoWindowHtml()

Signature de la méthode openInfoWindowHtml :
openInfoWindowHtml(latlng : GLatLng, html : contenu, opts? : GInfoWindowOptions) .

La méthode openInfoWindowHtml est similaire à la précédente. La différence réside dans le format de son contenu.

Cette méthode permet d’ouvrir une infobulle au point latlng ayant pour contenu le second paramètre noté node, contenu au format HTML. Le dernier paramètre est optionnel. Il sera utile si vous souhaitez modifier les paramètres par défaut de l’infobulle.

À l’ouverture de cette infobulle, la map se recadrera afin que la fenêtre d’information soit entièrement visible.

openInfoWindowTabs()

Signature de la méthode openInfoWindowTabs :
openInfoWindowTabs(latlng : GLatLng, tabs : GInfoWindowTab[], opts? : GInfoWindowOptions) .

Cette méthode permet d’ouvrir une infobulle avec plusieurs onglets au point latlng (point ou marker cliqué par exemple).

Le paramètre tabs sera un tableau d’objets de type GInfoWindowTab regroupant l’ensemble des onglets à afficher avec leur définition (titre et contenu).

Le dernier paramètre est optionnel. Il sera utile si vous souhaitez modifier les paramètres par défaut de l’infobulle.

À l’ouverture de cette infobulle, la map se recadrera afin que la fenêtre d’information soit entièrement visible.

Voir un exemple d’utilisation de la méthode openInfoWindowTabs.

openInfoWindowTabsHtml()

Signature de la méthode openInfoWindowTabsHtml :
openInfoWindowTabsHtml(latlng : GLatLng, tabs : GInfoWindowTab[], opts? : GInfoWindowOptions) .

Cette méthode est similaire à la précdénte.
Sa différence se trouve dans le format du contenu à afficher. Ici, il s’agira de code HTML.

showMapBlowup()

Signature de la méthode showMapBlowup :
showMapBlowup(latlng : GLatLng, opts? : GInfoWindowOptions) .

La méthode showMapBlowup permet d’afficher une mini-map à l’endroit cliqué. Au moyen de la classe GInfoWindowOptions, il est possible de déterminer le type de carte à utiliser pour cette vue ainsi que le zoom par défaut.

Exemple d’utilisation

showmapblowup

<script type="text/javascript">

 /* Dans cet exemple, nous ajoutons un écouteur d'événements
 à la carte. Au click de la souris, une infobulle s'ouvrira au point clické
 avec pour contenu une mini map centrée sur ce point. */

 var map = new GMap2(document.getElementById('map'), { size: new GSize(400,400)});
 /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
 avec une taille de 400 * 400 pixel */

 /* Affichage de la carte */
 map.setCenter(new GLatLng(48.8566667, 2.3509871), 12);

 /* Ecouteur d'événements appliqué à la map.
 Ici, la mini-map s'affichera avec le type de vue satellite tandis que
 le type de la carte est le type plan. Quant au zoom, il vaudra 17.*/
 GEvent.addListener(map, 'click', function (overlay,latlng){
   map.showMapBlowup(latlng, {zoomLevel: 17, mapType: G_SATELLITE_MAP});
 });

</script>

updateInfoWindow()

disponible depuis la version 2.85 de l’Api.

Signature de la méthode updateInfoWindow :
updateInfoWindow(tabs : GInfoWindowTab[], onupdate? : fonction) .

La méthode updateInfoWindow permet de mettre à jour le contenu de l’objet GInfoWindow en cours d’utilisation sans le repositionner.

La fenêtre d’information est alors redimensionnée afin de s’adapter au nouveau contenu.

Le paramètre onupdate est optionnel. Il permet d’appeler une fonction une fois le contenu de l’infobulle mis à jour.

<script type="text/javascript">

 /* Dans cet exemple, nous ajoutons un écouteur d'événements
 à la carte. Au click de la souris, une infobulle s'ouvrira au point cliqué */

 var map = new GMap2(document.getElementById('map'), { size: new GSize(400,400)});
 /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
 avec une taille de 400 * 400 pixel */

 /* Affichage de la carte */
 map.setCenter(new GLatLng(48.8566667, 2.3509871), 12);

 /*  Déclaration des onglets à afficher dans l'infobulle */
 myTabs = [
   new GInfoWindowTab('Weboblog', 'All about Google Map Api'),
   new GInfoWindowTab('Google Map', 'Ca se passe sur weboblog.fr')
 ];

 /* Ecouteur d'événements appliqué à la map.
 Au click de le souris, une infobulle à onglets s'ouvrira
 au point cliqué. */
 GEvent.addListener(map, 'click', function (overlay,latlng){
   map.openInfoWindowTabs(latlng, myTabs, {selectedTab: 1, maxWidth: 300});
 });

 /* Ecouteur d'événements ajouté à la map.
 A la fin d'un déplacement de la carte, les onglets seront inversés.
 Une fois cette inversion effectuée, une fonction sera appelée;
 Ici, un simple alert(). */
 GEvent.addListener(map, 'moveend', function (){
 /* On inverse les 2 onglets */
   myTabs = [
     new GInfoWindowTab('Google Map', 'Ca se passe sur weboblog.fr'),
     new GInfoWindowTab('Weboblog', 'All about Google Map Api')
   ];
   map.updateInfoWindow(myTabs,function(){alert('Les onglets ont été inversés')});
 });

</script>

updateCurrentTab()

disponible depuis la version 2.85 de l’Api.

Signature de la méthode updateCurrentTab :
updateCurrentTab(modifier : fonction, onupdate : fonction) .

La méthode updateCurrentTab permet de mettre à jour le contenu de l’onglet courant sans repositionner l’infobulle.

La fonction modifier est utilisée pour mettre à jour le contenu de l’onglet et reçoit en argument un objet de type GInfoWindowTab.

La fenêtre d’information est alors redimensionnée afin de s’adapter au nouveau contenu.

Le paramètre onupdate est optionnel. Il permet d’appeler une fonction une fois le contenu de l’onglet mis à jour.

<script type="text/javascript">

 /* Dans cet exemple, nous ajoutons un écouteur d'événements
 à la carte. Au click de la souris, une infobulle s'ouvrira au point cliqué */

 var map = new GMap2(document.getElementById('map'), { size: new GSize(400,400)});
 /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
 avec une taille de 400 * 400 pixel */

 /* Affichage de la carte */
 map.setCenter(new GLatLng(48.8566667, 2.3509871), 12);

 /*  Déclaration des onglets à afficher dans l'infobulle */
 myTabs = [
   new GInfoWindowTab('Weboblog', 'All about Google Map Api'),
   new GInfoWindowTab('Google Map', 'Ca se passe sur weboblog.fr')
 ];

 /* Ecouteur d'événements appliqué à la map.
 Au click de le souris, une infobulle à onglets s'ouvrira
 au point cliqué. */
 GEvent.addListener(map, 'click', function (overlay,latlng){
   map.openInfoWindowTabs(latlng, myTabs, {selectedTab: 1, maxWidth: 300});
 });

 /* Ecouteur d'événements ajouté à la map.
 A la fin d'un déplacement de la carte, l'onglet courant sera
 mis à jour via la fonction majOnglet().
 currentTab est l'objet de type GInfoWindowTab (l'onglet courant)
 retourné par la méthode updateCurrentTab. */
 GEvent.addListener(map, 'moveend', function (){
 /* On inverse les 2 onglets */
   map.updateCurrentTab(function(currentTab) {majOnglet(currentTab)});
 });

  /* Fonction chargée de mettre à jour l'onglet */
 function majOnglet(r){
   /* r représente l'élément courant */
   /* Mise à jour du nom de l'onglet */
   r.name = 'currentTab';
   /* Mise à jour contenu de l'onglet */
   r.contentElem.innerHTML = 'Explication de la méthode updateCurrentTab';
 }

</script>

closeInfoWindow()

Signature de la méthode closeInfoWindow :
closeInfoWindow() .

La méthode closeInfoWindow permet de fermer l’infobulle active.

<script type="text/javascript">

 map.closeInfoWindow();	   

</script>

getInfoWindow()

Signature de la méthode getInfoWindow :
getInfoWindow() .

La méthode getInfoWindow retourne l’objet de type GInfoWindow (infobulle) actif. Si aucune fenêtre d’information n’existe sur la map, elle sera créée mais non affichée.

Cette opératon n’est pas influencée par la méthode enableInfoWindow.

<script type="text/javascript">

 var myInfoWindow = map.getInfoWindow();	   

 myInfoWindow représente ici un objet de type GInfoWindow.
 On peut ensuite lui appliquer les méthodes propres à cet objet.

</script>

Cluster marker (regrouper des markers)

Le but de ce tutorial est d’apprendre à regrouper ses markers en clusters (groupe de markers) afin d’alléger une application Google Map.

Avant de commencer, il est bon de préciser qu’il existe plusieurs techniques de clustering. Chaque application peut avoir ses propres besoins.
Ici, nous verrons un exemple de clustering utilisant une grille fictive sur notre carte représentée par des cellules rectangulaires.

MarkerClusterer, ou comment regrouper des markers

Problématique :
vous disposez d’une application Google Map qui doit afficher un jeu de données conséquent.
Au-delà de 100 markers à afficher sur une carte, on peut considérer qu’il est préférable, avantageux et même conseillé de regrouper ses markers en clusters.

Le tutorial qui suit va tenter d’expliquer pas à pas la procédure à suivre afin de mettre en place ce clustering.

Regrouper vos markers sur la map (cluster)

Présentation du tutorial :
dans notre exemple, nous allons nous focaliser sur Paris. Nous disposons d’environ 700 adresses représentant des restaurant, hôtels et autres situés dans la capitale.

Récupération des points stockés en bdd en php avec retour au format JSON
Ce script PHP retourne un objet JSON contenant l’ensemble des points ainsi que leurs informations (adresse, logo, nom …). Il est à placer en début de page, avant les appels javascript.

<?php
  ## Coordonnées des coins du rectangle rouge (limite de notre zone de d'affichage)
  $nelng = 2.44171142578125;
  $swlng = 2.22198486328125;
  $nelat = 48.90625412315376;
  $swlat = 48.80686346108517;

  ## Connexion à la Base de Données
  $db = mysql_connect(serveur, utilisateur, motdepasse);
  $select = mysql_select_db(basededonnees, $db);

  ## Récupération des points inclus dans notre limite (rectangle rouge)
  $result = mysql_query("
    SELECT
      lng,lat, Titre, Image, Adresse
    FROM
      table
    WHERE
      (lng > $swlng AND lng < $nelng)
        AND (lat < $nelat AND lat > $swlat)  ORDER BY RAND()
  ");

  $list = array();
  $i = 0;
  $row = mysql_fetch_assoc($result);
  while($row) {
    $i++;
    extract($row);
  ## Construction de l'objet javascript au format JSON
    $list[] = "p{$i}:{
                    lat:{$lat},
                    lng:{$lng},
                    Titre:'".addslashes(utf8_encode($Titre))."',
                    Image: '".$Image."',
                    Adresse: '".addslashes(utf8_encode($Adresse))."'
		   }";

    $row = mysql_fetch_assoc($result);
  }

  //Retourne un objet javascript formaté (JSON)
  header('content-type:text/plain;');
  echo "var points = {\n\t".join(",\n\t",$list)."\n}";

?>

Déclaration des variables utilisées dans notre application

<script type="text/javascript">

 // Variables utilisées sur la map
 var map;
 var centerLatitude = 48.8566667;
 var centerLongitude = 2.3299871;
 var startZoom = 11;

 // déclaration de l'icône pour les clusters
 var iconCluster = new GIcon();
 iconCluster.shadow = "images/cluster_shadow.png";
 iconCluster.shadowSize = new GSize(22, 20);
 iconCluster.iconAnchor = new GPoint(13, 25);
 iconCluster.infoWindowAnchor = new GPoint(13, 1);
 iconCluster.infoShadowAnchor = new GPoint(26, 13);

 // déclaration de l'icône pour un marker simple
 var iconSingle = new GIcon();
 iconSingle.image = "images/single.png";
 iconSingle.shadow = "images/single_shadow.png";
 iconSingle.iconSize = new GSize(12, 20);
 iconSingle.shadowSize = new GSize(22, 20);
 iconSingle.iconAnchor = new GPoint(6, 20);
 iconSingle.infoWindowAnchor = new GPoint(6, 1);
 iconSingle.infoShadowAnchor = new GPoint(13, 13);

</script>

Création de l’objet de type GMap2 (notre carte)

<script type="text/javascript">

 function init(){
   // Déclaration de la map
   map = new GMap2(document.getElementById("map"),{mapTypes: [G_HYBRID_MAP]});
   // Chargement de la map
   map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
   // Ajout des outils de contrôle par défaut (zoom, ...)
   map.setUIToDefault();
   // Désactivation du zoom possible avec la molette de la souris
   map.disableScrollWheelZoom();
   // Mise à jour de la map
   updateMarkers();

   // Recharge la carte après zoom (+ ou -)
   GEvent.addListener(map,'zoomend',function() {
     updateMarkers();
   });

    // Décommenter l'écouteur suivant pour recharger la carte après un drag / drop
    
   // GEvent.addListener(map,'moveend',function() {
     // updateMarkers();
   // });
 }

</script>

Fonction chargée de regrouper les markers (clusters)

<script type="text/javascript">

 function updateMarkers() {
   // Mise à zéro de la map (on efface tout ce qui s'y trouve) 
   map.clearOverlays();
   // Création de l'aire délimitant les données à afficher (rectangle rouge)
   // utile en phase de test
   var allsw = new GLatLng(48.80686346108517, 2.22198486328125);
   var allne = new GLatLng(48.90625412315376, 2.44171142578125);
   var allmapBounds = new GLatLngBounds(allsw,allne);

   // affichage de l'aire délimitant l'affichage des données (rectangle rouge)
   // commenter cette ligne pour ne pas l'afficher
   map.addOverlay(new Rectangle(allmapBounds,3,"#F00",'')); 

   // Délimitation de la map
   var mapBounds = map.getBounds();
   // coordonnées SW de la map (sur la taille du div id = "map")
   var sw = mapBounds.getSouthWest();
   // coordonnées NE de la map (sur la taille du div id = "map")
   var ne = mapBounds.getNorthEast();
   // Size est une aire représentant les dimensions du rectangle de la map en degrés
   var size = mapBounds.toSpan(); //retourne un objet GLatLng

   // créé une cellule de 10x10 pour constituer notre "grille"
   // les cellules de cette grille sont ici affichées en bleu
   var gridSize = 10;
   var gridCellSizeLat = size.lat()/gridSize;
   var gridCellSizeLng = size.lng()/gridSize;
   // cellGrid représente un tableau qui contiendra l'ensemble
   // des cellules dans lesquelles se trouveront des points
   // - dans notre exemple, nous aurons 19 cellules (rectangles bleus)
   var cellGrid = [];

   //Parcourt l'ensemble des points et les assigne à la cellule concernée
   for (k in points) {
     var latlng = new GLatLng(points[k].lat,points[k].lng);

     // on vérifie si le point appartient à notre zone
     // la zone correspond à la map totale affichée
     // si le point n'appartient pas la map en cours on passe au point siuvant
     if(!mapBounds.contains(latlng)) continue;

     // On créé un rectangle temporaire en fonction des coordonnées
     // du point et de celles de la map afin d'obtenir notre cellule (cell)
     var testBounds = new GLatLngBounds(sw,latlng);
     var testSize = testBounds.toSpan();
     var i = Math.ceil(testSize.lat()/gridCellSizeLat);
     var j = Math.ceil(testSize.lng()/gridCellSizeLng);
     // cell peut être comparée à une case d'échiquier
     var cell = new Array(i,j);

     // Si cette case (cellule) n'a pas encore été créée (undefined)
     // on l'ajoute à notre grille ( = tableau de cellules = échiquier)
     if(typeof cellGrid[cell] == 'undefined') {

       var lat_cellSW = sw.lat()+((i-1)*gridCellSizeLat);
       var lng_cellSW =  sw.lng()+((j-1)*gridCellSizeLng);
       // coordonnées sud-ouest de notre cellule
       var cellSW = new GLatLng(lat_cellSW, lng_cellSW);

       var lat_cellNE = cellSW.lat()+gridCellSizeLat
       var lng_cellNE =  cellSW.lng()+gridCellSizeLng;
       // coordonnées nord-est de notre cellule
       var cellNE = new GLatLng(lat_cellNE, lng_cellNE);

       // Déclaration de la cellule et de ses propriétés (cluster ou non, points ...)
       cellGrid[cell] = {
         GLatLngBounds : new GLatLngBounds(cellSW,cellNE),
           cluster : false,
           markers:[], lt:[], lg:[], titre:[], adresse:[], image:[],
           length: 0
       };

       // Ajoute la cellule (rectangle bleu) à la carte
       // utile en phase de test
       map.addOverlay(new Rectangle(cellGrid[cell].GLatLngBounds,1,"#00F",''));
     }  

     // augmentation du nombre de cellules sur la grille ( = 1 cellule en plus)
     cellGrid[cell].length++;

     // Si la cellule contient au moins 2 points, nous décidons ici
    // que les markers seront clustérisés pour cette cellule
     if(cellGrid[cell].markers.length > 1)
       // On passe alors à true la propriété cluster de la cellule
       cellGrid[cell].cluster = true;

     // On lui renseigne ensuite les propriétés du point concerné
     cellGrid[cell].lt.push(points[k].lat);
     cellGrid[cell].lg.push(points[k].lng);
     cellGrid[cell].markers.push(latlng);
     cellGrid[cell].titre.push(points[k].Titre);
     cellGrid[cell].adresse.push(points[k].Adresse);
     cellGrid[cell].image.push(points[k].Image);
   }

   // On parcourt l'ensemble des cellules de notre grille (cases de l'échiquier)
   for (k in cellGrid) {
     // Si les markers de la cellule doivent apparaître sous forme de cluster
     if(cellGrid[k].cluster == true) {
       // création d'un marker au centre de la cellule
       var span = cellGrid[k].GLatLngBounds.toSpan();
       var sw = cellGrid[k].GLatLngBounds.getSouthWest();
       var swLAT_span = sw.lat()+(span.lat()/2);
       var swLNG_span = sw.lng()+(span.lng()/2);
       var marker = createMarker(new GLatLng(swLAT_span,swLNG_span),'c',cellGrid[k]);
     } else {
       // Sinon, création d'un marker simple
       for(i in cellGrid[k].markers)
         var marker = createMarker(cellGrid[k].markers[i],'p',cellGrid[k]);
     }
   }
 }

</script>

Initialisation de la map

<script type="text/javascript">

  // Chargement de la map une fois la page chargée
  window.onload = init;

</script>

Fonctions liées aux markers
À noter que les fonctions ci-dessous ont été simplifiées par rapport à l’exemple de l’application. La différence se trouve dans l’affichage de l’infobulle.
La fonction createMarker n’affichera ici que les noms des résultats trouvés et non l’image (cliquable pour zoom sur un marker) ni l’adresse.

<script type="text/javascript">

 function createMarker(point, type,infoMarker) {
   // Si le marker représente plusieurs points (cluster)
   if(type=='c') {
    // Pour définir le marker du cluster, nous faisons appel à un script PHP,
    // non détaillé ici, chargé de récupérer le nombre de markers concernés par ce cluster,
    // infoMarker.length.
    // Nous créons alors un cercle à l'aide la librairie GD2 du php
    // qui aura une couleur et une taille définies en fonction du nombre de markers.
     iconCluster.image = 'https://www.weboblog.fr/icone-marker.php?nb='+infoMarker.length;
     var marker = new GMarker(point,iconCluster);
   } else
     // Sinon, il s'agit d'un marker isolé (simple)
     var marker = new GMarker(point,iconSingle);

   // On ajoute le marker à la map 
   map.addOverlay(marker);
   // avec son écouteur d'événement 
   clickMarker(marker,infoMarker);
 }

 // fonction écouteur d'événement pour un marker 
 function clickMarker(marker,infoMarker){
   var info = (infoMarker.length < 2) ? '' : infoMarker.length+' résultats <br />';
   GEvent.addListener(marker, "click", function() {
     // ici, contenu de l'infobulle = listing des résultats 
     for(var n = 0; n < infoMarker.length; n++)
       info += infoMarker.titre[n]+'<br />';
     marker.openInfoWindowHtml(info);
   });
 }

</script>

création d’un objet Rectangle pour les tests d’affichage sur la map

<script type="text/javascript">

 // Definition de l'objet RECTANGLE pour les phases de développement / debugging ...

 function Rectangle(bounds, opt_weight, opt_color, opt_html) {
   this.bounds_ = bounds;
   this.weight_ = opt_weight || 1;
   this.html_ = opt_html || "";
   this.color_ = opt_color || "#888888";
 }

 Rectangle.prototype = new GOverlay();

 Rectangle.prototype.initialize = function(map) {
   var div = document.createElement("div");
   div.innerHTML = this.html_;
   div.style.border = this.weight_ + "px solid " + this.color_;
   div.style.position = "absolute";
   map.getPane(G_MAP_MAP_PANE).appendChild(div);
   this.map_ = map;
   this.div_ = div;
 }

 Rectangle.prototype.remove = function() { this.div_.parentNode.removeChild(this.div_); }
 Rectangle.prototype.copy = function() {
   return new Rectangle(
     this.bounds_,
     this.weight_,
     this.color_,
     this.backgroundColor_,
     this.opacity_
   );
 }

 Rectangle.prototype.redraw = function(force) {
   if (!force) return;
   var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
   var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
   this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
   this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
   this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
   this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
 }

</script>

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é.

fonction GBrowserIsCompatible

La fonction GBrowserIsCompatible permet de tester si le navigateur de l’utilisateur permet d’afficher une carte Google Map.

Vérifier si le navigateur peut afficher une Google Map

Cette fonction retourne true si le navigateur peut afficher la map.

<script type="text/javascript">

   if GBrowserIsCompatible(){
     UTILISATION POSSIBLE DE L'API GOOGLE MAP
   }

</script>

classe GGoogleBar

La classe GGoogleBar ajoute un champ de recherche au sein de la carte Google Map permettant ainsi aux utilisateurs d’effectuer des recherches.

Cette classe ne dispose pas de constructeur. Elle est directement accessible en l’appliquant directement à l’objet de type Gmap2.

La classe GGoogleBar n’est actuellement pas compatible avec le plugin Google Earth qui utilise le type de carte G_SATELLITE_3D_MAP et sera donc désactivée pour ce type de vue.

Ajouter un champ de recherche à la Google Map

champ de recherche Google Map

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   map.enableGoogleBar();
   /* Ajoute le champ de recherche à la map */

</script>

classe GClientGeocoder

La classe GClientGeocoder est utilisée pour communiquer directement avec les serveurs de Google dans le but d’obtenir les coordonnées géographiques d’une adresse (coordonnées représentées par ses latitude et longitude).

Cette classe dispose de son propre système de cache. Si l’utilisateur effectue plusieurs fois une recherche de coordonnées pour une même adresse, un seul appel sera réalisé sur les serveurs de Google.
Les coordonnées obtenues pour ce point seront alors stockées dans ce cache.

De manière générale, il faut éviter d’utiliser la classe GClientGeocoder pour récupérer un lot de coordonnées. On évitera par exemple d’appeler cette classe dans une boucle.
Pour géocoder un lot d’adresses avec Google Map, il est préférable d’avoir recours au service web de géocodage de Google (HTTP Geocoder) [bientôt en ligne].

Récupérer les coordonnées d’un point avec la classe GClientGeocoder

constructeur GClientGeocoder

Disponible depuis la version 2.55 de l’Api.

Signature du constructeur GClientGeocoder : GClientGeocoder(cache : GGeocodeCache [bientôt en ligne]).

Créé une nouvelle instance de géocodage qui communique directement avec les serveurs de Google.

Le paramètre optionnel cache permet de spécifier un cache personnalisé côté client pour des adresses connues. Si ce paramètre n’est pas renseigné, un objet de type GFactualGeocodeCache [bientôt en ligne] sera utilisé.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

</script>

getLatLng()

Disponible depuis la version 2.55 de l’Api.

Signature de la méthode getLatLng : getLatLng(adresse : string, callback : fonction).

Cette méthode, appliquée à notre objet de type GClientGeocoder, envoie une requête aux serveurs de Google afin d’obtenir les coordonnées géographiques de l’adresse passée en paramètre.

Si l’adresse a pu être géolocalisée, la fonction de retour (callback) est invoquée avec un objet de type GLatLng en paramètre.
Le cas échéant, un point nul (null) est renvoyé à la fonction callback.

Dans les cas ambigus (plusieurs réponses pour une même adresse), seul le point jugé le plus pertinent est renvoyé à la fonction callback.

Pour récupérer l’ensemble des réponses (si plusieurs réponses il y a) voir la méthode getLocations.

Récupérer les coordonnées d’un point à partir d’une adresse

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   /* Déclaration de la fonction chargée de communiquer avec les serveurs de Google */
    function geocodeMyAddress(adr){
     if(adr != ''){ /* Si une adresse a été fournie */
       /* Essai de géolocalisation auprès de Google */
       geocoder.getLatLng(adr,function(point) {
         if(!point) {
	  /* L'adresse n'a pu être géolocalisée */
           alert("! "+adr+" n'existe pas ou n\'a pu être géolocalisée ...");
         }else{
	  /* Géolocalisation ok. Un objet de type GPoint est renvoyé, 
	  on récupère les coordonnées */
           var a = point.lat();
           var b = point.lng(); 

	  /* Affichage d'un marker avec infobulle */
           var marker = new GMarker(point);
           map.addOverlay(marker);
           marker.openInfoWindowHtml(CONTENU INFO BULLE);

	  /* Centrage de la carte sur le point */
           map.setCenter(new GLatLng(a,b), 12);
         }}
       );
     }
   }

</script>

getLocations (adresse)

Disponible depuis la version 2.55 de l’Api.

Contrairement à la méthode getLatLng, la méthode getLocations renvoie l’ensemble des résultats trouvés et non le point jugé le plus pertinent.

En fonction des besoins de votre application, vous pouvez ainsi choisir l’une ou l’autre de ces méthodes.

Voir un exemple de récupération des placemarks retournés par la méthode getLocations (format JSON)

Signature de la méthode getLocations : getLocations(adresse : string, callback : fonction).

Cette méthode effectue un géocodage en convertissant une adresse postale en coordonnées géographiques. La méthode getLocations envoie alors une requête au service de géocodage de Google, en lui demandant de parser l’adresse passée en paramètre.

La réponse est ensuite envoyée à la fonction callback. Puisque cette méthode communique avec les serveurs de Google, il est nécessaire de déclarer une fonction callback pour traiter la réponse.

Cette réponse contiendra un code représentant le status de la requête (200 = ok, 602 = non trouvée, codes réponses du geocoder de Google) et si l’adresse a pu être géolocalisée, un ou plusieurs objets Placemark.

À noter qu’à partir de la version 2.133 de l’Api, cette méthode a été augmentée pour permettre de passer un objet de type GLatLng en paramètre pour le géocodage inversé comme expliqué dans le paragraphe suivant.

Récupérer un objet placemark à partir d’une adresse

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   /* Déclaration de la fonction chargée de communiquer avec les serveurs de Google */
    function geocodeMyAddress(adr){
     if(adr != ''){ /* Si une adresse a été fournie */
       /* Essai de géolocalisation auprès de Google */
       geocoder.getLocations(adr,function(point) {
         if(!point) {
	  /* L'adresse n'a pu être géolocalisée */
           alert("! "+adr+" n'existe pas ou n'a pu être géolocalisée ...");
         }else if(point['Status']['code'] == 200){
	   isGeocode(point);
         }}
       );
     }
   }

   /* Déclaration de la fonction chargée de traiter la réponse */
   function isGeocode (point){
     document.getElementById("answer").innerHTML = JSON.stringify (point);
   }

   Dans notre exemple, en recherchant la ville "Brest",
   les fonctions geocodeMyAddress et isGeocode nous renvoient
   les informations listées ci-dessous : 

   {
     "name" : "brest",
     "Status" : { "code" : 200, "request" : "geocode" },

     "Placemark" :
      [{
        "id" : "p1",
	"address" : "Brest, France",
	"AddressDetails" :
	{
	  "Accuracy" : 4,
	  "Country" :
	   {
	     "AdministrativeArea":
	     {
	       "AdministrativeAreaName" : "Brittany",
	       "SubAdministrativeArea" :
	       {
	        "Locality" : { "LocalityName" : "Brest" },
	        "SubAdministrativeAreaName" : "Finistere"
	       }
	     },
	    "CountryName" : "France",
	    "CountryNameCode" : "FR"
	   }
	},
        "ExtendedData" : { "LatLonBox" : { "north" : 48.4202334, "south" : 48.3609578,
		                            "east" :-4.4228716, "west":-4.550931} },
        "Point" :{ "coordinates" : [-4.4869013,48.3906042,0] }
	}]
   }

</script>

getLocations (latlng)

Disponible depuis la version 2.133 de l’Api.

Contrairement à la méthode getLatLng, la méthode getLocations renvoie l’ensemble des résultats trouvés et non le point jugé le plus pertinent.

En fonction des besoins de votre application, vous pouvez ainsi choisir l’une ou l’autre de ces méthodes.

Signature de la méthode getLocations : getLocations(latlng : GLatLng, callback : fonction).

Cette méthode effectue un géocodage inversé en convertissant des coordonnées géographiques en une adresse postale.

Dans ce cas de figure, la méthode getLocations envoie alors une requête au service de géocodage de Google, en lui demandant de retourner l’adresse correspondant au point passé en paramètre.

La réponse est ensuite envoyée à la fonction callback. Puisque cette méthode communique avec les serveurs de Google, il est nécessaire de déclarer une fonction callback pour traiter la réponse.

Cette réponse contiendra un code représentant le status de la requête (200 = ok, 602 = non trouvée, …) et si l’adresse a pu être géolocalisée, un ou plusieurs objets Placemark.

À noter que la méthode getLocations peut également prendre en paramètre une adresse postale.

Récupérer une adresse à partir de ses coordonnées

<script type="text/javascript">

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   var pt = new GLatLng(48.3906042, -4.4869013);
   /* Déclaration du point */

   /* Déclaration de la fonction chargée de communiquer avec les serveurs de Google */
    function geocodeMyAddress(pt){
     if(adr != ''){ /* Si une adresse a été fournie */
       /* Essai de géolocalisation auprès de Google */
       geocoder.getLocations(pt,function(point) {
         if(!point) {
	  /* L'adresse n'a pu être géolocalisée */
           alert("! "+adr+" n'existe pas ou n'a pu être géolocalisée ...");
         }else if(point['Status']['code'] == 200){
	   isGeocode(point);
         }}
       );
     }
   }

   /* Déclaration de la fonction chargée de traiter la réponse */
   function isGeocode (point){
     document.getElementById("answer").innerHTML = JSON.stringify (point);
   }

   voir la réponse obtenue par les fonctions geocodeMyAddress et isGeocode   

</script>

getCache()

Disponible depuis la version 2.55 de l’Api.

Signature de la méthode getCache : getCache().

Cette méthode retourne le cache utilisé (objet de type GGeocodeCache [bientôt en ligne]) pour le géocodage ou null si aucun cache n’est effectué côté client.

Lister le contenu du cache de la classe GClientGeocoder

<script type="text/javascript">

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   var pt = new GLatLng(48.3906042, -4.4869013);
   /* Déclaration du point */

   /* Déclaration de la fonction chargée de communiquer avec les serveurs de Google */
    function geocodeMyAddress(pt){
     if(adr != ''){ /* Si une adresse a été fournie */
       /* Essai de géolocalisation auprès de Google */
       geocoder.getLocations(pt,function(point) {
         if(!point) {
	  /* L'adresse n'a pu être géolocalisée */
           alert("! "+adr+" n'existe pas ou n'a pu être géolocalisée ...");
         }else if(point['Status']['code'] == 200){
	  var cache = geocoder.getCache();
	  for(i in cache)
             /* permet de lister le contenu de la variable cache */
	   GLog.write(i+' : '+cache[i]);
         }}
       );
     }
   }

</script>

setCache()

Disponible depuis la version 2.55 de l’Api.

Signature de la méthode setCache : setCache(cache : GGeocodeCache [bientôt en ligne]).

Cette méthode définit un cache côté client. Si cette méthode est invoquée avec un cache définit à null, le système de cache côté client sera désactivé.

La définition d’un nouveau cache aura pour effet de le réinitialiser en supprimant notamment (du cache) les adresses précédemment enregistrées.

Définir le cache de la classe GClientGeocoder

<script type="text/javascript">

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   geocoder.setCache(null);
   /* Désactive le cache côté client */

</script>

setViewport()

Disponible depuis la version 2.82 de l’Api.

Signature de la méthode setViewport : setViewport(bounds : GLatLngBounds).

Cette méthode permet d’indiquer au service de géocodage de Google de privilégier telle ou telle zone définie par l’objet de type GLatLngBounds (zone rectangulaire) passé en paramètre.

Elle peut s’avérer utile lorsque plusieurs points correspondent à l’adresse ou à la ville passée en paramètre et que l’application cherche à renvoyer des informations liées plus à une région qu’à une autre.

Il est important de noter que cette méthode n’est qu’une indication envoyée à Google qui ne sera pas forcément respectée…

Privilégier une zone de recherche

<script type="text/javascript">
   Prenons l'exemple de la "rue Jean-Jaurès".
   Sans précision quelconque, le service de géocodage de Google
   renvoie une dizaine de points (placemarks) différents.

   Nous allons tenter d'orienter la recherche sur la Bretagne. 

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   var coinNordOuest = new GLatLng(48.541401, -4.6578613);
   var coinSudEst = new GLatLng(47.2168424, -1.5567445);
   /* Déclaration des extrémités de la zone géographique (Ploudalmézeau / Nantes). */

   geocoder.setViewport(new GLatLngBounds(coinNordOuest, coinSudEst));
   /* Application de la zone de recherche à privilégier */

   var polygone = new GPolyline([
     new GLatLng(coinSudEst.lat(), coinNordOuest.lng()),
     new GLatLng(coinSudEst.lat(), coinSudEst.lng()),
     new GLatLng(coinNordOuest.lat(), coinSudEst.lng()),
     new GLatLng(coinNordOuest.lat(), coinNordOuest.lng()),
     new GLatLng(coinSudEst.lat(), coinNordOuest.lng())
   ], "#ffffff", 3);
   /* Création de la zone géographique pour aperçu sur la carte (rectangle blanc) */

   map.addOverlay(polygone);
   /* ajout du polygone sur la map */

   /* Déclaration de la fonction chargée de communiquer avec les serveurs de Google */
    function geocodeMyAddress(adr){
     if(adr != ''){ /* Si une adresse a été fournie */
       /* Essai de géolocalisation auprès de Google */
       geocoder.getLatLng(adr,function(point) {
         if(!point) {
	  /* L'adresse n'a pu être géolocalisée */
           alert("! "+adr+" n'existe pas ou n\'a pu être géolocalisée ...");
         }else{
	  /* Géolocalisation ok. Un objet de type GPoint est renvoyé, 
	  on récupère les coordonnées */
           var a = point.lat();
           var b = point.lng(); 

	  /* Affichage d'un marker avec infobulle */
           var marker = new GMarker(point);
           map.addOverlay(marker);
           marker.openInfoWindowHtml(CONTENU INFO BULLE);

	  /* Centrage de la carte sur le point */
           map.setCenter(new GLatLng(a,b), 12);
         }}
       );
     }
   }

</script>

Résultat obtenu à l’aide de l’indication setViewport

Ici, on observe que le résultat obtenu est bien celui recherché.

Il est bon de préciser à nouveau que cette indication n’est pas toujours respectée.

geocoder Google

getViewport()

Disponible depuis la version 2.82 de l’Api.

Signature de la méthode getViewport : getViewport().

Cette méthode retourne un objet de type GLatLngBounds (zone rectangulaire) correspondant à la zone privilégiée pour la recherche d’un point.

setBaseCountryCode()

Disponible depuis la version 2.82 de l’Api.

Signature de la méthode setBaseCountryCode : setBaseCountryCode(countryCode : string).

Cette méthode permet de privilégier la recherche pour un pays donné en fournissant le code pays en paramètre. Par défaut, le pays de recherche sera celui du domaine sur lequel est hébergée votre application Google Map.

La méthode n’est pas sensible à la casse.

Privilégier un pays pour la recherche

<script type="text/javascript">

   Par exmple, si l'on recherche "Kennedy", le résultat jugé le plus pertinent se trouve
   situé au Pérou parmi une dizaine de points (dont le Mexique).

   En précisant le code MX (pour Mexique) pour le pays dans lequel privilégier
   la recherche, le résultat renvoyé sera bien situé au Mexique.

   var geocoder = new GClientGeocoder();
   /* Créé un objet de type GClientGeocoder, prêt à être utilisé. */

   geocoder.setBaseCountryCode('MX');
   /* Privilégiera la recherche pour le Mexique */

    voir la liste des codes pays

</script>

getBaseCountryCode()

Disponible depuis la version 2.82 de l’Api.

Signature de la méthode getBaseCountryCode : getBaseCountryCode().

Cette méthode retourne le code pays privilégié pour la recherche de l’adresse envoyée. Si le code pays n’a pas été renseigné, la méthode renvoie null.

reset()

Disponible depuis la version 2.55 de l’Api.

Signature de la méthode reset : reset().

Cette méthode réinitialise le géocodage en cours. En particulier, cette méthode fait appel à la méthode GGeocodeCache.reset() [bientôt en ligne] sur le cache côté client.