Weblog W3Positive

Pour afficher une fenêtre d'information lorsqu'on clique sur le marqueur, il faut lui ajouter un gestionnaire d'événement sur le clic. On peut aussi décider de réagir au survol :

GEvent.addListener(marker, "click", function() { 
   // what to do when clicking on marker
});

GEvent.addListener(marker, "mouseover", function() { 
   // quoi faire quand on survole le marker
});

Dans le gestionnaire d'énévement, nous utiliserons la méthode GMarker.openInfoWindowHtml(), qui prend un seul paramètre : le code Html ou la chaîne de caractères qui apparaîtra comme contenu.

GEvent.addListener(marker, "click", function() { 
   marker.openInfoWindowHtml("<b>Coucou</b>, ici c'est Reykjavik");
});

Remarque : cette méthode dérive de la méthode GMap2.openInfoWindowHtml() : appliquée à la map, elle prend deux paramètres :

• le premier est un objet GLatLng qui sont les coordonnées pour centrer la fenêtre d'information,
• le second est le code Html ou la chaîne de caractères qui apparaîtra comme contenu.

La fenêtre d'information appartient donc à la map, qui ne peut en posséder qu'une, et non au marqueur : le fait de centrer la pointe de la fenêtre sur le marqueur en crée l'illusion. La principale conséquence de cette règle est qu'on ne peut affichier qu'une seule fenêtre d'information à la fois.

A ce stade, voici deux options d'un marqueur qui peuvent nous être utiles :

• title : équivalent au title d'un href: permet de spécifier une infobulle
• clickable : vrai par défaut. Il peut être intéressant de spécifier cette option (à false) lorsqu'on n'ajoute pas d'événement click à un marqueur, car celui-ci utilise alors moins de ressources.

Voici donc le code de création d'un marqueur, tel qu'utilisé dans notre premier exemple :

var reykjavik = new GLatLng(64.135338, -21.89521) ;
var marker1 = new GMarker(reykjavik, {title: "cliquez pour plus d'informations"});
GEvent.addListener(marker1, "click", function() { 
   marker1.openInfoWindowHtml("<h2>Reykjavik</h2> <b>capitale</b> de l'Islande"); 
});
map.addOverlay(marker1);

Création des marqueurs dans une fonction

Pour nous simplifier la vie, nous allons confier la création des marqueurs, avec ou sans icône personnalisée, avec ou sans fenêtre d'information, à une fonction :

function createMarker(point, html, myicon) { 
  if (myicon != null) {
    if (html != null) {
      var marker = new GMarker(point, {icon:myicon, title: "cliquez pour plus d'informations"} ); 
    } else {
      var marker = new GMarker(point, {icon:myicon, clickable: false} ); 
    }
  } else {
    if (html != null) {
      var marker = new GMarker(point, {title: "cliquez pour plus d'informations"} ); 
    } else {
      var marker = new GMarker(point, {clickable: false}); 
    }
  }
  if (html != null) {
    GEvent.addListener(marker, "click", function() { 
      marker.openInfoWindowHtml(html); 
    }); 
  }
  return marker; 
}

On peut donc appeler cette fonction de différentes façons selon nos besoins :

 var blueIcon = new GIcon(G_DEFAULT_ICON);
 blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";

 map.addOverlay(createMarker(new GLatLng(64.27951, -20.36138) ,'<p>Geysir</p>'));
 map.addOverlay(createMarker(new GLatLng(64.135338, -21.89521) ,'<p>Reykjavik</p>', blueIcon ));
 map.addOverlay(createMarker(new GLatLng(65.683868, -18.11046)));
 map.addOverlay(createMarker(new GLatLng(64.35, -16.58, null, blueIcon)));

Voir notre deuxième exemple.

Données dans un tableau

On voit que le code commence a être répétitif, grâce à notre fonction. Il peut être automatisé en rangeant les données dans un tableau. Ceci est un bon réflexe, car ainsi données et code sont séparés. C'est un excellent préparatif à notre tutorial sur le chargement asynchrone de ces données par le format Ajax. Explorons ensemble notre exemple :

La construction du tableau de données data est réalisée dans le fichier islande.1.js, et celui-ci est appelé avant le code :

<script src="islande.1.js" type="text/javascript"></script>

Le format d'une donnée est le suivant :

{ coord: {lat: 64.135338, lng: -21.89521}, 
   html: "Reykjavik",
   icon: 'blueIcon' }

Après la création de la map, on crée les icônes nécessaires, puis on parcourt data dans une boucle for et on crée les marqueurs au fur et à mesure (nous appelons ici la méthode GMap2.addOverlay à chaque fois, nous aurions aussi pu utiliser le gestionnaire de marqueurs) :

var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";

for (i=0 ; i < data.length ; ++i) {
  map.addOverlay(createMarker( new GLatLng(data[i].coord.lat, data[i].coord.lng),
                                            data[i].html,
                                            eval(data[i].icon) ));
}

Pour pouvoir gérer les icones, on indique dans le tableau data un nom. Si ce même nom est repris pour la variable utilisée à la création de l'icône, eval(nom_variable_icone) permet de la passer très simplement à notre fonction générique. Cela évite d'utiliser un switch() sur data[i].icon.

Fenêtres à onglets

Au lieu de la méthode GMarker.openInfoWindowHtml, on peut utiliserGMarker.openInfoWindowTabsHtml. On aura alors une fenêtre à onglets. openInfoWindowHtml prend pour paramètre un tableau de n GInfoWindowTab. Les objets GInfoWindowTab prennent deux paramètres :

• le premier est le label de l’onglet,
• le second est le code HTML ou le texte constituant le contenu.

On va donc devoir créer les différents onglets, puis les relier au marqueur :

var tab = new GInfoWindowTab ("un", "contenu de un");
var tab2 = new GInfoWindowTab ("deux", "contenu de deux");
GEvent.addListener(marker, "click", function() { 
   marker.openInfoWindowTabsHtml( new Array(tab, tab2));
});

Options

openInfoWindowHtml et openInfoWindowTabsHtml ont un argument supplémentaire optionnel qui permet de spécifier quelques options. Citons les plus intéressantes :

• selectedTab : permet de spécifier l'onglet sélectionné à l'ouverture de la fenêtre
• maxWidth : largeur maximale de la fenêtre, en pixels
• onOpenFn : nom de la fonction à appeler à l’ouverture de la fenêtre.
• __onCloseFn : nom de la fonction à appeler à la fermeture de la fenêtre.

Ce qui donnerait par exemple :

var options = {   
  maxWidth : 300,    selectedTab : 1, 
  onOpenFn : tracerEvenementOnOpenFn,
  onCloseFn : tracerEvenementOnCloseFn
};
function tracerEvenementOnOpenFn()  {  alert("ouverture"); }
function tracerEvenementOnCloseFn()  {  alert("fermeture"); }
marker.openInfoWindowTabsHtml( new Array(tab, tab2), options);

Dans notre exemple, nous nous contenterons de présélectionner le deuxième onglet (donc d'index 1) à l'ouverture de la fenêtre :

marker.openInfoWindowTabsHtml( new Array(tab, tab2), {selectedTab : 1});