javascript - Google Maps yakınlaştırma kontrolü bozuldu

Birkaç işaretçi ile bir harita göstermek için Google Maps API (v.3) kullanıyorum. Yakın zamanda, haritayı yakınlaştırmak için kullanılan kontrolün bozulduğunu fark ettim (hep böyle değildi). Bunun nedenini hiç bilmiyorum.

Güncelle

Bu gönderide aslında sorunu görebileceğiniz bir sayfaya bağlantı vardı, ancak bağlantı artık çalışmıyor, bu yüzden onu kaldırdım.

Cevap #1

CSS'in onu bozdu. 814. satırdaki max-width: 100%; öğesini kaldırın ve yakınlaştırma kontrolleri tekrar düzgün görünecektir. Bu tür hatalardan kaçınmak için CSS'inizde daha spesifik seçiciler kullanın.

Cevap #2

#myMap_canvas img {
    max-width: none;
}

Benim için düzeltti, ama ayrıca @Ben'in soruya yaptığı yorumu da belirtmek istedim, "Bu sorun, map div id olarak map_canvas kullanırsanız Bootstrap ile oluşmaz." Haklı. Ben Bootstrap kullanmıyorum, ama sorun div id'yi değiştirdikten sonra ortaya çıkmaya başladı.

Bunu map_canvas olarak geri ayarlamak, max-width değişikliği yapmadan sorunu çözdü.

<div id="map_canvas"></div>

Cevap #3

Eğer Bootstrap kullanıyorsanız, sadece ona "google-maps" sınıfını verin. Bu benim için işe yaradı.

Alternatif olarak, en son çare çözümü olarak google harita div'i için her şeyi sıfırlayabilirsiniz:

HTML :

<div class="mappins-map"><div>

CSS :

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Cevap #4

Sadece @Max-Favilli'nin cevabını paylaş:

Google Maps API'nin en son sürümü ile buna ihtiyacınız var:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

@Max-Favilli'ye teşekkürler