EDITIERT (um hervorzuheben): Vertrauen Sie mir, von den hundert anderen Antworten auf diese Frage ist dies die einzig richtige, die auch erklärt, WARUM es passiert
Ok, ich weiß, dass dieser Thread alt ist und tausend Antworten hat, aber keine davon ist korrekt und ich habe das Bedürfnis, die richtige Antwort zu posten.
Erstens Sie nicht brauchen , um überhaupt angeben width'soder height'sum auf alles , was Ihr Infowindow - Display zu bekommen , ohne Scrollbalken, obwohl Sie manchmal versehentlich diese Arbeit erhalten , indem Sie (aber es wird schließlich scheitern).
Zweitens hat die Google Maps-API infoWindow's keinen Bildlauffehler. Es ist nur sehr schwierig, die richtigen Informationen zu ihrer Funktionsweise zu finden. Nun, hier ist es:
Wenn Sie die Google Maps-API anweisen, in infoWindow wie folgt zu öffnen:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
In jeder Hinsicht platziert Google Maps vorübergehend ein divam Ende Ihrer Seite ( tatsächlich wird ein detached DOM tree- aber es ist konzeptionell einfacher zu verstehen, wenn Sie sich vorstellen, dass ein divWesen am Ende Ihrer Seite steht ) mit dem HTML-Inhalt, den Sie haben spezifiziert. Anschließend wird das div gemessen (was bedeutet, dass in diesem Beispiel alle CSS-Regeln in meinem Dokument gelten h1und pTags darauf angewendet werden), um es widthund zu erhalten height. Google nimmt das dann div, weist ihm die Maße zu, die es erhalten hat, als es an Ihre Seite angehängt wurde, und platziert es auf der Karte an dem von Ihnen angegebenen Ort.
Hier tritt das Problem bei vielen Menschen auf - sie haben möglicherweise HTML, das so aussieht:
<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>
und aus irgendeinem Grund CSS, das so aussieht:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
Kannst du das Problem sehen? Wenn die API versucht , die Messungen zu nehmen für die infoWindow(unmittelbar vor der Anzeige), das h1wird ein Teil des Inhalts eine Größe von 18px(weil die temporären „Messen div“ an den Körper angehängt), aber wenn die API stellt eigentlich den infoWindowauf In der Karte hat der #map-canvas h1Selektor Vorrang, wodurch sich die Schriftgröße stark von der Größe unterscheidet, in der die API die Größe der gemessen hat. Unter infoWindowdiesen Umständen erhalten Sie immer Bildlaufleisten.
Es gibt möglicherweise etwas andere Nuancen für den spezifischen Grund, warum Sie Bildlaufleisten in Ihrem haben infoWindow, aber der Grund dafür ist folgender:
Die gleichen CSS-Regeln müssen für den Inhalt in Ihrem infoWindow
Computer gelten, unabhängig davon, wo das eigentliche HTML-Element im Markup angezeigt wird. Wenn dies nicht der Fall ist , erhalten Sie garantiert Bildlaufleisten in Ihrem infoWindow
Was ich also immer mache, ist ungefähr so:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
und in meinem CSS:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Unabhängig davon, wo die API ihre Messung anhängt div- vor dem Schließen bodyoder innerhalb von a #map-canvassind die darauf angewendeten CSS-Regeln immer dieselben.
EDIT RE: Schriftfamilien
Google scheint aktiv an dem Problem beim Laden von Schriftarten (siehe unten) zu arbeiten, und die Funktionalität hat sich in letzter Zeit geändert. infoWindowJe nach Version der von Ihnen verwendeten API wird die Roboto-Schrift beim ersten Öffnen möglicherweise nicht angezeigt . Es gibt einen offenen Fehlerbericht (obwohl dieser Fehlerbericht im Änderungsprotokoll bereits als behoben markiert war), der zeigt, dass Google immer noch Probleme mit diesem Problem hat.
EINE MEHR SACHE: SEHEN SIE IHRE FONT-FAMILIEN AN !!!
In der neuesten Version der API hat Google versucht, klug zu sein und den Inhalt von infoWindow in etwas zu verpacken, auf das mit einem CSS-Selektor abgezielt werden kann .gm-style-iw. Für Leute, die die oben erläuterten Regeln nicht verstanden haben, hat dies nicht wirklich geholfen und in einigen Fällen sogar noch schlimmer gemacht. Bildlaufleisten werden fast immer beim ersten Öffnen angezeigt infoWindow, aber wenn Sie sie infoWindowerneut öffnen, werden die Bildlaufleisten auch bei genau demselben Inhalt nicht mehr angezeigt. Im Ernst, wenn Sie vorher nicht verwirrt wären, würden Sie den Verstand verlieren. Folgendes geschah:
Wenn Sie sich die Stile ansehen, die Google beim Laden der API auf der Seite lädt, sehen Sie Folgendes:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
Ok, also wollte Google die Karten ein bisschen konsistenter machen, indem sie immer die RobotoSchriftfamilie verwenden. Das Problem ist, dass der infoWindowBrowser für die meisten Benutzer die RobotoSchriftart noch nicht heruntergeladen hat , bevor Sie sie geöffnet haben (da nichts anderes auf Ihrer Seite sie verwendet hat, sodass der Browser intelligent genug ist, um zu wissen, dass sie nicht heruntergeladen werden muss diese Schriftart). Das Herunterladen dieser Schriftart erfolgt nicht sofort, obwohl sie sehr schnell ist. infoWindowWenn Sie ein zum ersten Mal öffnen und die API das divmit Ihrem infoWindowInhalt an den Textkörper anfügt , um seine Messungen durchzuführen, wird die RobotoSchriftart heruntergeladen , aber Ihre infoWindow'sMessungen werden durchgeführt und das Fenster wird auf der Karte platziert, bevor der RobotoDownload abgeschlossen ist. Das Ergebnis war ziemlich oft eininfoWindowWessen Messungen wurden vorgenommen, als der Inhalt mit Arialeiner sans-serifSchriftart gerendert wurde , aber als er auf der Karte angezeigt wurde (und Robotoder Download abgeschlossen war), wurde der Inhalt in einer Schriftart mit einer anderen Größe angezeigt - und Voila-Bildlaufleisten werden beim ersten Mal angezeigt Sie öffnen die infoWindow. Öffnen Sie das gleiche infoWindowein zweites Mal - zu diesem Zeitpunkt wurde das Robotoheruntergeladen und wird verwendet, wenn die API den infoWindowInhalt misst und Sie keine Bildlaufleisten sehen.