FAQ API Google MapsConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 31, dernière mise à jour : 23 février 2015

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éé ?
Comment afficher une InfoWindow ?
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 ?
Comment masquer une InfoWindow ?

Version PDF Version hors-ligne

Comment créer une InfoWindow ?

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 :

Sélectionnez

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

Exemple #2 :

Sélectionnez

  // 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 la carte est déplacé pour que l'InfoWindow soit 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|LatLngLiteral)
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.

Mis à jour le 23 février 2015 par NoSmoking

Comment modifier le style d'une InfoWindow ?

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.

Créé le 20 novembre 2011 par NoSmoking

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

Problème :
Lorsque je clique sur un marker, l'InfoWindow s'affiche toujours sur le dernier marker créé, affichant pourtant 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 :

Sélectionnez

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.

Sélectionnez

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

Mis à jour le 21 mai 2013 par NoSmoking

Comment afficher une InfoWindow ?

L'affichage d'une InfoWindow peut se faire de plusieurs façons.

1/ A l'initialisation. Dans ce cas il suffit de spécifier les options suivantes :

le content : c'est un minimum pour que cela serve à quelque chose ;
la map : la carte sur laquelle sera affichée l'InfoWindow ;
la position : l'endroit où sera affichée l'InfoWindow, la position doit être au format google.maps.LatLng ou au format google.maps.LatLngLiteral.

Sélectionnez

  // création d'une infobulle et affichage
  var oInfo = new google.maps.InfoWindow({
    'content' : 'Le centre de la FRANCE n\'est pas loin !', // contenu qui sera affiché  
    'map' : oMap,                                           // carte sur laquelle est affichée l'InfoWindow    
    'position' : new google.maps.LatLng( 46.80, 1.70)       // position d'affichage de l'InfoWindow
  });

2/ En utilisant la position d'un Marker et la méthode open() de l'objet google.maps.InfoWindow. La méthode open(map, anchor) attend deux paramètres :

map : la carte sur laquelle sera affichée l'InfoWindow ;
anchor : l'objet auquel s'accroche l'InfoWindow.

Sélectionnez

 oInfo.open( oMap, oMarker);

On notera que si la position a déjà été initialisée le paramètre anchor peut être omis.
Exemple :

Sélectionnez

  // création d'une infobulle
  var oInfo = new google.maps.InfoWindow({
    'content' : 'Le centre de la FRANCE n\'est pas loin !', // contenu qui sera affiché  
    'position' : new google.maps.LatLng( 46.80, 1.70)       // position d'affichage de l'InfoWindow
  });
  // affichage de l'InfoWindow  
  oInfo.open( oMap);   // seule la référence à la carte est passée en paramètre

3/ En utilisant la méthode setOptions() de l'objet google.maps.InfoWindow et en passant en paramètre un objet contenant les options à modifier sous sa forme littérale :

Sélectionnez

 var oLatLng = new google.maps.LatLng( 46.80, 1.70);   // position d'affichage de l'InfoWindow
 oInfo.setOptions({'map': oMap, 'position': oLatLng}); // passage des options carte et position

Mis à jour le 23 février 2015 par NoSmoking

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

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 :

Sélectionnez

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 :

Sélectionnez

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

Sélectionnez

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

Sélectionnez

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

Sélectionnez

  // 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);
  }

Créé le 20 novembre 2011 par NoSmoking

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

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 :

Sélectionnez

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 ?

Créé le 20 novembre 2011 par NoSmoking

Comment afficher une InfoWindow au-dessus des autres ?

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.

Sélectionnez

 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 :

Sélectionnez

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

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

Sélectionnez

  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 :

Sélectionnez

  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 :

Sélectionnez

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 ?

Mis à jour le 21 mai 2013 par NoSmoking

Comment masquer une InfoWindow ?

Pour masquer une InfoWindow, il suffit d'utiliser la méthode close() de l'objet google.maps.InfoWindow.

Cette méthode ne prend aucun paramètre.

Sélectionnez

 oInfo.close();  // masque l'InfoWindow

Cette action a le même effet que l'appui sur la croix située dans le coin en haut à droite de l'InfoWindow.

On peut également utiliser la méthode setOptions(), en mettant l'option map à null. Dans ce cas, on passe en paramètre un objet contenant les options à modifier sous sa forme littérale.

Sélectionnez

 oInfo.setOptions({'map' : null});

Créé le 2 janvier 2012 par NoSmoking

Version PDF Version hors-ligne

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.