Google Maps API v3: InfoWindow nie ma prawidłowego rozmiaru


83

Wygląda na to, że moje okno InfoWindow, po kliknięciu ikony strony głównej w moich Mapach Google v3, nie dopasowuje się automatycznie do zawartości okna InfoWindow.

Daje paski przewijania, kiedy nie powinno. Okno InfoWindow powinno mieć poprawną automatyczną zmianę rozmiaru.

Jakieś pomysły, dlaczego?

Na żądanie odpowiedni JavaScript, który wstrzykuje kod HTML dla InfoWindow:

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

AKTUALIZACJA

Ten błąd został rozwiązany przez Google, którego dotyczy problem

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

Poprawka została wdrożona w lutym 2015 r. W wersji 3.19 interfejsu API JavaScript Map Google.


lepiej skopiuj odpowiedni kod do swojego pytania. W przeciwnym razie to pytanie stanie się bezsensowne, gdy zmieni się kod w Twojej witrynie.
Jonathan Fingland

Cóż, właściwie o to chodzi. Rozumiem, że interfejs API Map Google v3 powinien automatycznie zmieniać rozmiar niezależnie od mojego CSS ... a tak nie jest. Ale i tak wyślę kod
JacobT

7
Wiem, że to stare, ale na wypadek, gdyby ktoś tu przyjechał i spróbował wszystkiego, a nadal ma problem (tak jak ja): okna informacyjne mają maksymalną wysokość proporcjonalną do wymiarów mapy. To jest mniejsze niż v2. Więc jeśli aktualizujesz z v2 do v3 i masz ten problem, może to być spowodowane tym. Albo skróć zawartość, albo wydłuż mapę, albo powróć do wersji 2.
Cassie

Odpowiedzi:


32

Dodaj element DIV do swojego okna informacyjnego

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

Następnie ustaw rozmiar za pomocą css. pracuje dla mnie. Zakłada się, że wszystkie okna informacyjne mają ten sam rozmiar!

#mydiv{
width:500px;
height:100px;
}

Dokładnie. Ten sam rozmiar lub utworzysz wystarczającą liczbę klas w swoim CSS o różnych wymiarach.
Elijah Saounkine

w zależności od tego, jak pracujesz z oknami informacyjnymi, bezpieczniejsze może być użycie klasy zamiast identyfikatora, aby uniknąć zduplikowanych identyfikatorów poruszających się po tej samej stronie, np. <div class=\"mydiv\">YourContent</div>i.mydiv{ width:500px; height:100px; }
StackExchange What The Heck

Działa na komputerach stacjonarnych, ale nie na urządzeniach mobilnych (Android) /
user2060451

31

Krótka odpowiedź: ustaw właściwość opcji maxWidth w konstruktorze . Tak, nawet jeśli ustawienie maksymalnej szerokości nie było tym, co chciałeś zrobić.

Dłuższa historia: Migracja mapy v2 do v3, widziałem dokładnie opisany problem. Okna różniły się szerokością i wysokością, niektóre miały pionowe paski przewijania, a inne nie. Niektóre z nich <br /> zostały osadzone w danych, ale przynajmniej jeden z tych rozmiarów OK.

Nie sądziłem, że właściwość InfoWindowsOptions.maxWidth była istotna, ponieważ nie zależało mi na ograniczaniu szerokości ... ale ustawiając ją konstruktorem InfoWindow, otrzymałem to, czego chciałem, a okna teraz automatycznie zmieniają rozmiar (w pionie) i pokaż pełną treść bez pionowego paska przewijania. Nie ma to dla mnie większego sensu, ale działa!

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


2
W przypadku, gdy ktokolwiek inny próbuje ustawić maxWidthwartość procentową, mapy Google rozpoznają zmiennoprzecinkowy jako procent elementu nadrzędnego i przekonwertują go na odpowiednik w pikselach: deklaruj {"maxWidth":0.25}, element nadrzędny ma szerokość 1000 pikseli, InfoWindow będzie miał rozszerzenie width: 250px. Nie sądzę, aby można było zmusić szerokość InfoWindow, aby pozostała procentem (wartość maxWidthmusi być liczbą, więc {"maxWidth":"25%"}nie zadziała i {"maxWidth":25%}jest traktowana jako niezdefiniowany moduł 25 i powoduje błąd składni).
jacob

Ciekawy. W aktualnej dokumentacji Google stwierdza się, że właściwość google.maps.InfoWindowOptions.maxWidth to „liczba” i mamy wywnioskować jednostki pikseli. Nie ma powodu, dla którego parser nie mógłby również zaakceptować liczby dziesiętnej i zinterpretować jej jako ułamek ... i pozostawić to jako nieudokumentowaną „cechę”. Może z wyjątkiem rozsądku.
fortboise

1
Ok, +1 za świetną pracę, ale dlaczego zawsze kończę na tej stronie żagla, gdy badam funkcjonalność gMap.
Bill Blankenship,

14
To mogło zadziałać w 2010 roku, ale nie pomogło w 2014 roku.
Simon East

1
@Simon nowy rok, nowe problemy ... czy tym razem jakieś rozwiązanie?
Phil Cooper

25

Treść należy przekazać do InfoWindow z obiektu jQuery.

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

4
Ok, to działa dobrze, wielkie dzięki ... Teraz chcę wiedzieć dlaczego :)
Jeremy F.

2
To jedna z najdziwniejszych poprawek, jakie kiedykolwiek widziałem. Żaden z innych hacków na to pytanie nie działał dla mnie poza tym. Nie do wiary.
monocery

3
Z jakiegoś powodu interfejs API map wydaje się nie overflow: autowłączać InfoWindow DIV, gdy przekazujesz węzły DOM zamiast ciągu. To rozwiązuje problem, jeśli zawartość jest zmniejszona tylko o 1-2 piksele. Niestety oznacza to, że dłuższa treść faktycznie wisi poza InfoWindow zamiast dodawania pasków przewijania.
Simon East

Chociaż to działa, proszenie ludzi o umieszczenie jQuery na stronie jest dość nieprzyjemne, aby infoWindow'swyświetlać poprawnie. Pełna odpowiedź, dlaczego to działa, jest wymieniona w mojej odpowiedzi - jQuerytworzy odłączone drzewo DOM, które wymusza prawidłowe renderowanie treści, a jego rozmiar dokładnie określa, zanim Google spróbuje umieścić infoWindowna mapie
Adam

22
.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

mi to pasuje


Nie jest to świetne rozwiązanie, ponieważ każda zawartość, która jest większa niż okno informacyjne, zostanie obcięta i ukryta.
Simon East

Nie jest to idealne rozwiązanie dla treści o różnej długości, ale moja treść jest prawie taka sama dla każdego wskaźnika, stosując szerokość! Ważne i wysokość! Ważne! To było dla mnie wystarczające rozwiązanie!
Jimbo Jones,

22

ZMIENIONO (aby wyróżnić się): Zaufaj mi, z setki innych odpowiedzi na to pytanie jest to jedyna poprawna odpowiedź, która wyjaśnia również DLACZEGO to się dzieje

Ok, więc wiem, że ten wątek jest stary i ma tysiąc odpowiedzi, ale żadna z nich nie jest poprawna i czuję potrzebę opublikowania poprawnej odpowiedzi.

Po pierwsze, nie musisz nigdy określać width'sani height'sniczego włączać, aby Twoje okno infoWindow wyświetlało się bez pasków przewijania, chociaż czasami możesz przypadkowo uruchomić go w ten sposób (ale ostatecznie zakończy się niepowodzeniem).

Po drugie, Google Maps API infoWindow's nie ma błędu przewijania, po prostu bardzo trudno jest znaleźć prawidłowe informacje na temat ich działania. Cóż, oto jest:

Gdy powiesz interfejsowi API Map Google, aby otworzył się w infoWindow w następujący sposób:

var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);

We wszystkich celach i celach mapy google tymczasowo umieszczają znak divna końcu strony (w rzeczywistości tworzy on detached DOM tree- ale koncepcyjnie łatwiej jest to zrozumieć, jeśli powiem, że wyobrażasz sobie divistnienie na końcu strony ) z treścią HTML, którą określony. Następnie mierzy ten element div (co oznacza, że ​​w tym przykładzie wszystkie reguły CSS w moim dokumencie mają zastosowanie h1i ptagi zostaną do niego zastosowane), aby uzyskać jego widthi height. Następnie Google bierze to div, przypisuje do niego pomiary, które uzyskał, gdy został dołączony do Twojej strony, i umieszcza go na mapie w określonej przez Ciebie lokalizacji.

Oto, gdzie problem występuje w przypadku wielu osób - mogą mieć kod HTML, który wygląda tak:

<body>
 <div id="map-canvas"><!-- google map goes here --></div>
</body>

iz jakiegoś powodu CSS wygląda tak:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

Czy widzisz problem? Kiedy interfejs API próbuje wykonać pomiary dla Twojego infoWindow(bezpośrednio przed wyświetleniem), h1część treści będzie miała rozmiar 18px(ponieważ tymczasowy element „pomiarowy” jest dołączany do treści), ale gdy interfejs API faktycznie umieszcza element infoWindowon na mapie, #map-canvas h1selektor będzie miał pierwszeństwo, powodując, że rozmiar czcionki będzie znacznie różny od tego, jaki był, gdy API mierzyło rozmiar, infoWindowiw tej sytuacji zawsze otrzymasz paski przewijania.

Może być więcej nieco innych niuansów z konkretnego powodu, dla którego masz w swoim pasku przewijania infoWindow, ale powodem tego jest:

Te same reguły CSS muszą mieć zastosowanie do treści wewnątrz, infoWindow niezależnie od tego, gdzie w znaczniku pojawia się rzeczywisty element HTML. Jeśli tak się nie stanie, masz gwarancję, że w swoim oknie infoWindow pojawią się paski przewijania

Więc zawsze robię coś takiego:

infoWindow.setContent('<div class="info-window-content">...your content here...</div>');

aw moim CSS:

.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...

Bez względu na to, gdzie API dołącza swój pomiar div- przed zamknięciem bodylub wewnątrz a #map-canvas, zastosowane do niego reguły CSS będą zawsze takie same.

EDYCJA RE: Rodziny czcionek

Wygląda na to, że Google aktywnie pracuje nad problemem ładowania czcionek (opisanym poniżej), a funkcjonalność zmieniła się bardzo niedawno, więc możesz lub nie widzieć ładowania czcionki Roboto przy infoWindowpierwszym uruchomieniu, w zależności od wersji interfejsu API, z którego korzystasz. Istnieje otwarty raport o błędzie (mimo że w dzienniku zmian ten raport o błędzie został już oznaczony jako naprawiony), który ilustruje, że Google nadal ma problemy z tym problemem.

WIĘCEJ RZECZY: ZOBACZ SWOJE RODZINY CZCIONEK !!!

W najnowszym wcieleniu API Google starało się być sprytnym i opakować zawartość infoWindow w coś, na co można by skierować selektor CSS - .gm-style-iw. Dla ludzi, którzy nie rozumieli zasad, które wyjaśniłem powyżej, nie pomogło to, aw niektórych przypadkach nawet pogorszyło. Paski przewijania prawie zawsze pojawiały się przy pierwszym infoWindowotwarciu, ale jeśli otworzysz je infoWindowponownie, nawet z dokładnie taką samą zawartością, paski przewijania znikną. Poważnie, gdybyś nie był zdezorientowany, zanim to spowodowałoby, że straciłeś rozum. Oto, co się działo:

Jeśli spojrzysz na style ładowane przez Google na stronie, gdy ładuje się interfejs API, zobaczysz to:

.gm-style {
     font-family: Roboto,Arial,sans-serif
 ...
}

OK, więc Google chciał, aby mapy były nieco bardziej spójne, zawsze wykorzystując Robotorodzinę czcionek. Problem polega na tym, że dla większości ludzi, zanim otworzyłeś infoWindow, przeglądarka nie pobrała jeszcze Robotoczcionki (ponieważ nic innego na twojej stronie jej nie używało, więc przeglądarka jest na tyle inteligentna, że ​​wie, że nie musi jej pobierać ta czcionka). Pobieranie tej czcionki nie jest natychmiastowe, mimo że jest bardzo szybkie. Gdy po raz pierwszy otworzysz infoWindowi API dopisuje divze swojej infoWindowzawartości do ciała, aby wziąć go za pomiary, rozpoczyna pobieranie Robotoczcionek, ale twoje infoWindow'ssą pomiary, a okno jest umieszczone na mapie, zanim Robotozakończy pobieranie. Rezultatem był dość częstoinfoWindowktórego pomiary zostały wykonane, gdy treść była renderowana przy użyciu Ariallub sans-serifczcionką, ale gdy była wyświetlana na mapie (i Robotozakończyła pobieranie), jej zawartość była wyświetlana czcionką o innym rozmiarze - i voila - paski przewijania pojawiają się po raz pierwszy otwierasz infoWindow. Otwórz dokładnie to samo infoWindowpo raz drugi - w którym momencie Robotoplik został pobrany i będzie używany, gdy API będzie mierzyć infoWindowzawartość i nie zobaczysz żadnych pasków przewijania.


Tam jest jakiś wielki szczegół, Adam i tak, odkryłem podobne rzeczy dla ciebie. Jednakże bug zgłoszony do Google ma faktycznie wydaje się nadal występować nawet z czcionek systemowych i bez selektorów potomka CSS. Zobacz ten przykład (ma pasek przewijania w Chrome 40 Win).
Simon East

@Simon - masz rację, przesłany przez Ciebie link jest błędem (skrajny przypadek, ale mimo to błąd). Wyobrażam sobie, że> 98% przypadków, gdy ludzie zgłaszają swoje infoWindows i nie wiedzą dlaczego - dzieje się tak z powodu problemów poruszonych w tej odpowiedzi.
Adam

Adam. Dziękuję bardzo za udzielenie tej odpowiedzi. Uratowałeś mi mnóstwo niepotrzebnego hakowania!
Abram

13

Wypróbowałem każdą z wymienionych odpowiedzi. Żaden nie pracował dla mnie. To ostatecznie naprawiło to na stałe. Kod, który odziedziczyłem, miał DIVotokę wokół wszystkich wpisów <h#>i <p>. Po prostu wymusiłem jakiś "styl" w tym samym DIV, biorąc pod uwagę pożądaną maksymalną szerokość, wrzuciłem na wszelki wypadek zmianę wysokości linii na wszelki wypadek (czyjaś poprawka) i własną white-space: nowrap, co następnie sprawiło, że automatyczne przepełnienie dokonało poprawnych korekt. Bez paska przewijania, bez obcinania i bez problemów!

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

7
Ten! Przeszedłem przez wszystkie odpowiedzi bez powodzenia, aż tu dotarłem. W moim przypadku to była white-space: nowrapmagia - pozostałe style były niepotrzebne. Twoje zdrowie!
Xavier Holt

Wydaje się, że to rzeczywiście działa, jednak niektóre okna informacyjne musiały zostać kliknięte więcej niż raz ... moim ostatecznym rozwiązaniem było połączenie tej odpowiedzi z odpowiedzią Concept211 przez dodanie font-family: sans-serif !important; font-weight: normal !important;do CSS.
Sparky,

Niestety, jeśli masz jakieś długie linie, zostaną one obcięte zamiast zawijania. Nie jest to idealne rozwiązanie, chyba że wiesz , że wszystkie twoje linie są krótkie.
Simon East

10

Wiem, że to stary wątek, ale właśnie napotkałem ten sam problem. Miałem <h2>i <p>elementy w InfoWindow i oba miały dolne marginesy. Usunąłem marginesy i rozmiar InfoWindow był prawidłowy. Żadna z innych sugerowanych poprawek nie zadziałała. Podejrzewam, że kalkulacja rozmiaru InfoWindow nie uwzględnia marginesów.


1
Miałem ten problem i żadna z innych poprawek nie działała, ale ta nie działała. Dzięki :)
Ian Dunn

Dotyczy to wszystkich marginesów używanych wewnątrz okna.
ZMorek

2
Nadal miałem problemy, ale po prostu zapakowałem wszystko w <div style='overflow:hidden;'></div>Wygląda dobrze teraz.
ZMorek

10

Zamierzam dodać moją odpowiedź do listy, ponieważ ŻADEN z nich nie rozwiązał mojego problemu. Skończyło się na zawinięciu zawartości w element div, nadając mu klasę i określając element min-widthw maxWidthelemencie div ORAZ określając element w infoWindow, ORAZ oba musiały mieć ten sam rozmiar, w przeciwnym razie szerokość lub wysokość byłyby przepełnione na pudełkach z niewłaściwą ilością zawartości.

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

2
Ustawienie min-widthtreści było jedyną rzeczą, która działała dla mnie. Nie maxWidthmusiałem jednak ustawiać na infoWindow.
Mark Parnell,

1
@MarkParnell = upewnij się, że dokładnie przetestowałeś. Miałem problemy, gdy miałem więcej niż określoną ilość tekstu o określonej szerokości! Jeśli wiesz, jaka będzie treść, to nie ma sprawy :)
Jen

Dziękuję bardzo ... to też mi pomogło. W widoku mobilnym podałem maxWidth: 350. nadal przyjmował jakąś losową wartość. z pomocą min-width działa dobrze.
DShah

8

Wypróbowałem wszystkie te rozwiązania i żadne nie działało. Po kilku próbach i błędach zrozumiałem.

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

Ustaw wysokość linii: normalna dla elementu div kanwy mapy.


tak! wysokość linii jest tym, co również dla mnie naprawiło. nic innego nie działało. konkretnie, wysokość linii ustawiłem w moim arkuszu stylów na {line-height: 1.3; }. Zmieniłem go na {line-height: 1.3em} i rozwiązałem problem.
tbradley22

lub alternatywnie możesz po prostu ustawić wysokość linii elementu div kontenera mapy na normalną, jak wskazano powyżej.
tbradley22

W #map_canvasMapach Google v3 nie ma tego, co widzę. To musi pochodzić ze starej wersji v2.
Simon East

@Simon #map_canvasto div, którego używasz na mapie. Może to być dowolne imię.
Nick

Niestety to nie pomaga. To skrzypce nadal wyświetla pasek przewijania w przeglądarce Chrome: jsfiddle.net/simoneast/dckxp62o
Simon East

8

Wygląda na to, że problem dotyczy czcionki internetowej Roboto.

Infowindow jest renderowane z wbudowanymi właściwościami width i height na podstawie dostarczonej treści. Jednak nie jest obliczany przy użyciu już wyrenderowanych / załadowanych czcionek internetowych. Kiedy czcionka zostanie wyrenderowana PO wydrukowaniu całej mapy na ekranie, powoduje to pojawienie się pasków przewijania z powodu właściwości „overflow: auto” wewnątrz DIV okna.

Rozwiązaniem, które znalazłem, jest zawinięcie treści w DIV, a następnie zastosowanie CSS, aby zastąpić czcionkę internetową:

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

<div class="gmap_infowin">Your info window content here.</div>

to rozwiązanie działa dla mnie. Również ukrywanie działa przewijania: .gm-style-iw {overflow: hidden! Important;}, ale to ukryje część treści w infoWindow
Imaginary,

+1 tak! Ale połączyłem tę odpowiedź z user2656824 .
Sparky

+1, ponieważ jest to jedyna odpowiedź, która wydaje się w końcu uznawać fakt, że jest to spowodowane problemami z czcionkami Roboto. Nie zdziwiłbym się, gdyby inne czcionki również były renderowane nieprawidłowo. Problem polega na tym, że .gm-style-iw oblicza trochę mniejszą wysokość niż to konieczne, prawdopodobnie z powodu zaokrąglenia zmiennoprzecinkowego. naprawdę jedyną rozsądną opcją jest niefortunny .gm-style-iw {przepełnienie: ukryte! ważne;}. oczywiście staje się to bezużyteczne, gdy naprawdę trzeba przewijać
user151496

Czcionka Roboto nie wydaje się, aby wywołać ten problem czasami , ale zdarza się również z Arial i domyślnych czcionek. Jeśli spojrzysz na to skrzypce z sugerowaną poprawką w Chrome 38 w systemie Windows, nadal ma paskudny pasek przewijania: jsfiddle.net/simoneast/dckxp62o/2
Simon East

5

To zabawne, podczas gdy poniższy kod poprawi pasek przewijania WIDTH:

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

}

Wymagało to poprawienia paska przewijania HEIGHT:

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

EDYCJA: dodawanie spacji: nowrap; do obu stylów może rozwiązać problem z odstępami, który wydaje się utrzymywać się po usunięciu pasków przewijania. Świetna uwaga, Nathan.


Myślę, że mój problem był spowodowany zawijaniem tagu h4. Kiedy dodałem twoją sugestię, usunąłem paski przewijania, ale na dole okna był mały kawałek. Kiedy dodałem spację: nowrap; do h4 wszystko się poprawiło. Dzięki!
Nate Bunney,

4

To działa dla mnie. Umieść divwsetContent

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

Następnie dodaj ten CSS do swojej strony:

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

Na przykład zobacz http://www.student-homes-northampton.co.uk ; kliknij linki pod zdjęciami domów, aby wyświetlić mapę Google.


29
dzięki, dopiero gdy ustawiłem czcionkę na comic-sans, to zaczęło działać.
bret

4

To całkowicie rozwiązało mój problem:

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}

To jest najbliższa odpowiedź, która mi pomogła. Zamiast automatycznej wysokości dodałem minimalną wysokość.
Paul,

3

Miałem ten sam problem z IE i wypróbowałem wiele poprawek opisanych w tych odpowiedziach, ale nie byłem w stanie niezawodnie usunąć pionowych pasków przewijania w IE.

To, co działało najlepiej, to przełączenie się na stałe rozmiary czcionek w oknie informacyjnym - „px” ... Używałem ems. Po naprawieniu rozmiaru czcionki nie musiałem już jawnie deklarować szerokości lub wysokości okna infowindow, a paski przewijania zniknęły na dobre.


Czasami pomaga, ale nie rozwiązuje problemu w niezawodny sposób. Jeśli oglądasz to skrzypce w Chrome 38 w systemie Windows, nadal ma brzydki pasek przewijania: jsfiddle.net/simoneast/dckxp62o/3
Simon East

2

Ważna jest również wysokość kontenera mapy. Jeśli za mały infoWindow zawsze będzie miał wysokość 80px. Inaczej maxWidthi #innerDivpoprawka działa jak czar.


Dokładnie, nie sądzę, aby był to jakiś stały rozmiar, ale chodzi o to, że jeśli mapa nie jest wystarczająco duża (w tym przypadku wysokość), wówczas okno informacyjne nie zmieni rozmiaru, aby zawijać naszą zawartość. Spróbuj powiększyć mapę i sprawdź ponownie
spuas

TO jest najbardziej poprawna odpowiedź. Zbyt mała mapa jest zwykle przyczyną problemów z rozmiarem okna informacyjnego. Jeśli chcesz przetestować teorię, po prostu sprawdź kontener mapy i zwiększ szerokość i wysokość.
pim

Niestety, nawet przy odpowiednio dużej mapie nadal występują problemy.
Simon East

2

Jeśli nic innego, spróbuj dodać zawartość po otwarciu okna. To powinno zmusić go do zmiany rozmiaru.

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

0

Użyj zdarzenia domready i ponownie otwórz okno informacyjne i pokaż ukrytą zawartość po dwukrotnym uruchomieniu zdarzenia domready, aby upewnić się, że wszystkie elementy dom zostały załadowane.

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

Próbowałem po prostu wykonać setTimeout (/ * show infowin callback * /, 100), ale czasami to nie działało, jeśli zawartość (tj: obrazy) ładowała się zbyt długo.

Mam nadzieję, że to działa dla Ciebie.


0

Miałem ten sam problem, szczególnie zauważalny, gdy mój <h2>element został zawinięty do drugiej linii.

Zastosowałem klasę do a <div>w infoWindow i zmieniłem czcionki na ogólną czcionkę systemową (w moim przypadku Helvetica) zamiast na czcionkę internetową @ font-face, z której korzystała. Problem rozwiązany.


Niestety nie jest to niezawodna poprawka. Wiadomo, że problem występuje również w przypadku czcionek Arial i innych standardowych czcionek.
Simon East

0
//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);

0

Dodaj a min-heightdo elementu klasy infoWindow.

To rozwiąże problem, jeśli wszystkie twoje infoWindows mają ten sam rozmiar.

Jeśli nie, dodaj ten wiersz jQuery do funkcji klikania dla infoWindow:

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');

Jesteś na dobrej drodze. Minimalna wysokość infoWindow ci nie pomoże, ponieważ ta DIV jest zawarta w przepełnionym DIV. Ustawienie minimalnej wysokości spowoduje przewijanie za każdym razem.
zegarku 247

Patrząc na strukturę DOM, w rzeczywistości jest to GRANDPARENT klasy infoWindow, który wymaga usunięcia przepełnienia. Mój kod wygląda mniej więcej tak: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * kod do wyświetlania okna jest tutaj, a następnie moja poprawka przepełnienia dalej * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('overflow', '');}, 25); }} Co w zasadzie uruchamia poprawkę infoWindow po 25 ms, wystarczającym czasie na renderowanie.
mechanizm zegarowy247

0

Nie mogłem zmusić go do działania w jakimkolwiek kształcie lub formie, włączyłem 3 elementy div do pudełka. Owinąłem je w zewnętrzny element div, z szerokościami i wysokościami ustawionymi prawidłowo i nic nie działało.

Ostatecznie naprawiłem to, ustawiając div jako absolutny lewy górny róg, a następnie przed div ustawiłem dwa obrazy, jeden o szerokości 300 pikseli i wysokości 1 piksela, jeden o wysokości 120 pikseli i szerokości 1 piksela, przezroczystego gifu.

W takim razie skalował się prawidłowo!

Jest brzydki, ale działa.

Możesz też zrobić jeden obraz i ustawić zindeks, którego oczekuję, lub nawet jeden obraz, jeśli twoje okno nie ma interakcji, ale zawierał on formularz, więc to nie była opcja ...


0

Myślę, że to zachowanie jest spowodowane stylizacją css w zewnętrznym kontenerze, miałem ten sam problem, ale rozwiązałem go za pomocą wewnętrznego div i dodając do niego trochę wypełnienia, wiem, że to dziwne, ale rozwiązało problem

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

I w moim style.css

div#fix_height{
    padding: 5px;
}

0

Miałem element inline (tag a) bezpośrednio wewnątrz elementu divz style="overflow:auto"[...owiniętym ptagiem i naprawiłem go.

Wygląda na to, że spowoduje to każdy element wbudowany, który nie jest zagnieżdżony w elemencie blokowym bezpośrednio w oknie infowindow.


0

Moją odpowiedzią jest dodanie detektora (za pomocą addListenerOnce), aby sprawdzić, czy infoWindow zostało dodane do DOM, a następnie ponowne otwarcie infoWindow (nie ma potrzeby go zamykać).

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

0

Dodanie następującego kodu do mojego CSS załatwiło sprawę:

white-space: nowrap;

To usunie opakowanie na długich liniach. Myślę, że to nie jest odpowiednie rozwiązanie dla wielu ludzi.
Simon East

0

Podsumowując wszystkie rozwiązania, które działały dla mnie we wszystkich przeglądarkach:

  • Nie używaj marginesów wewnątrz okna informacyjnego, tylko dopełnienie.
  • Ustaw maksymalną szerokość okna informacyjnego:

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

  • Owiń zawartość okna informacyjnego za pomocą

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

    (zmień min-width dla wartości ustawionej w infowindow maxWidth)

Przetestowałem to i działało na każdej przeglądarce, a miałem ponad 400 markerów ...


Spowoduje to ustawienie stałej szerokości okna InfoWindow (już nie płynnego), co jest jednym rozwiązaniem, ale nie idealnym.
Simon East

0

Wiem, że wiele innych osób znalazło rozwiązania, które działały w ich konkretnym przypadku, ale ponieważ żadna z nich nie działała w moim konkretnym przypadku, pomyślałem, że może to być pomocne dla kogoś innego.

Trochę szczegółów:

Używam google Maps API v3 w projekcie, w którym wbudowany CSS jest czymś, czego naprawdę chcemy uniknąć. Moje okna informacyjne działały we wszystkim oprócz IE11, gdzie szerokość nie została poprawnie obliczona. Spowodowało to przepełnienie div, które wyzwoliło paski przewijania.

Musiałem zrobić trzy rzeczy:

  1. Usuń cały wyświetlacz: reguły stylu inline-block z czegokolwiek w treści infowindow (zamieniłem na display: block) - wpadłem na pomysł, aby wypróbować to z wątku (którego już nie mogę znaleźć), w którym ktoś miał to samo problem z IE6.

  2. Przekaż zawartość jako węzeł DOM zamiast jako ciąg. Używam jQuery, więc mogłem to zrobić, zastępując: infowindow.setContent(infoWindowDiv.html());z infowindow.setContent($(infoWindowDiv.html())[0]); To okazało się dla mnie najłatwiejsze, ale jest wiele innych sposobów na uzyskanie tego samego wyniku.

  3. Użyj hackowania "setMaxWidth" - ustaw opcję MaxWidth w konstruktorze - ustawienie opcji później nie działa. Jeśli naprawdę nie chcesz maksymalnej szerokości, ustaw ją na bardzo dużą liczbę.

Nie wiem, dlaczego to zadziałało i nie jestem pewien, czy podzbiór z nich zadziała. Wiem, że żaden z nich nie działa dla wszystkich moich przypadków użycia indywidualnie i że 2 + 3 nie działa. Nie miałem czasu na testowanie 1 + 2 lub 1 + 3.


0

Nie do przyjęcia było dla mnie sztywne zakodowanie szerokości i wysokości okna informacyjnego lub ustawienie white-space: nowrap, maxWidthrozwiązanie nie pomogło mi, a wszystko inne albo nie działało, albo było w inny sposób nieodpowiednie dla mojego przypadku użycia.

Moim rozwiązaniem było ustawienie zawartości, otwarcie okna, a następnie po uruchomieniu domreadyzdarzenia ustawienie heightwłaściwości CSS zawartości na dowolną wysokość, a następnie wymuszenie odpowiedniej zmiany rozmiaru okna InfoWindow w Mapach Google.

infoWindowjest obiektem InfoWindow, $infoWindowContentsjest obiektem Jquery zawierającym zawartość, którą chcę tam umieścić, mapjest moim obiektem Map. markerto znacznik, który został kliknięty.

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

(Opublikowałem to samo rozwiązanie na podobne pytanie Jak mogę zmienić rozmiar mapy Google Maps InfoWindow, aby dopasować ją do treści, która jest w nim umieszczona? )


0

Po straceniu czasu i czytaniu przez chwilę chciałem po prostu czegoś prostego, ten CSS działał zgodnie z moimi wymaganiami.

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

Nie jest to również rozwiązanie natychmiastowe, ale oznaczenie problemu gwiazdką / komentowanie może sprawić, że go naprawią, ponieważ uważają, że został naprawiony: http://code.google.com/p/gmaps-api-issues/issues/detail?id= 5713


W niektórych przypadkach powoduje to odcięcie treści. :-( W tych skrzypcach w Chrome 38 w systemie Windows „dddd” jest całkowicie odcięty
Simon East

0

To jest ten, który załatwił mi sprawę:

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

Dopiero overflow: visiblewłączenie .gm-style-iwfaktycznie pogorszyło problem! Zauważyłem w inspektorze narzędzi deweloperskich Chrome, że wewnątrz .gm-style-iwelementu znajdują się dwa elementy div , które są overflow: autoustawione domyślnie.

W moich InfoWindows wyświetlam sporo tekstu w formacie HTML, może to dlatego inne rozwiązania w ogóle nie działały.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.