Wie setzen Sie Google map marker Infofenster max Höhe?

Wenn der Inhalt des info-Fenster von marker ist zu lang, es passt nicht in das Fenster, wird es überlauf an der Unterseite. Wie kann ich dieses Problem beheben?

InformationsquelleAutor egaga | 2009-05-28
  1. 7

    Dieses problem kann auch ein Ergebnis einer vererbten Stile angewendet werden, um das info-Fenster Inhalt nach, es wurde an der Karte.

    Zum Beispiel: Die schriftart, die Größe wird berechnet basierend auf der Standard-schriftart. Wenn Sie das info-Fenster angebracht ist, wird die schriftart ändern, auf der Grundlage der vererbten CSS und, wenn es größer ist, wird der überlauf der unteren info-Fenster.

    Wenn Sie nicht möchten, entfernen Sie die geerbte Stil (und vor allem Sie nicht), müssen Sie ausdrücklich widersprechen der geerbte Stil im info-Fenster an content.

    Finden Sie eine hervorragende Beschreibung des Problems und der Lösung an:

    Die Festsetzung der "geerbte CSS -" problem

    InformationsquelleAutor RedBlueThing
  2. 6
    .gm-style-iw{
    max-height: 10px;
}

    Obige code funktioniert!

    InformationsquelleAutor fuiiii
  3. 4

    Wenn das Infofenster ein Bild enthält, kann es überlaufen, weil die Größe der Infofenster ist vor dem Bild-downloads. Wenn dies der Fall ist, müssen Sie zum angeben der Größe des Bildes, oder pre-load es.

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

    div.infowindow {
    max-height:250px;
    overflow-y:auto;
}
    InformationsquelleAutor Chris B
  4. 1

    Die akzeptierte Antwort ist ein bisschen vage...

    So, hier sind ein paar direkte Lösungen für alle, die sich in der Höhe zu verändern InfoWindows, oder anderen style-Eigenschaften.

    Methode 1: CSS -

    Anwenden einer CSS-Regel wie so. Es ändert sich alle Infofenster ist:

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

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

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

    Überlauf muss !wichtig, sonst wird es ersetzt durch GM seine eigenen Regeln und langen content, cut-off. Max-height funktioniert auch ohne !wichtig, aber wahrscheinlich besser, es zu halten sowieso.

    Methode 2: Inline-CSS

    Wenn Sie Vorlagen verwenden, für IW Inhalt, dann eine option ist, um hardcore-inline-styles per Infofenster. Sie brauchen nicht zu verwenden !wichtig, weil GM scheint die vollständigen Regeln in diesem Fall.

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

    METHODE 3: Javascript -

    Können Sie immer verwenden, JS, Dinge zu ändern, sich dynamisch. Sie können diese Methode verwenden, um Ziel und ändern Sie andere IW-Elemente, wie versteckt IW Pfeile.

    document.getElementById('myInfoWindow-content').style.maxHeight = '20px';
document.getElementById('myInfoWindow-content').style.overflow = 'auto';
    InformationsquelleAutor MarsAndBack
Schreibe einen Kommentar