Google map’in işaretçisinin infowindow max height ayarı nasıl yapılır?

Question

İşaretçi bilgi penceresinin içeriği çok uzunsa, pencereye sığmaz, alt kısımda taşacaktır. Bunu nasıl düzeltebilirim?

Answer 1

Bu sorun da bilgi penceresi içeriğine uygulanan kalıtsal stiller kaynaklanabilir:

Aksi takdirde, sadece bir kaydırma çubuğu ile bir div içine içeriğini koyardınız harita.

Örneğin: Yazı tipi boyutu, varsayılan yazı tipine göre hesaplanacaktır. Bilgi penceresi eklendiğinde, yazı tipi, devralınan CSS'ye göre değişir ve daha büyükse, bilgi penceresinin alt kısmından taşacaktır.

Devralınan stili kaldırmak istemiyorsanız (ve çoğunlukla siz yapmazsanız), bilgi penceresi içeriğinde, miras alınan stili açıkça belirtmeniz gerekir.

Bu sorunun mükemmel bir açıklamasını bulabilirsiniz ve en çözüm: Yukarıdaki kod

Fixing the 'inherited CSS' problem

Answer 2

Eğer InfoWindow bir fotoğraf içeriyorsa, InfoWindow'un boyutu resim indirilmeden önce ayarlanmış olduğundan taşma olabilir. Durum buysa, resmin boyutunu belirtmeniz veya önceden yüklemeniz gerekir. o takılı sonra

div.infowindow { 
    max-height:250px; 
    overflow-y:auto; 
} 

Answer 3

.gm-style-iw{ 
    max-height: 10px; 
} 

çalışır!

Answer 4

kabul cevabı Yani burada ...

biraz muğlak InfoWindows yüksekliğini veya diğer stil özelliklerini değiştirmek isteyen herkes için doğrudan çözümlerin bir çift var.

Yöntem 1: CSS

şöyle bir CSS kuralını uygulayın. özel IW şablonlar varsa, bu da çalışabilir,

.gm-style-iw { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

Veya:!

#myInfoWindow-content { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

Taşma önemli olması gerekir, aksi takdirde GM kendi kuralları ve uzun yerini alır Her infowindow en değiştirir içerik kesilebilir. Max-height, önemli değil, ama yine de onu korumak için daha iyi çalışır.

Yöntem 2: Satır içi CSS

Eğer IW içeriği için şablonlar kullanabilirsiniz, o zaman bir seçenek inline infowindow başına stilleri hardcore olduğunu. Kullanmanıza gerek yok! Önemli çünkü GM bu durumda tüm kuralları ele alıyor gibi görünüyor.

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;"> 
    content 
</div> 

YÖNTEM 3: JavaScript

Hep dinamik şeyleri değiştirmek için JS kullanabilirsiniz. IW oklarını gizlemek gibi diğer IW öğelerini hedeflemek ve değiştirmek için bu yöntemi kullanabilirsiniz.

document.getElementById('myInfoWindow-content').style.maxHeight = '20px'; 
document.getElementById('myInfoWindow-content').style.overflow = 'auto';