FAQ API Google Maps
FAQ API Google MapsConsultez toutes les FAQ
Nombre d'auteurs : 4, nombre de questions : 31, dernière mise à jour : 15 juin 2021
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 ?
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 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.
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.
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 :
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.
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.
// 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.
oInfo.open( oMap, oMarker);
On notera que si la position a déjà été initialisée le paramètre anchor peut être omis.
Exemple :
// 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 :
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);
}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 ?
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 la mise au dessus de l'InfoWindow, 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 ?
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.
oInfo.close(); // masque l'InfoWindowCette 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.
oInfo.setOptions({'map' : null});