Comment définir la hauteur maximale de l'infowindow du marqueur Google map?

Question

Si le contenu de la fenêtre d'information du marqueur est trop long, il ne rentrera pas dans la fenêtre, il débordera en bas. Comment puis-je réparer cela?

Answer 1

Ce problème peut aussi être le résultat de styles hérités étant appliqués au contenu de la fenêtre d'information après avoir été attaché à la carte.

Par exemple: La taille de la police sera calculée en fonction de la police par défaut. Lorsque la fenêtre d'information est attachée, la police changera en fonction du CSS hérité et, si elle est plus grande, débordera du bas de la fenêtre d'information.

Si vous ne voulez pas supprimer le style hérité (et la plupart du temps vous ne le faites pas), vous devez explicitement annuler le style hérité dans le contenu de la fenêtre d'informations.

Vous trouverez une excellente description de ce problème et sa solution à:

Fixing the 'inherited CSS' problem

Answer 2

Si l'InfoWindow contient une image, elle peut déborder car la taille de l'InfoWindow est définie avant le téléchargement de l'image. Si c'est le cas, vous devrez spécifier la taille de l'image ou la précharger.

Sinon, je voudrais simplement placer le contenu dans un div avec une barre de défilement:

div.infowindow { 
    max-height:250px; 
    overflow-y:auto; 
} 

Answer 3

.gm-style-iw{ 
    max-height: 10px; 
} 

Au-dessus du code-ce que le travail!

Answer 4

La réponse acceptée est un peu vague ...

Alors, voici quelques solutions directes pour ceux qui cherchent à changer la hauteur de InfoWindows, ou d'autres propriétés de style.

Méthode 1: CSS

Appliquer une règle CSS comme ceci. Il change de tous infowindow: si vous avez des modèles personnalisés IW, cela peut fonctionner aussi

.gm-style-iw { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

Ou,:

#myInfoWindow-content { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

Débordement doit avoir d'importantes, sinon il se supplanté par les propres règles de GM et long! le contenu pourrait être coupé. Max-height fonctionnera sans, mais probablement mieux pour le garder de toute façon.

Méthode 2: inline CSS

Si vous utilisez des modèles pour les contenus IW, puis une option est hardcore en ligne par styles infowindow. Vous n'avez pas besoin d'utiliser! Important car GM semble prendre toutes les règles dans ce cas.

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;"> 
    content 
</div> 

Méthode 3: Javascript

Vous pouvez toujours utiliser JS pour modifier dynamiquement les choses. Vous pouvez utiliser cette méthode pour cibler et modifier d'autres éléments IW, par exemple en cachant des flèches IW.

document.getElementById('myInfoWindow-content').style.maxHeight = '20px'; 
document.getElementById('myInfoWindow-content').style.overflow = 'auto';