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

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