API Google Maps v3: InfoWindow ne se dimensionnant pas correctement
Il semble que mon InfoWindow, lorsque vous cliquez sur l'icône de la maison sur mon Google Maps v3, n'est pas correctement dimensionné automatiquement au contenu de l'InfoWindow.
Il donne des barres de défilement quand il ne devrait pas. La fenêtre d'information doit être correctement dimensionnée automatiquement.
Des idées sur pourquoi?
À la demande, le code JavaScript pertinent qui injecte le code HTML pour InfoWindow:
listing = '<div>Content goes here</div>';
[~ # ~] met à jour [~ # ~]
Ce problème a été traité par Google dans le numéro
https://issuetracker.google.com/issues/35823659
Le correctif a été mis en œuvre en février 2015 dans la version 3.19 de l'API JavaScript de Maps.
Ajouter une div à l'intérieur de votre infowindow
<div id=\"mydiv\">YourContent</div>
Puis définissez la taille en utilisant css. travaille pour moi. Cela suppose que toutes les infowindows ont la même taille!
#mydiv{
width:500px;
height:100px;
}
Réponse courte: définissez la propriété maxWidth options dans le constructeur . Oui, même si définir la largeur maximale n’était pas ce que vous vouliez faire.
Plus longue histoire: En migrant une carte v2 en v3, j'ai vu exactement le problème décrit. La largeur et la hauteur des fenêtres varient, certaines avec des barres de défilement verticales et d'autres non. Certains avaient <br /> incorporés dans les données, mais au moins un avec cette taille est OK.
Je ne pensais pas que la propriété InfoWindowsOptions.maxWidth était pertinente, car je me fichais de contraindre la largeur ... mais en le définissant avec le constructeur InfoWindow, j'ai obtenu ce que je voulais, et les fenêtres redimensionnent maintenant (verticalement) et affichent le contenu complet sans barre de défilement verticale. Cela n’a pas beaucoup de sens pour moi, mais ça marche!
Vous devez donner le contenu à InfoWindow à partir de l'objet jQuery.
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}
ça marche pour moi
MODIFIÉ (hors concours): Faites-moi confiance, parmi les cent autres réponses à cette question, c'est le seul correct qui explique également POURQUOI ça se passe
Ok, donc je sais que ce fil est ancien et a mille réponses, mais aucune d’elles n’est correcte et j’ai le besoin de poster la bonne réponse .
Tout d'abord, vous n'avez pas jamais besoin de spécifier width's ou height's sur n'importe quoi pour que votre infoWindow soit affichée sans barres de défilement, bien que vous puissiez parfois le faire fonctionner accidentellement en le faisant (mais cela finira par échouer).
Deuxièmement, l'API Google Maps infoWindow's n’a pas de bogue de défilement, il est très difficile de trouver les informations correctes sur son fonctionnement. Eh bien, la voici:
Lorsque vous indiquez à l'API Google Maps de s'ouvrir dans infoWindow, procédez comme suit:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
À toutes fins utiles, Google Maps place temporairement un div à la fin de votre page (. En fait, il crée un detached DOM tree - mais sur le plan conceptuel, il est plus facile de comprendre si je vous dis que vous imaginez un div se situant à la fin de votre page ) avec le contenu HTML que vous avez spécifié. Il mesure ensuite cette div (ce qui signifie que, dans cet exemple, quelles que soient les règles CSS de mon document qui s'appliquent à h1 et les balises p lui seront appliquées) pour obtenir ses width et height. Ensuite, Google prend div, lui attribue les mesures qu'il a obtenues lors de l'ajout à votre page et le place sur la carte à l'emplacement que vous avez spécifié.
Voici où le problème se produit pour beaucoup de gens - ils peuvent avoir un code HTML qui ressemble à ceci:
<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>
et, pour une raison quelconque, CSS qui ressemble à ceci:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
Pouvez-vous voir le problème? Lorsque l'API essaie de prendre les mesures pour votre infoWindow (immédiatement avant de l'afficher), le h1 une partie du contenu aura une taille de 18px (car la "division de mesure" temporaire est ajoutée au corps), mais lorsque l'API place réellement le infoWindow sur la carte, le #map-canvas h1 Le sélecteur aura la priorité, ce qui fera que la taille de la police sera très différente de ce qu’elle était lorsque l’API a mesuré la taille du infoWindow et dans ce cas vous always obtenir des barres de défilement.
Il peut y avoir des nuances légèrement différentes pour la raison spécifique pour laquelle vous avez des barres de défilement dans votre infoWindow, mais la raison derrière cela est la suivante:
Les mêmes règles CSS doivent s'appliquer au contenu à l'intérieur de votre
infoWindow, quel que soit le lieu où l'élément HTML apparaît dans le balisage. Si ce n'est pas le cas, vous aurez la garantie d'obtenir des barres de défilement dans votre infoWindow.
Donc, ce que je fais toujours, c'est quelque chose comme ça:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
et dans mon CSS:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Donc, peu importe où l’API ajoute sa mesure div - avant la fermeture body ou à l’intérieur d’un #map-canvas _, les règles CSS qui lui sont appliquées seront toujours les mêmes.
EDIT RE: Familles de polices
Google semble travailler activement sur le problème de chargement des polices (décrit ci-dessous) et la fonctionnalité a été modifiée très récemment. Vous risquez donc ou non de voir le chargement de la police Roboto lorsque votre infoWindow s'ouvre pour la première fois, en fonction de la version de l'API que vous utilisez. Il existe un rapport de bogue ouvert (même si, dans le journal des modifications , ce rapport de bogue était déjà marqué comme étant corrigé), ce qui montre que Google rencontre toujours des difficultés avec ce problème.
UNE PLUS CHOSE: REGARDEZ VOS FAMILLES DE FONT !!!
Dans la dernière incarnation de l'API, Google a essayé d'être intelligent et envelopper son contenu infoWindow dans quelque chose qui pourrait être ciblé avec un sélecteur CSS - .gm-style-iw. Pour les personnes qui ne comprenaient pas les règles que j'ai expliquées ci-dessus, cela n'aidait pas vraiment et rendait parfois la situation encore pire. Les barres de défilement apparaissent presque toujours la première fois qu'un infoWindow est ouvert, mais si vous ouvrez à nouveau n'importe quel infoWindow, même avec le même contenu les barres de défilement seraient partis. Sérieusement, si vous n'étiez pas confus avant, cela vous ferait perdre la tête. Voici ce qui se passait:
Si vous regardez les styles que Google charge sur la page lors du chargement de son API, vous pourrez voir ceci:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
Ok, Google a donc voulu rendre ses cartes un peu plus cohérentes en leur faisant toujours utiliser la famille de polices Roboto. Le problème est que, pour la majorité des gens, avant d’ouvrir un infoWindow, le navigateur n’avait pas encore téléchargé la police Roboto (car rien sur votre page ne l’utilisait, le navigateur est assez intelligent pour savoir qu’il n’a pas besoin de télécharger cette police). Le téléchargement de cette police n’est pas instantané, même s’il est très rapide. La première fois que vous ouvrez un infoWindow et que l'API ajoute le div avec votre contenu infoWindow au corps pour prendre ses mesures, il commence à télécharger le Roboto police, mais votre infoWindow's _ mesures sont prises et la fenêtre est placée sur la carte avant le téléchargement du fichier Roboto. Le résultat, assez souvent, était un infoWindow dont les mesures ont été prises lorsque son contenu a été rendu avec Arial ou un sans-serif, mais quand il était affiché sur la carte (et que Roboto avait fini de se télécharger), son contenu était affiché dans une police de taille différente - et voilà - des barres de défilement apparaissent la première fois que vous ouvrez le infoWindow. Ouvrez le même infoWindow une deuxième fois - à ce moment, le Roboto a été téléchargé et sera utilisé lorsque l'API prend ses mesures de contenu infoWindow et vous avez gagné " t voir aucune barre de défilement.
J'ai essayé chacune des réponses énumérées. Aucun n'a fonctionné pour moi. Cela a finalement résolu le problème de façon permanente. Le code dont j'ai hérité avait un DIV enveloppant tous les <h#> et <p> entrées. J'ai simplement forcé un certain "style" dans la même DIV, en tenant compte de la largeur maximale souhaitée, jeté le changement de hauteur de ligne au cas où (solution de quelqu'un d'autre) et mon propre white-space: nowrap, qui a ensuite effectué le débordement automatique pour effectuer les réglages corrects. Pas de barre de défilement, pas de troncature et pas de problèmes!
html = '<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">';
Je vais ajouter ma réponse à la liste, car AUCUN d'entre eux n'a résolu mon problème. J'ai fini par envelopper mon contenu dans une div, en lui donnant une classe et en spécifiant le min-width sur la div, ET spécifiant le maxWidth sur la fenêtre d'information, ET ils doivent tous les deux avoir la même taille, sinon la largeur ou la hauteur déborderaient sur les boîtes contenant une quantité erronée de contenu.
Javascript:
// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";
// create a map info box
var infoWindow = new google.maps.InfoWindow({
maxWidth: 350,
content: content
});
CSS:
div.infowindow-content {
min-width: 350px;
}
Je sais que c'est un vieux fil, mais je viens de rencontrer le même problème. J'ai eu <h2> et <p> _ éléments dans la fenêtre d’information, et ces deux éléments avaient des marges inférieures. J'ai supprimé les marges, et InfoWindow dimensionné correctement. Aucune des autres solutions suggérées n'a fonctionné. Je soupçonne que le calcul de la taille d'InfoWindow ne tient pas compte des marges.
J'ai essayé toutes ces solutions et aucune n'a fonctionné. Après quelques essais et erreurs, j'ai compris.
<style type="text/css">
#map_canvas {
line-height:normal;
}
</style>
Set line-height: normal pour la carte. Div div.
Il semble que le problème concerne le webfont Roboto.
L’infowindow est rendue avec les propriétés inline width et height basées sur le contenu fourni. Cependant, il n'est pas calculé avec le webfont déjà rendu/chargé. Une fois que la police est rendue APRÈS que toute la carte soit imprimée à l'écran, les barres de défilement apparaissent alors en raison des propriétés "débordement: auto" insérées dans les DIV de la fenêtre.
La solution que j'ai trouvée pour travailler consiste à envelopper le contenu dans une DIV, puis à appliquer CSS pour remplacer le webfont:
.gmap_infowin {
font-family: sans-serif !important;
font-weight: normal !important;
}
<div class="gmap_infowin">Your info window content here.</div>
Assez drôle, alors que le code suivant corrigera la barre de défilement de WIDTH:
.gm-style-iw
{
overflow: hidden !important;
line-height: 1.35;
}
Il a fallu ceci pour corriger la barre de défilement HEIGHT:
.gm-style-iw div
{
overflow: hidden !important;
}
EDIT: Ajout de l'espace blanc: nowrap; l’un ou l’autre style pourrait corriger le problème d’espacement qui semble persister lorsque les barres de défilement sont supprimées. Excellent point Nathan.
Cela fonctionne pour moi. Mettez un div dans le setContent
sh_map.infoWindow.setContent([
'<div id=\"mydiv\">',
'Your content goes here',
].join(''));
Ajoutez ensuite ce CSS à votre page:
<style type="text/css">
#map-canvas {
text-align: center;
vertical-align: middle;
}
#mydiv {
font-family: "Comic Sans MS", cursive;
font-size: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
Word-spacing: normal;
}
</style>
Par exemple, voir http://www.student-homes-northampton.co.uk ; cliquez sur les liens situés sous les images de la maison pour afficher la carte Google.
Cela a complètement résolu mon problème:
.gm-style-iw {
overflow: visible !important;
height: auto !important;
width: auto !important;
}
J'avais le même problème avec IE et j'ai essayé de nombreuses corrections détaillées dans ces réponses, mais je n'ai pas pu supprimer les barres de défilement verticales dans IE de manière fiable.
Ce qui a le mieux fonctionné pour moi a été de passer à des tailles de police fixes dans l’infowindow - "px"… j’utilisais ems. En fixant la taille de la police, je n'avais plus besoin de déclarer explicitement la largeur ou la hauteur de l'infowindow et les barres de défilement avaient disparu pour de bon.
Si rien d'autre, essayez d'ajouter le contenu après l'ouverture de la fenêtre. Cela devrait le forcer à redimensionner.
infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)
La hauteur du conteneur de carte est également importante. Si petit, infoWindow sera toujours sur 80px. Sinon, maxWidth et #innerDivfix fonctionne comme un charme.
Utilisez l'événement domready et rouvrez la fenêtre d'information et affichez le contenu masqué après le déclenchement de l'événement domready à deux reprises pour vous assurer que tous les éléments dom ont été chargés.
// map is created using google.maps.Map()
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; }
infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);
// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
if (infowindow.get("isdomready")) {
// show the infowindow by setting css
jQuery('.infowin-content').css('visibility', 'visible');
}
else {
// trigger a domready event again.
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.set("isdomready", true);
}
}
J'ai essayé de faire juste un setTimeout (/ * show infowin callback * /, 100), mais parfois cela ne fonctionnait pas encore si le contenu (c'est-à-dire: images) prenait trop de temps à se charger.
J'espère que cela fonctionne pour toi.
Je ne pouvais pas le faire fonctionner de quelque manière que ce soit, j'incluais 3 divs dans la boîte. Je les ai enveloppés dans un div extérieur, avec des largeurs et des hauteurs correctement réglées, et rien n’a fonctionné.
En fin de compte, je l'ai corrigé en définissant la div comme absolu en haut à gauche, puis avant la div, je définissais deux images, une de 300 pixels de large et 1 pixel de haut, une autre de 120 pixels de haut et 1 pixel de large, d'un gif transparent.
Il s'est bien adapté alors!
C'est moche mais ça marche.
Vous pouvez également créer une image et définir un zindex comme prévu, ou même une seule image si votre fenêtre n'interagit pas, mais si celle-ci contenait un formulaire, ce n'était donc pas une option ...
Juste pour résumer toutes les solutions qui ont fonctionné pour moi dans tous les navigateurs:
- N'utilisez pas de marges à l'intérieur de l'infowindow, mais uniquement du rembourrage.
Définissez une largeur maximale pour l’infowindow:
this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });Enveloppez le contenu de l’infowindow avec
<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>(changez la largeur minimale de la valeur que vous avez définie dans l'infowindow maxWidth)
Je l'ai testé et cela a fonctionné sur tous les navigateurs, et j'avais plus de 400 marqueurs ...
Après avoir perdu du temps et lu pendant un moment, je voulais juste quelque chose de simple, ce css a fonctionné pour mes besoins.
.gm-style-iw > div { overflow: hidden !important; }
Ce n’est pas non plus une solution instantanée, mais le fait de le commenter/commenter le problème peut les amener à le résoudre, car ils pensent que le problème est résolu: http://code.google.com/p/gmaps-api-issues/issues/ détail? id = 571
À compter de mi-2014 , il semble y avoir un bogue de dimensionnement InfoWindow dans Google Maps v3 qui affecte plusieurs navigateurs.
Il a été rapporté ici:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=571
( et une démo JSFiddle ici )
S'il vous plaît cliquez sur l'étoile sur la question ci-dessus pour voter pour qu'il soit corrigé !
De tous mes tests, il semble être lié aux erreurs d'arrondi de la taille des éléments , car il ne se produit que dans certaines tailles de police.
Mauvaises solutions de contournement:
Après avoir manipulé la plupart des suggestions sur cette page, voici: PAS de bonnes solutions :
overflow: hidden(peut potentiellement couper le contenu)white-space: nowrap(peut potentiellement couper le contenu)- Passage d'un objet jQuery ou de noeuds DOM (le contenu déborde potentiellement en dehors de l'InfoWindow)
- Définir le contenu d'InfoWindow après son ouverture (seul, cela n'aide pas)
- Changer la police de Roboto (le problème peut survenir avec n'importe quelle police)
Une solution de contournement consiste à donner à votre InfoWindow une largeur fixe (comme ceux qui ont suggéré de définir max-width et min-width). Toutefois, lorsque vous avez beaucoup de marqueurs et que la quantité de contenu varie, cela n’est pas idéal. C'est également mauvais pour les conceptions mobiles/réactives.
Une solution de contournement raisonnable:
Donc, jusqu'à ce que Google répare ce problème, j'ai dû créer une solution de contournement. Après environ 12 heures d’essais et de débogage, j’ai trouvé ce qui suit:
Ceci pas a les mêmes inconvénients que d’autres suggestions.
- Le contenu ne doit jamais être coupé (sauf si vous avez de grandes images dépassant la largeur de l'InfoWindow).
- Des barres de défilement verticales sont ajoutées, mais uniquement lorsque cela est nécessaire.
- Aucun contenu ne doit déborder en dehors de l'InfoWindow
- Dans la plupart des cas, l'InfoWindow est automatiquement dimensionné pour s'adapter au contenu (pas une taille fixe)
- Devrait convenir aux mobiles et aux dispositions réactives
- Les marges, le remplissage et les polices doivent fonctionner correctement
Inconvénients:
- Ma version nécessite jQuery, mais elle pourrait probablement être retravaillée pour devenir du pur JS
- Il crée 20px de remplissage à la droite du contenu pour laisser de la place à la barre de défilement au besoin. Vous pouvez ignorer cette option si vous préférez ou effectuer une vérification supplémentaire afin d'ajouter uniquement un remplissage si nécessaire.
- C'est plutôt hacky, mais sans éditer le javascript de Google, c'est probablement le seul moyen.
Voir le code sur Github
S'il vous plaît soumettre des améliorations et des corrections que vous les trouvez.
J'avais un élément en ligne (une balise) directement à l'intérieur du div avec style="overflow:auto"[... encapsulé cela dans une balise p et corrigé.
Cela ressemble à tout élément en ligne qui n'est pas imbriqué dans un élément de bloc directement à l'intérieur de l'infowindow.
//infowindow.setContent(response);
var infowindowopts = {
maxWidth: 274,
content: response
};
infowindow.setOptions(infowindowopts);
Je pense que ce comportement est dû à un certain style CSS dans un conteneur externe. J'ai eu le même problème mais je l'ai résolu en utilisant une division interne et en y ajoutant un peu de remplissage, je sais que c'est bizarre mais cela a résolu le problème.
<div id="fix_height">
<h2>Title</h2>
<p>Something</p>
</div>
Et dans mon style.css
div#fix_height{
padding: 5px;
}
Il n’était pas acceptable pour moi de coder en dur la largeur et la hauteur de la fenêtre d’information, ou de définir white-space: nowrap, la solution maxWidth ne m’aide pas et tout le reste ne fonctionne pas ou est inapproprié pour mon cas d’utilisation.
Ma solution consistait à définir le contenu, à ouvrir la fenêtre, puis, lorsque l'événement domready est déclenché, à définir la propriété height CSS sur le contenu, quelle que soit sa hauteur, puis à forcer Google Maps à: redimensionnez l’InfoWindow en conséquence.
infoWindow est l'objet InfoWindow, $infoWindowContents est un objet Jquery du contenu que je veux y insérer, map est mon objet Map. marker est un marqueur sur lequel vous avez cliqué.
infoWindow.setContent($infoWindowContents.get(0));
var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
// Stop listening, otherwise the listeners stack up if the window is opened again
google.maps.event.removeListener(listener);
// Set the height on the container to however tall the browser is currently rendering it
$infoWindowContents.height($infoWindowContents.height());
// Force Google Maps to recalculate the InfoWindow height
infoWindow.setContent($infoWindowContents.get(0));
});
infoWindow.open(map, marker);
(J'ai posté la même solution sur une question similaire Comment puis-je redimensionner une InfoWindow de google-maps pour l'adapter au contenu placé à l'intérieur? )
J'avais le même problème, surtout lorsque mon <h2> élément encapsulé sur une deuxième ligne.
J'ai appliqué une classe à un <div> dans la fenêtre d’information et a remplacé les polices par une police système générique (dans mon cas, Helvetica) par rapport à une police Web @ font-face qu’elle utilisait auparavant. Problème résolu.
Je sais que beaucoup d'autres personnes ont trouvé des solutions qui ont fonctionné pour leur cas particulier, mais puisqu'aucun d'entre elles n'a fonctionné pour mon cas particulier , j'ai pensé que cela pourrait être utile à quelqu'un d'autre.
Quelques détails:
J'utilise l'API v3 de Google Maps sur un projet où le CSS en ligne est quelque chose que nous voulons vraiment, vraiment éviter. Mes sous-fenêtres travaillaient pour tout sauf pour IE11, où la largeur n'était pas calculée correctement. Cela a entraîné des débordements de div, ce qui a déclenché des barres de défilement.
Je devais faire trois choses:
Supprimer tout affichage: règles de style inline-block de tout ce qui se trouve dans le contenu de l'infowindow (j'ai remplacé par display: block) - J'ai eu l'idée d'essayer cela à partir d'un fil (que je ne trouve plus) où quelqu'un avait le même problème problème avec IE6.
Transmettez le contenu en tant que nœud DOM au lieu d'une chaîne. J'utilise jQuery, donc je pourrais le faire en remplaçant:
infowindow.setContent(infoWindowDiv.html());parinfowindow.setContent($(infoWindowDiv.html())[0]);Cela s'est révélé être le plus simple pour moi, mais il existe de nombreuses autres façons d'obtenir le même résultat.Utilisez le hack "setMaxWidth" - définissez l'option MaxWidth dans le constructeur - la définition ultérieure de l'option ne fonctionne pas. Si vous ne voulez pas vraiment une largeur maximale, définissez-la simplement sur un très grand nombre.
Je ne sais pas pourquoi cela a fonctionné, et je ne suis pas sûr si un sous-ensemble fonctionnerait. Je sais qu'aucun d'entre eux ne fonctionne pour tous mes cas d'utilisation individuellement, et que 2 + 3 ne fonctionne pas. Je n'ai pas eu le temps de tester 1 + 2 ou 1 + 3.
Eh bien c'est celui qui a fait le tour pour moi:
.gm-style-iw>div {
overflow: visible !important;
}
Seul réglage overflow: visible sur .gm-style-iw a aggravé le problème! J'ai remarqué dans l'inspecteur d'outils de développement de Chrome) qu'il y avait deux divs dans le .gm-style-iw élément, les deux qui ont overflow: auto défini par défaut.
J'affiche pas mal de texte au format HTML dans mes InfoWindows, c'est peut-être pour cette raison que les autres solutions n'ont pas fonctionné du tout pour moi.
Ajouter un min-height à votre élément de classe infoWindow.
Cela résoudra le problème si vos info-fenêtres ont toutes la même taille.
Sinon, ajoutez cette ligne de jQuery à votre fonction de clic pour la fenêtre info:
//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');
Ma réponse consiste à ajouter un écouteur (à l'aide de addListenerOnce) pour vérifier si l'infoWindow a été ajouté au DOM, puis à rouvrir l'infoWindow (inutile de le fermer).
// map, marker and infoWindow code, we'll call them
// myMap, myMarker and myInfoWindow
myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
myInfoWindow.open(myMap, myMarker);
});
L'ajout de ce qui suit à mon CSS a fait l'affaire pour moi:
white-space: nowrap;