Wie setzt man die maximale Höhe des Infofelds des Google Map-Markers?

Question

Wenn der Inhalt des Infofensters von marker zu lang ist, passt es nicht in das Fenster, es wird unten überlaufen. Wie kann ich das beheben?

Answer 1

Dieses Problem kann auch ein Ergebnis von ererbten Stile zu den Info-Fenster Inhalte angewendet werden, nachdem es auf die angebracht wurde Karte.

Zum Beispiel: Die Schriftgröße wird basierend auf der Standardschrift berechnet. Wenn das Infofenster angehängt wird, ändert sich die Schriftart basierend auf dem ererbten CSS und, falls es größer ist, wird es am Ende des Infofensters überlaufen.

Wenn Sie den geerbten Stil nicht entfernen möchten (und meistens nicht), müssen Sie den geerbten Stil im Inhalt des Infofensters explizit widerrufen.

Fixing the 'inherited CSS' problem

Answer 2

Wenn das InfoWindow ein Bild enthält, kann es überlaufen, da die Größe des InfoWindows festgelegt wird, bevor das Bild heruntergeladen wird. Wenn dies der Fall ist, müssen Sie die Größe des Bildes angeben oder es vorab laden.

Ansonsten würde ich einfach legen Sie den Inhalt in ein div mit einem Scrollbalken:

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

Answer 3

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

Above Code macht die Arbeit:

Sie können eine ausgezeichnete Beschreibung dieses Problems und es ist Lösung zu finden!

Answer 4

Die akzeptierte Antwort ist etwas vage ...

ist hier also ein paar direkte Lösungen für alle, die die Höhe des Infofenster zu ändern, oder andere Stileigenschaften.

Methode 1: CSS

eine CSS-Regel anwenden, wie so. Es ändert sich alle Infofenster suchen:

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

Oder, wenn Sie benutzerdefinierte IW-Vorlagen haben, kann dies auch funktionieren:

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

Überlauf muss haben wichtige, sonst ist es von GM eigenen Regeln und lange ersetzt wird! Inhalt könnte abgeschnitten werden. Max-Höhe funktioniert ohne! Wichtig, aber wahrscheinlich besser, um es trotzdem zu behalten.

Methode 2: Inline CSS

Wenn Sie Vorlagen für IW Inhalte verwenden, dann ist eine Option Stile pro Infofenster Inline-Hardcore. Sie müssen nicht wichtig sein, denn GM scheint in diesem Fall die vollen Regeln zu übernehmen.

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

Methode 3: Javascript

Sie können JS immer verwenden, um Dinge dynamisch zu ändern. Sie können diese Methode verwenden, um andere IW-Elemente zu targetieren und zu ändern, z. B. IW-Pfeile auszublenden.

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