Google Maps API v3: InfoWindow nicht richtig dimensioniert

83

Es scheint, dass mein InfoWindow, wenn Sie auf das Startsymbol in Google Maps v3 klicken, die Größe des Inhalts des InfoWindow nicht automatisch ändert.

Es gibt Bildlaufleisten, wenn es nicht sollte. Das InfoWindow sollte die richtige Größe haben.

Irgendwelche Ideen warum?

Auf Anfrage das relevante JavaScript, das den HTML-Code für das InfoWindow einfügt:

listing = '<div>Content goes here</div>';

AKTUALISIEREN

Dieser Fehler wurde von Google behoben

https://issuetracker.google.com/issues/35823659

Das Update wurde im Februar 2015 in Version 3.19 der Maps JavaScript API implementiert.

javascript html css google-maps JacobT
quelle
Kopieren Sie besser den entsprechenden Code in Ihre Frage. Andernfalls wird diese Frage bedeutungslos, wenn sich der Code auf Ihrer Website ändert.
Jonathan Fingland
Nun, das ist eigentlich der springende Punkt. Ich verstehe, dass die Google Maps v3-API unabhängig von meinem CSS automatisch angepasst werden soll ... und dies ist nicht der Fall. Aber ich werde den Code trotzdem posten
JacobT
7
Ich weiß, dass dies alt ist, aber falls jemand hierher kommt und alles versucht und immer noch ein Problem hat (wie ich): Die Infofenster haben eine maximale Höhe, die proportional zu Ihren Kartenabmessungen ist. Dies ist kleiner als v2. Wenn Sie also ein Upgrade von Version 2 auf Version 3 durchführen und dieses Problem haben, kann dies daran liegen. Machen Sie entweder Ihren Inhalt kürzer oder Ihre Karte länger oder führen Sie ein Downgrade auf Version 2 durch.
Cassie

Antworten:

32

Fügen Sie ein Div in Ihr Infofenster ein

<div id=\"mydiv\">YourContent</div>

Stellen Sie dann die Größe mit CSS ein. funktioniert bei mir. Dies setzt voraus, dass alle Infofenster gleich groß sind!

#mydiv{
width:500px;
height:100px;
}
Harry
quelle
Genau. Gleiche Größe oder Sie erstellen genügend Klassen in Ihrem CSS mit unterschiedlichen Dimensionen.
Elijah Saounkine
Abhängig davon, wie Sie mit Ihren Infofenstern arbeiten, ist es möglicherweise sicherer, eine Klasse anstelle einer ID zu verwenden, um zu vermeiden, dass doppelte IDs auf derselben Seite <div class=\"mydiv\">YourContent</div>.mydiv{ width:500px; height:100px; }
herumschwirren
Es funktioniert auf dem Desktop, aber nicht auf Mobilgeräten (Android) /
user2060451
31

Kurze Antwort: Legen Sie die Eigenschaft maxWidth options im Konstruktor fest . Ja, auch wenn das Einstellen der maximalen Breite nicht das war, was Sie tun wollten.

Längere Geschichte: Bei der Migration einer v2-Karte auf v3 habe ich genau das beschriebene Problem gesehen. Fenster variierten in Breite und Höhe, und einige hatten vertikale Bildlaufleisten, andere nicht. Einige hatten <br /> in die Daten eingebettet, aber mindestens eine mit dieser Größe OK.

Ich dachte nicht, dass die InfoWindowsOptions.maxWidth-Eigenschaft relevant ist, da ich die Breite nicht einschränken wollte ... aber durch Festlegen mit dem InfoWindow-Konstruktor bekam ich, was ich wollte, und die Fenster werden jetzt automatisch (vertikal) und automatisch angepasst Zeigen Sie den gesamten Inhalt ohne vertikale Bildlaufleiste an. Macht für mich nicht viel Sinn, aber es funktioniert!

Siehe: http://fortboise.org/maps/sailing-spots.html

Fortboise
quelle
2
Falls jemand anderes versucht, maxWidtheinen Prozentsatz festzulegen, erkennt Google Maps einen Float als Prozentsatz des {"maxWidth":0.25}übergeordneten Elements und konvertiert ihn in das Pixeläquivalent: Deklarieren Sie, das übergeordnete Element ist 1000 Pixel breit, InfoWindow hat ein width: 250px. Ich denke nicht, dass es möglich ist, die Breite von InfoWindow zu erzwingen, um ein Prozentsatz zu bleiben (der Wert von maxWidthmuss eine Zahl sein, {"maxWidth":"25%"}funktioniert also nicht und {"maxWidth":25%}wird mit einem undefinierten 25-Modul behandelt und löst einen Syntaxfehler aus).
Jacob
Interessant. In der aktuellen Google-Dokumentation heißt es, dass die Eigenschaft google.maps.InfoWindowOptions.maxWidth "eine Zahl" ist und wir auf Pixeleinheiten geschlossen haben. Es gibt keinen Grund, warum der Parser eine Dezimalzahl nicht akzeptieren und als Bruch interpretieren könnte ... und das als undokumentiertes "Feature" belassen wird. Außer vielleicht vernünftig.
Fortboise
1
Ok, +1 für großartige Arbeit, aber warum lande ich immer auf dieser Segelseite, wenn ich nach gMap-Funktionen recherchiere?
Bill Blankenship
14
Dies mag im Jahr 2010 funktioniert haben, hilft aber ab 2014 nicht mehr.
Simon East
1
@ Simon neues Jahr, neue Probleme ... irgendwelche Lösungen auf dem Fix dieses Mal?
Phil Cooper
25

Sie sollten den Inhalt vom jQuery-Objekt an InfoWindow übergeben.

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
Baris Aydinoglu
quelle
4
Ok, das funktioniert gut, vielen Dank ... Jetzt möchte ich wissen warum :)
Jeremy F.
2
Dies ist eine der seltsamsten Korrekturen, die ich je gesehen habe. Keiner der anderen Hacks für diese Frage hat für mich funktioniert, außer dies. Unglaublich.
Monoceres
3
Aus irgendeinem Grund scheint die Maps-API overflow: autoden InfoWindow-DIV nicht zu aktivieren, wenn Sie DOM-Knoten anstelle einer Zeichenfolge übergeben. Dies löst das Problem, wenn der Inhalt nur um 1-2px herauskommt. Leider bedeutet dies, dass längerer Inhalt tatsächlich aus dem InfoWindow heraushängt, anstatt Bildlaufleisten hinzuzufügen.
Simon East
Während dies funktioniert, ist es ziemlich unangenehm, die Leute zu bitten, jQuery in die Seite aufzunehmen, damit es infoWindow'skorrekt angezeigt wird. Die vollständige Antwort, warum dies funktioniert, ist in meiner Antwort aufgeführt - jQueryerstellt einen getrennten DOM-Baum, der das korrekte Rendern des Inhalts erzwingt und dessen Größe genau bestimmt, bevor Google versucht, den infoWindowauf der Karte zu platzieren
Adam
22 
.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

Für mich geht das

Rejeesh Prarath
quelle
Dies ist keine großartige Lösung, da Inhalte, die größer als das Infofenster sind, abgeschnitten und ausgeblendet werden.
Simon East
Nicht perfekt für Inhalte unterschiedlicher Länge, aber mein Inhalt ist für jeden Zeiger, der eine Breite! Wichtig und Höhe! Wichtig anwendet, ziemlich gleich. Das war genug für mich!
Jimbo Jones
22

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.

Adam
quelle
Einige großartige Details, Adam, und ja, ich habe ähnliche Dinge wie Sie entdeckt. Doch wie der Fehler bei Google gemeldet nicht erscheint tatsächlich noch einmal mit Systemschriften und keine Nachkommen CSS - Selektoren auftreten. Siehe dieses Beispiel (hat eine Bildlaufleiste in Chrome 40 Win).
Simon East
@ Simon - Sie haben Recht, der Link, den Sie eingereicht haben, ist ein Fehler (extrem Randfall, aber dennoch ein Fehler). Ich würde mir vorstellen, dass> 98% der Fälle, in denen Leute ihre infoWindows melden und nicht wissen warum - dies auf die in dieser Antwort angesprochenen Probleme zurückzuführen sind.
Adam
Adam. Vielen Dank für diese Antwort. Du hast mir unnötiges Hacken erspart!
Abram
13

Ich habe jede der aufgelisteten Antworten ausprobiert. Keiner hat für mich gearbeitet. Dies hat es schließlich dauerhaft behoben. Der Code, den ich geerbt habe, hatte einen DIVWrapper um alle <h#>und <p>Einträge. Ich habe einfach einen "Stil" in demselben DIV erzwungen, unter Berücksichtigung einer gewünschten maximalen Breite, die Änderung der Zeilenhöhe für alle Fälle (die Korrektur eines anderen) und meine eigene vorgenommen white-space: nowrap, wodurch der automatische Überlauf die richtigen Anpassungen vorgenommen hat. Keine Bildlaufleiste, kein Abschneiden und keine Probleme!

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';
user2656824
quelle
7
Dieses! Ich arbeitete mich erfolglos durch alle Antworten, bis ich hier ankam. In meinem Fall war es das white-space: nowrap, was die Magie hatte - die anderen Stile waren unnötig. Prost!
Xavier Holt
Dies scheint in der Tat zu funktionieren, jedoch mussten einige der Infofenster mehrmals angeklickt werden. Meine endgültige Lösung bestand darin, diese Antwort mit der von Concept211 zu kombinieren , indem ich font-family: sans-serif !important; font-weight: normal !important;sie dem CSS hinzufügte .
Sparky
Wenn Sie lange Linien haben, werden die Linien leider abgeschnitten, anstatt sie zu umbrechen. Keine ideale Lösung, wenn Sie nicht wissen, dass alle Leitungen kurz sind.
Simon East
10

Ich weiß, dass dies ein alter Thread ist, aber ich bin gerade auf das gleiche Problem gestoßen. Ich hatte <h2>und <p>Elemente im InfoWindow, und beide hatten untere Ränder. Ich habe die Ränder entfernt und InfoWindow richtig dimensioniert. Keine der anderen vorgeschlagenen Korrekturen funktionierte. Ich vermute, dass die InfoWindow-Größenberechnung die Ränder nicht berücksichtigt.

Mike
quelle
1
Ich hatte dieses Problem und keine der anderen Korrekturen funktionierte, aber diese tat es. Danke :)
Ian Dunn
Dies gilt für alle im Fenster verwendeten Ränder.
ZMorek
2
Ich hatte immer noch Probleme, aber ich habe <div style='overflow:hidden;'></div>jetzt alles in Sieht gut aus.
ZMorek
10

Ich werde meine Antwort zur Liste hinzufügen, da KEINE davon mein Problem behoben hat. min-widthAm Ende habe ich meinen Inhalt in ein Div gewickelt, diesem Div eine Klasse gegeben und das auf dem Div angegeben UND das maxWidthauf dem infoWindow angegeben, UND beide mussten dieselbe Größe haben, sonst würde entweder die Breite oder die Höhe überlaufen auf Boxen mit nur der falschen Menge an Inhalten.

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;
}
Jen
quelle
2
Das Einstellen eines min-widthInhalts war das einzige, was auch für mich funktioniert hat. Musste das aber nicht maxWidthauf dem infoWindow einstellen.
Mark Parnell
1
@MarkParnell = Stellen Sie sicher, dass Sie gründlich testen. Ich hatte Probleme, als ich mehr als eine bestimmte Textmenge in einer bestimmten Breite hatte! Wenn Sie wissen, was der Inhalt sein wird, dann kein Problem :)
Jen
Vielen Dank. Das hat mir auch geholfen. In der mobilen Ansicht gab ich maxWidth: 350 an. Trotzdem nahm es einen zufälligen Wert an. mit Hilfe von min-width funktioniert es gut.
DShah
8

Ich habe alle diese Lösungen ausprobiert und keine hat funktioniert. Nach einigem Ausprobieren habe ich es herausgefunden.

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

Zeilenhöhe einstellen: Normal für das Map Canvas Div.

Nick
quelle
Ja! Die Zeilenhöhe hat es auch für mich behoben. sonst hat nichts funktioniert. Insbesondere hatte ich die Zeilenhöhe in meinem Stylesheet auf {Zeilenhöhe: 1,3; }. Ich habe es in {Zeilenhöhe: 1.3em} geändert und das Problem behoben.
Tbradley22
Alternativ können Sie auch einfach die Zeilenhöhe des Kartencontainers div wie oben angegeben auf normal setzen.
tbradley22
#map_canvasIn Google Maps v3 gibt es keine , die ich sehen kann. Dies muss aus der alten Version 2 stammen.
Simon East
@ Simon #map_canvasist das Div, das Sie für die Karte verwenden. Es kann jeder Name sein, den Sie möchten.
Nick
Leider hilft es nicht. Diese Geige zeigt immer noch eine Bildlaufleiste in Chrome: jsfiddle.net/simoneast/dckxp62o
Simon East
8

Es scheint, dass das Problem mit dem Roboto-Webfont zusammenhängt.

Das Infofenster wird mit Inline-Eigenschaften für Breite und Höhe basierend auf dem bereitgestellten Inhalt gerendert. Es wird jedoch nicht mit dem bereits gerenderten / geladenen Webfont berechnet. Sobald die Schriftart gerendert wurde, nachdem die gesamte Karte auf dem Bildschirm gedruckt wurde, werden die Bildlaufleisten aufgrund der Inline-Eigenschaften "Überlauf: Auto" in den DIVs des Fensters angezeigt.

Die Lösung, die ich gefunden habe, besteht darin, den Inhalt in ein DIV zu packen und dann CSS anzuwenden, um den Webfont zu überschreiben:

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>
Concept211
quelle
Diese Lösung funktioniert bei mir. Auch das Ausblenden von Bildlauf funktioniert: .gm-style-iw {Überlauf: versteckt! Wichtig;}, aber dies verbirgt einen Teil des Inhalts in infoWindow
Imaginary
+1 ja! Aber ich habe diese Antwort mit der von user2656824 kombiniert .
Sparky
+1, weil dies die einzige Antwort ist, die die Tatsache endgültig anzuerkennen scheint, dass dies auf die Probleme mit der Roboto-Schrift zurückzuführen ist. Es würde mich nicht wundern, wenn auch andere Schriftarten falsch gerendert würden. Das Problem ist, dass .gm-style-iw ein kleines bisschen weniger Höhe als nötig berechnet, wahrscheinlich aufgrund der Float-Rundung. Die wirklich einzig vernünftige Option ist die unglückliche .gm-style-iw {Überlauf: versteckt! wichtig;}. Natürlich wird dies nutzlos, sobald Sie wirklich scrollen müssen
user151496
Die Roboto-Schriftart scheint dieses Problem manchmal auszulösen , tritt jedoch auch bei Arial- und Standardschriftarten auf. Wenn Sie sich diese Geige mit Ihrem vorgeschlagenen Fix in Chrome 38 unter Windows ansehen,
Simon East
5

Witzig genug, während der folgende Code die WIDTH-Bildlaufleiste korrigiert:

.gm-style-iw
{
    overflow: hidden !important;
    line-height: 1.35;

}

Dies erforderte die Korrektur der HEIGHT-Bildlaufleiste:

    .gm-style-iw div
    {
        overflow: hidden !important;
    }

BEARBEITEN: Hinzufügen von Leerzeichen: nowrap; Bei beiden Stilen wird möglicherweise das Abstandsproblem behoben, das beim Entfernen der Bildlaufleisten zu bestehen scheint. Großartiger Punkt, Nathan.

Houdini Sutherland
quelle
Ich glaube, mein Problem wurde durch ein h4-Tag-Wrapping verursacht. Als ich Ihren Vorschlag hinzufügte, wurden die Bildlaufleisten entfernt, aber am unteren Rand des Fensters befand sich ein kleines Stück. Als ich Leerzeichen hinzufügte: nowrap; zum h4 wurde alles besser. Vielen Dank!
Nate Bunney
4

Das funktioniert bei mir. Setzen Sie ein divin diesetContent

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

Fügen Sie dann dieses CSS zu Ihrer Seite hinzu:

<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>

Siehe beispielsweise http://www.student-homes-northampton.co.uk ; Klicken Sie auf die Links unter den Hausbildern, um die Google-Karte anzuzeigen.

Alan
quelle
29
danke, erst als ich meine Schrift auf Comic-Sans eingestellt habe, hat das angefangen zu funktionieren.
bret
4

Dies löste mein Problem vollständig:

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}
Vfleitao
quelle
Dies ist die naheliegendste Antwort, die für mich funktioniert hat. Anstelle der automatischen Höhe habe ich stattdessen eine Mindesthöhe hinzugefügt.
Paul
3

Ich hatte das gleiche Problem mit dem IE und habe viele der in diesen Antworten beschriebenen Korrekturen ausprobiert, konnte jedoch die vertikalen Bildlaufleisten im IE nicht zuverlässig entfernen.

Was für mich am besten funktionierte, war, im Infofenster auf feste Schriftgrößen umzuschalten - 'px' ... Ich habe ems verwendet. Durch das Festlegen der Schriftgröße musste ich die Breite oder Höhe des Infofensters nicht mehr explizit deklarieren, und die Bildlaufleisten waren endgültig verschwunden.

Jim T.
quelle
Es hilft manchmal, behebt das Problem aber nicht zuverlässig. Wenn Sie diese Geige in Chrome 38 unter Windows anzeigen,
Simon East
2

Wichtig ist auch die Höhe des Kartencontainers. Wenn zu klein infoWindow wird immer auf 80px Höhe sein. Ansonsten funktioniert maxWidthund #innerDivfix wie ein Zauber.

xsi1
quelle
Genau, ich glaube nicht, dass es sich um eine feste Größe handelt, aber der Punkt ist, dass wenn die Karte nicht groß genug ist (in diesem Fall die Höhe), die Größe des Infofensters nicht geändert wird, um unseren Inhalt zu verpacken. Versuchen Sie, die Karte größer zu machen und überprüfen Sie erneut
Spuas
Dies ist die richtigste Antwort hier. Eine zu kleine Karte ist normalerweise die Ursache für die Größenprobleme des Infofensters. Wenn Sie die Theorie testen möchten, überprüfen Sie einfach den Kartencontainer und erhöhen Sie die Breite und Höhe.
Pimbrouwers
Leider gibt es auch bei einer entsprechend großen Karte noch Probleme.
Simon East
2

Wenn nichts anderes, versuchen Sie, den Inhalt hinzuzufügen, nachdem das Fenster geöffnet wurde. Dies sollte die Größenänderung erzwingen.

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)
Brad Koch
quelle
0

Verwenden Sie das Domready-Ereignis, öffnen Sie das Infofenster erneut und zeigen Sie den verborgenen Inhalt an, nachdem das Domready-Ereignis zweimal ausgelöst wurde, um sicherzustellen, dass alle Dom-Elemente geladen wurden. 

// 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);
    }
}

Ich habe versucht, nur ein setTimeout durchzuführen (/ * show infowin callback * /, 100), aber manchmal funktionierte das immer noch nicht, wenn das Laden des Inhalts (dh der Bilder) zu lange dauerte.

Hoffe das funktioniert bei dir.

Steve Tranby
quelle
0

Ich hatte das gleiche Problem, das sich besonders bemerkbar machte, als mein <h2>Element in eine zweite Zeile eingeschlossen wurde.

Ich habe eine Klasse auf eine <div>im infoWindow angewendet und die Schriftarten in eine generische Systemschriftart (in meinem Fall Helvetica) im Vergleich zu einer @ font-face-Webschriftart geändert, die sie verwendet hatte. Problem gelöst.

Taylor Dewey
quelle
Leider ist dies keine zuverlässige Lösung. Es ist bekannt, dass das Problem auch bei Arial und anderen Standardschriftarten auftritt.
Simon East
0 
//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);
Andrew Samuelsen
quelle
0

Fügen Sie min-heightIhrem infoWindow-Klassenelement ein hinzu.

Dadurch wird das Problem behoben, wenn Ihre infoWindows alle dieselbe Größe haben.

Wenn nicht, fügen Sie diese Zeile von jQuery zu Ihrer Klickfunktion für das infoWindow hinzu:

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');
Jason
quelle
Du bist auf dem richtigen Weg. Die Mindesthöhe von infoWindow hilft Ihnen nicht weiter, da dieser DIV in unserem überfüllten DIV enthalten ist. Wenn Sie also eine Mindesthöhe einstellen, wird jedes Mal ein Bildlauf durchgeführt.
clockworked247
Wenn man sich die Struktur des DOM ansieht, ist es tatsächlich der GRANDPARENT der infoWindow-Klasse, bei dem der Überlauf entfernt werden muss. Mein Code sieht ungefähr so ​​aus: infoCallBack = Funktion infoCallback (Infofenster, Marker) {Rückgabefunktion () {/ * Code zum Anzeigen des Fensters wird hier angezeigt, dann wird mein Überlauf-Fix als nächstes * / setTimeout (Funktion () {$ ('. Infowindow') .parent (). parent (). css ('overflow', '');}, 25); }} Dies löst im Grunde nach 25 ms die Korrektur des infoWindow aus, genug Zeit zum Rendern.
clockworked247
0

Ich konnte es nicht in irgendeiner Form zum Laufen bringen, ich habe 3 Divs in die Box aufgenommen. Ich wickelte sie in ein äußeres Div, wobei die Breiten und Höhen richtig eingestellt waren, und nichts funktionierte.

Am Ende habe ich es behoben, indem ich das div als absolut oben links festgelegt habe, und dann habe ich vor dem div zwei Bilder eines transparenten Gifs eingestellt, eines mit einer Breite von 300 Pixel und einer Höhe von 1 Pixel, eines mit einer Höhe von 120 Pixel und einer Breite von 1 Pixel.

Dann hat es richtig skaliert!

Es ist hässlich, aber es funktioniert.

Sie können auch ein Bild erstellen und einen Zindex festlegen, den ich erwarte, oder sogar nur ein Bild, wenn Ihr Fenster keine Interaktion aufweist, dieses jedoch ein Formular enthält. Das war also keine Option ...

MS...
quelle
0

Ich denke, dass dieses Verhalten auf ein CSS-Styling in einem äußeren Container zurückzuführen ist. Ich hatte das gleiche Problem, aber ich habe es mit einem inneren Div gelöst und etwas Polster hinzugefügt. Ich weiß, dass es seltsam ist, aber es hat das Problem gelöst

<div id="fix_height">
    <h2>Title</h2>
    <p>Something</p>
</div>

Und in meinem style.css

div#fix_height{
    padding: 5px;
}
Maurizzzio
quelle
0

Ich hatte ein Inline-Element (ein a-Tag) direkt im Inneren des divwith style="overflow:auto"[..., das in ein pTag eingewickelt und repariert wurde.

Es sieht so aus, als würde jedes Inline-Element, das nicht in einem Blockelement direkt im Infofenster verschachtelt ist, dies verursachen.

DGB
quelle
0

Meine Antwort ist, einen Listener hinzuzufügen (mit addListenerOnce), um zu überprüfen, ob das infoWindow zum DOM hinzugefügt wurde, und dann das infoWindow erneut zu öffnen (es muss nicht geschlossen werden).

// 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);
            });
Borbulon
quelle
0

Das Hinzufügen von Folgendem zu meinem CSS hat den Trick für mich getan:

white-space: nowrap;
Ruggershawn
quelle
Dadurch wird die Umhüllung langer Zeilen entfernt. Ich denke nicht, dass dies für viele Menschen eine geeignete Lösung ist.
Simon East
0

Um alle Lösungen zusammenzufassen, die in allen Browsern für mich funktioniert haben:

  • Verwenden Sie keine Ränder innerhalb des Infofensters, sondern nur Polsterung.

  • Legen Sie eine maximale Breite für das Infofenster fest:

    this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

  • Wickeln Sie den Inhalt des Infofensters mit ein

    <div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

    (Ändern Sie die Mindestbreite für den Wert, den Sie im Infofenster maxWidth festgelegt haben.)

Ich habe es getestet und es funktionierte in jedem Browser und ich hatte über 400 Marker ...

Daniel Castilla
quelle
Dadurch wird eine feste Breite für das InfoWindow festgelegt (nicht mehr flüssig). Dies ist eine Lösung, aber nicht ideal.
Simon East
0

Ich weiß, dass viele andere Leute Lösungen gefunden haben, die für ihren speziellen Fall funktionieren, aber da keiner von ihnen für meinen speziellen Fall funktioniert hat , dachte ich, dass dies für jemand anderen hilfreich sein könnte.

Ein paar Details:

Ich verwende Google Maps API v3 in einem Projekt, in dem Inline-CSS wirklich vermieden werden soll. Meine Infofenster funktionierten für alles außer für IE11, wo die Breite nicht korrekt berechnet wurde. Dies führte zu Div-Überläufen, die Bildlaufleisten auslösten.

Ich musste drei Dinge tun:

  1. Entfernen Sie alle Regeln für den Inline-Block-Stil von allen Elementen im Infowindow-Inhalt (ich habe sie durch display: block ersetzt). Ich hatte die Idee, dies in einem Thread (den ich nicht mehr finden kann) zu versuchen, in dem jemand dasselbe hatte Problem mit IE6.

  2. Übergeben Sie den Inhalt als DOM-Knoten anstatt als Zeichenfolge. Ich verwende jQuery, also könnte ich dies durch Ersetzen tun: infowindow.setContent(infoWindowDiv.html());mit infowindow.setContent($(infoWindowDiv.html())[0]); Dies stellte sich für mich als am einfachsten heraus, aber es gibt viele andere Möglichkeiten, um das gleiche Ergebnis zu erzielen.

  3. Verwenden Sie den Hack "setMaxWidth" - setzen Sie die Option MaxWidth im Konstruktor - das spätere Setzen der Option funktioniert nicht. Wenn Sie nicht wirklich eine maximale Breite wünschen, stellen Sie sie einfach auf eine sehr große Zahl ein.

Ich weiß nicht, warum diese funktionierten, und ich bin mir nicht sicher, ob eine Teilmenge davon funktionieren würde. Ich weiß, dass keiner von ihnen für alle meine Anwendungsfälle einzeln funktioniert und dass 2 + 3 nicht funktioniert. Ich hatte keine Zeit, 1 + 2 oder 1 + 3 zu testen.

thomij
quelle
0

Es war für mich nicht akzeptabel, die Breite und Höhe des Infofensters fest zu codieren oder festzulegen white-space: nowrap, die maxWidthLösung half mir nicht und alles andere funktionierte entweder nicht oder war für meinen Anwendungsfall auf andere Weise ungeeignet.

Meine Lösung bestand darin, den Inhalt festzulegen , das Fenster zu öffnen und dann, wenn das domreadyEreignis ausgelöst wird, die heightCSS-Eigenschaft für den Inhalt auf eine beliebige Höhe festzulegen und dann Google Maps zu zwingen, die Größe des InfoWindow entsprechend zu ändern.

infoWindowist das InfoWindow-Objekt, $infoWindowContentsist ein Jquery-Objekt des Inhalts, den ich dort einfügen möchte, mapist mein Map-Objekt. markerist eine Markierung, die angeklickt wurde.

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);

(Ich habe dieselbe Lösung zu einer ähnlichen Frage veröffentlicht. Wie kann ich die Größe eines Google Maps-InfoWindows an den darin enthaltenen Inhalt anpassen? )

tremby
quelle
0

Nachdem ich Zeit verloren und eine Weile gelesen hatte, wollte ich nur etwas Einfaches, dieses CSS funktionierte für meine Anforderungen.

.gm-style-iw > div { overflow: hidden !important; }

Es ist auch keine sofortige Lösung, aber wenn sie das Problem markieren oder kommentieren, können sie es möglicherweise beheben, da sie glauben, dass es behoben ist: http://code.google.com/p/gmaps-api-issues/issues/detail?id= 5713

Dan
quelle
Dies schneidet in einigen Fällen den Inhalt ab. :-( In dieser Geige auf Chrome 38 unter Windows ist die "dddd" vollständig abgeschnitten: jsfiddle.net/simoneast/dckxp62o/4
Simon East
0

Nun, das ist derjenige, der den Trick für mich getan hat:

.gm-style-iw>div {
    overflow: visible !important;
}

Einstellung nur overflow: visibleauf .gm-style-iwtatsächlich machte das Problem noch schlimmer! Ich habe im Inspektor für Chrome-Entwicklertools festgestellt, dass das .gm-style-iwElement zwei Divs enthält , die beide overflow: autostandardmäßig festgelegt sind.

Ich zeige in meinen InfoWindows ziemlich viel HTML-formatierten Text an, weshalb die anderen Lösungen für mich möglicherweise überhaupt nicht funktionierten.

Magnus W.
quelle