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

Question 1

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.

Question 2

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

Question 3

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

Question 4

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

Question 5

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

mi to pasuje

Question 6

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.

Question 7

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;
                                       ">';

Question 8

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.

Question 9

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

Question 10

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.

Question 11

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>

Question 12

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.

Question 13

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.

Question 14

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

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

Question 15

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.

Question 16

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.

Question 17

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)

Question 18

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.

Question 19

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.

Question 20

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

Question 21

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

Question 22

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

Question 23

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

Question 24

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.

Question 25

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

Question 26

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

white-space: nowrap;

Question 27

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

Question 28

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:

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

Question 29

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

Question 30

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

Question 31

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.

Answer 1

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.

javascript html css google-maps JacobT
źródło

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

Answer 2

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

Jonathan Fingland

Answer 3

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

Answer 4

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

Answer 5

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

Złupić
źródło

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

Answer 6

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

Elijah Saounkine

Answer 7

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

Answer 8

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

user2060451

Answer 9

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

fortboise
źródło

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

Answer 10

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

Answer 11

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

Answer 12

1

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

Bill Blankenship,

Answer 13

14

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

Simon East

Answer 14

1

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

Phil Cooper

Answer 15

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

Baris Aydinoglu
źródło

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

Answer 16

4

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

Jeremy F.

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

22

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

mi to pasuje

Rejeesh Prarath
źródło

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,

Answer 21

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

Answer 22

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,

Answer 23

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.

Answer 24

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

Answer 25

@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

Answer 26

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

Abram

Answer 27

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;
                                       ">';

user2656824
źródło

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

Answer 28

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

Answer 29

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,

Answer 30

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

Answer 31

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.

Mikrofon
źródło

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

Answer 32

1

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

Ian Dunn

Answer 33

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

ZMorek

Answer 34

2

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

ZMorek

Answer 35

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

Jen
źródło

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

Answer 36

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,

Answer 37

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

Answer 38

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

Answer 39

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.

Nacięcie
źródło

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

Answer 40

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

Answer 41

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

tbradley22

Answer 42

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

Simon East

Answer 43

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

Nick

Answer 44

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

Simon East

Answer 45

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>

Concept211
źródło

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

Answer 46

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,

Answer 47

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

Sparky

Answer 48

+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

Answer 49

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

Answer 50

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.

Answer 51

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,

Answer 52

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.

Answer 53

29

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

bret

Answer 54

4

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

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

Vfleitao
źródło

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

Paul,

Answer 55

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

Paul,

Answer 56

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.

Answer 57

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

Answer 58

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.

xsi1
źródło

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

Answer 59

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

Answer 60

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

Answer 61

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

Simon East

Answer 62

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)

Answer 63

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.

Answer 64

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.

Taylor Dewey
źródło

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

Simon East

Answer 65

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

Simon East

Answer 66

0

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

Andrew Samuelsen
źródło

Answer 67

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

Jason
źródło

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

Answer 68

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

Answer 69

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

Answer 70

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

Answer 71

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

Answer 72

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.

Answer 73

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

Answer 74

0

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

white-space: nowrap;

ruggershawn
źródło

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

Simon East

Answer 75

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

Simon East

Answer 76

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

Answer 77

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

Simon East

Answer 78

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:

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

Answer 79

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

Answer 80

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

Answer 81

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

Answer 82

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.

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

Odpowiedzi: