FAQ API Google

Sommaire > Google Maps > Les InfoWindows
        Comment créer une InfoWindow ?
        Comment modifier le style d'une InfoWindow ?
        Pourquoi l'InfoWindow s'affiche sur le dernier marker créé ?
        Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?
        Pourquoi l'InfoWindow n'affiche pas le bon contenu ?
        Comment afficher une InfoWindow au-dessus des autres ?

Version PDF (Miroir) Version hors-ligne (Miroir)

Comment créer une InfoWindow ?

[haut]

auteur : NoSmoking

Pour créer une InfoWindow, il faut utiliser le constructeur google.maps.InfoWindow. Ce constructeur prend, ou non, en paramètre un objet contenant les options à affecter à l'InfoWindow :

Exemple #1 :

  // création d'une infobulle vide en attente d'initialisation
  var oInfo = new google.maps.InfoWindow();

Exemple #2 :

  // création d'une infobulle en attente d'affichage
  var oInfo = new google.maps.InfoWindow({
    'position' : new google.maps.LatLng( 46.80, 1.70),           // position d'ancrage de l'InfoWondow sur la carte
    'content'  : 'Le centre de la <b>FRANCE</b> n\'est pas loin !'// contenu qui sera affiché
  });

Ne pas mettre de virgule après la dernière déclaration de propriété.

Les options suivantes peuvent être initialisées à la création d'une InfoWindow :

content (string|Node)
Contenu devant être affiché dans l'InfoWindow ;
disableAutoPan (boolean)
Autorise ou non l'InfoWindow à être visible entièrement lors de son affichage. La valeur par défaut est false, ce qui veut dire que l'InfoWindow est affichée entièrement ;
maxWidth (number)
Largeur maximale de l'InfoWindow. La valeur par défaut dépend du contenu à afficher ;
pixelOffset (Size)
Décalage en pixels par rapport à la position, en latitude/longitude, prévue dans l'option position ;
position (LatLng)
Position d'affichage de l'InfoWindow, en tenant compte de l'option pixelOffset éventuelle ;
zIndex (number)
Ordre d'affichage de l'InfoWindow, l'empilement en quelque sorte. Une InfoWindow avec un zIndex élevé sera affichée par-dessus celle qui possède un zIndex plus faible.

Comment modifier le style d'une InfoWindow ?

[haut]

auteur : NoSmoking

Pour une fois la réponse est simple : on ne peut pas. Sauf en allant triturer le DOM.
Il faut, dans ce cas, passer par une InfoWindow customisée via le constructeur google.maps.OverlayView.

Pourquoi l'InfoWindow s'affiche sur le dernier marker créé ?

[haut]

auteur : NoSmoking

Problème :
Lorsque l'on clique sur un marker, l'InfoWindow s'affiche toujours sur le dernier marker créé, affichant les positions correctes du marker cliqué.

Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers, nous ajoutons un événement lors du clic afin d'afficher la position, latitude et longitude, du marker cliqué dans une InfoWindow :

function initCarte(){
  var tMarker = [
    { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon'},
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris'},
    { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux'},
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille'}
  ];
  var oMap, oMarker, oInfo;
  var i, nb = tMarker.length;
  // création de la carte
  oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : new google.maps.LatLng( 46.80, 1.70),
    'zoom' : 6,
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création infobulle
  oInfo = new google.maps.InfoWindow();
  // création des markers dans une boucle
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function( data){
      // affichage position du marker
      oInfo.setContent( 'position' :<br>' +data.latLng.toUrlValue(5));
      oInfo.open( oMap, oMarker);
    });
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);

Explication :
Au moment de l'exécution de la fonction, la variable oMarker a pour référence le dernier marker initialisé.

Solution :
- Pour remédier à ce problème, il nous faut utiliser le mot-clé this dans le corps de la fonction mise sur l'événement.
- Dans la fonction le this représente l'objet sur lequel s'est déclenché l'événement.
- De la même manière, on n'utilisera pas la variable oMap, mais on récupérera via la méthode getMap() la map associée au marker.

  // événement clic sur le marker
  google.maps.event.addListener( oMarker, 'click', function( data){
    // affichage position du marker
    oInfo.setContent( 'position' :<br>' +data.latLng.toUrlValue(5));
    oInfo.open( this.getMap(), this);
  });

Conclusion :
Dans une "fonction événementielle", il est préférable d'utiliser le mot-clé this pour faire référence à l'objet en cours.

Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

[haut]

auteur : NoSmoking

Problème :
Lorsque je crée plusieurs markers dans une boucle avec une seule InfoWindow rien ne s'affiche quand je clique sur le marker.

Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers, nous ajoutons un événement lors du clic afin d'afficher une InfoWindow avec une info propre à chaque marker :

function initCarte(){
  var tMarker = [
    { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon',      'info' :'<b>Lyon<\/b><br>la suite du texte...'},
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris',     'info' :'<b>Paris<\/b><br>la suite du texte...'},
    { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux',  'info' :'<b>Bordeaux<\/b><br>la suite du texte...'},
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>la suite du texte...'}
  ];
  var oMap, oMarker, oInfo;
  var i, nb = tMarker.length;
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création infobulle
  oInfo = new google.maps.InfoWindow();
  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affectation du contenu
      oInfo.setContent( tMarker[i].info);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);

Explication :
Au moment de l'exécution de la fonction et de l'affectation du contenu à l'InfoWindow, la variable i vaut nb, soit 4 dans le cas ci-dessus, et comme tMarker[4] est indéfini cela entraîne une erreur.

Pour remédier à ce problème il existe plusieurs méthodes.

Méthode #1 : surcharger l'objet oMarker en initialisant une variable, numero, à la création du marker :

  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    oMarker = new google.maps.Marker({
      'numero' : i,           // ici on sauve la valeur de i
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affectation du contenu en utilisant this.numero
      oInfo.setContent( tMarker[this.numero].info);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }

Méthode #2 : passer par une fonction externe à la boucle :

// fonction externe de création des markers
function setEventMarker( marker, infowindow, texte){
  google.maps.event.addListener( marker, 'click', function() {
    // affectation du texte
    infowindow.setContent( texte);
    // affichage InfoWindow
    infowindow.open( this.getMap(), this);
  });
}

... que l'on appellera dans la boucle de la façon suivante :

  // création des markers
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // événement clicl sur le marker via une fonction externe
    setEventMarker( oMarker, oInfo, tMarker[i].info);
  }

Méthode #3 : encapsuler le tout dans une fonction anonyme, réalisation d'une closure, à laquelle on passe en paramètre les données à afficher :

  // création des markers
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // événement clic sur le marker passage par fonction anonyme
    (function( texte){
      google.maps.event.addListener( oMarker, 'click', function() {
        // affectation du texte passé en paramètre
        oInfo.setContent( texte);
        // affichage InfoWindow
        oInfo.open( this.getMap(), this);
      });
    })(tMarker[i].info);
  }

Pourquoi l'InfoWindow n'affiche pas le bon contenu ?

[haut]

auteur : NoSmoking

Problème :
Lorsque je crée plusieurs markers dans une boucle avec une seule InfoWindow, j'obtiens toujours l'affichage du même contenu quand je clique sur le marker.

Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers, nous ajoutons un événement lors du clic afin d'afficher une InfoWindow avec une info propre à chaque marker :

function initCarte(){
  var tMarker = [
    { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon',      'info' :'<b>Lyon<\/b><br>la suite du texte...'},
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris',     'info' :'<b>Paris<\/b><br>la suite du texte...'},
    { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux',  'info' :'<b>Bordeaux<\/b><br>la suite du texte...'},
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>la suite du texte...'}
  ];
  var oMap, i, nb = tMarker.length;
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    var oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // création infobulle avec texte
    var oInfo = new google.maps.InfoWindow({
      'content' : tMarker[i].info
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);

Explication :
Au moment de l'exécution de la fonction, c'est la dernière InfoWindow intialisée qui est prise en compte et donc affichée, c'est celle contenant tMarker[3].info.

Solution : Voir les solutions proposées à la question Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

Comment afficher une InfoWindow au-dessus des autres ?

[haut]

auteur : NoSmoking

Les InfoWindows sont affichées sur la carte suivant leur latitude, celles ayant les plus petites latitudes étant affichées au-dessus de celles ayant une latitude plus grande. En d'autres termes, celles qui sont en bas de l'écran sont affichées au-dessus de celles qui sont en haut de l'écran.
Dans le cas où deux InfoWindows posséderaient la même latitude, c'est l'ordre d'affichage qui est pris en compte. La première affichée passera en dessous de la deuxième affichée et ainsi de suite.

Pour gérer l'ordre d'affichage, il suffit d'utiliser la méthode setZIndex() de l'objet google.maps.InfoWindow en passant en paramètre la valeur du zIndex souhaitée.

 oInfo.setZIndex( valeur_zIndex);

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

oInfo.setOptions( {'zIndex' : valeur_zIndex});

Pour gérer cela, on va surcharger l'objet Map en initialisant une variable, zIndexBulle, à la création de la map :

  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zIndexBulle' : 1,  // ici on surcharge pour utilisation
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });

Ainsi lors de l'affichage, au clic sur le marker, il n'y aura plus qu'à incrémenter sa valeur et à l'affecter au zIndex de l'InfoWindow :

  google.maps.event.addListener( oMarker, 'click', function(){
    var map = this.getMap();           // récupération de l'objet carte
    var index = map.zIndexBulle ++;    // incrémentation et récupération
    bulle.setZIndex( index);           // affectation à l'InfoWindow
    bulle.open( map, this);            // affichage de l'InfoWindow
  });

Le code complet d'utilisation donne :

function initCarte(){
  var tMarker = [
    { 'lat' :45.782129, 'lon' : 3.095521,
      'title' :'Clermont-Ferrand', 'info' :'<b>Clermont-Ferrand<\/b><br>la suite du texte...'},
    { 'lat' :45.438392, 'lon' : 4.388131,
      'title' :'Saint Etienne', 'info' :'<b>Saint Etienne<\/b><br>la suite du texte...'},
    { 'lat' :45.767299, 'lon' : 4.834329,
      'title' :'Lyon', 'info' :'<b>Lyon<\/b><br>la suite du texte...'},
    { 'lat' :45.192063, 'lon' : 5.720395,
      'title' :'Grenoble', 'info' :'<b>Grenoble<\/b><br>la suite du texte...'}
  ];
  var oMarker, oInfo, oMap, i, nb = tMarker.length;
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zIndexBulle' : 1,  // ici on surcharge pour utilisation
    'zoom' : 6,
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création des marqueurs
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title
    });
    // création infobulle
    oInfo = new google.maps.InfoWindow({
      'content' : tMarker[i].info
    });
    // ajout evenement sur click
    (function( bulle){
      google.maps.event.addListener( oMarker, 'click', function(){
        var map = this.getMap();           // récup. de l'objet carte
        var index = map.zIndexBulle ++;    // incrémentation et récupération
        bulle.setZIndex( index);           // affectation à l'InfoWindow
        bulle.open( map, this);            // affichage de l'InfoWindow
      });
    })(oInfo);
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);

Nota bene : nous utilisons, pour la création des InfoWindows, la méthode #3 de Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

Version PDF (Miroir) Version hors-ligne (Miroir)

Consultez les autres F.A.Q.

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.