Google maps infobox - maxWidth

Question

Mam do czynienia z dziwnym zachowaniem infobox mapy google. Ustawiłem maxWidth na 0, aby umożliwić dopasowanie rozmiaru infobox do zawartości, ale zawsze otrzymuję infobox o rozmiarze 236 pikseli.

var infobox = new InfoBox({ 
    maxWidth:0 
    ,pixelOffset: new google.maps.Size(5, 10) 
    ,isHidden:false 
    ,closeBoxURL:"" 
    ,pane: "floatPane" 
    ,enableEventPropagation: false 
    ,Zindex: null 
}); 

Gdybym dostosować szerokość Infobox w pliku css, jak pokazano poniżej uzyskać ten sam rozmiar w każdym Infobox.

.infobox {width: 500px;} 

Co robię źle? Wszelkie idei, jak rozwiązać ten problem?

Answer 1

Można również użyć obiektu boxStyle w InfoBoxOptions

boxStyle: { 
     whiteSpace: "nowrap" 
} 

Answer 2

wychodził podobny problem, więc odzyskać optymalną szerokość i wysokość dynamicznie, a następnie ustawić moje wymiary Infobox odpowiednio. Oto funkcja jQuery i zastosowanie funkcji, która powinna rozwiązać ten problem. Czuję, że API naprawdę nie jest do tego zadowolony.

getInfoBoxDimensions: function(content) { 
    var sensor = $("<div>").html(content); 
    $(sensor).appendTo("body").css({"position" : "absolute", "left" : "-900px"}); 
    var width = $(sensor).width(); 
    var height = $(sensor).height(); 
    $(sensor).remove(); 
    return new Array(width, height); 
}, 

Teraz można pobrać wysokość i szerokość zawartości HTML z następujących czynności:

var infoBoxDimensions = getInfoBoxDimensions(info_box_html); 

i ustawić Infobox stosując następujący:

var ib = new InfoBox({ 
    content : info_box_html, 
    boxStyle : { 
      width : infoBoxDimensions[0] + "px", 
      height : infoBoxDimensions[1] + "px" 
    }, 
    .... 
    .... 
}); 

Twój info_box_html powinien mieć swój styl ustaw "inline-block". Domyślnie element bloku przyjmuje 100% szerokości, chcemy tylko dokładnej szerokości naszej zawartości, a inline-block zrobi to za nas.

nadzieję, że pomoże Ci się

Answer 3

not know how „poprawne” to rozwiązanie, ale tu idzie:

Wystarczy ustawić szerokość i wysokość google Infobox owijki do auto i dodać ważne, aby zapobiec google JS od zmiany rozmiaru:

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