Google Haritalar yakınlaştırma kontrolü bozuldu

Birkaç işaretli bir harita göstermek için Google Haritalar API'sını (v.3) kullanıyorum. Son zamanlarda haritayı yakınlaştırmak için kullanılan kontrolün bozulduğunu fark ettim (her zaman böyle değildi). Sebebin ne olduğu hakkında hiçbir fikrim yok.

Güncelleme

Bu gönderinin başlangıçta sorunu görüntüleyebileceğiniz bir sayfaya bağlantısı vardı, ancak bağlantı şimdi bozuk, bu yüzden kaldırdım.

CSS'niz bunu bozdu. max-width: 100%;814 satırında kaldırın , yakınlaştırma kontrolleri tekrar iyi görünecektir. Bu tür hataları önlemek için CSS'nizde daha spesifik seçiciler kullanın.

#myMap_canvas img {
    max-width: none;
}

benim için düzeltildi, ama aynı zamanda @Ben, "map div id olarak is map_canvas kullanırsanız Bootstrap ile bu sorun olmaz" tarafından soruya yorum işaret etmek istedim. O haklı. Bootstrap kullanmıyorum, ancak div kimliğini değiştirdikten sonra sorun oluşmaya başladı.

Map_canvas olarak geri ayarlamak, maksimum genişlik değişikliği olmadan düzeltildi.

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

Bootstrap kullanıyorsanız, ona "google-maps" sınıfını vermeniz yeterlidir. Bu benim için çalıştı.

Alternatif olarak, google map div için her şeyi bir tür son çözüm olarak 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;
}

@ Max-Favilli yanıtını paylaşmanız yeterli:

Google Maps API'nin 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 sayesinde

https://stackoverflow.com/a/19339767/3070027

Twitter Bootstrap kullanıcısıysanız, bu satırı CSS'nize eklemelisiniz:

.gmnoprint img { max-width: none; } 

Ben de bu sorunu vardı ve kullanarak

.google-maps img {
    max-width: none;
}

işe yaramadı. Sonunda kullandım

.google-maps img {
    max-width: none !important;
}

ve bir cazibe gibi çalıştı.

Yahoo'nun Pure CSS'sini kullanıyorsanız div'inize Bootstrap gibi "google-maps" sınıfını verin ve bu kuralı CSS'nize yerleştirin:

.google-maps img {
    max-width: none;
    max-height: none;
}

Anlayabildiğim kadarıyla Pure CSS'nin bu sorunu kendi başına çözmenin bir yolu yok.

Bana söylediđim bu seçenekler web sitem için çalýţmadý.

Bootstrap V3 kullanıyorum ve işlevselliğe odaklandım. Ana nedeni haritama farklı bir kimlik vermişti, sonra sarı streetvieuw adamla yakınlaştırma çubuğunu görüntülemek için kullanılan CSS dosyası

Map_canvas'ı harita sahibine yeniden adlandırdım ve sonra benim için çalıştı! Zaten CSS dosyalarına bakmak gerekir ipuçları için teşekkürler!

Yukarıdaki tüm çözümleri denedim ve diğer forumlardan diğerleri boşuna. kod mükemmel çalıştı başka bir Wordpress olmayan site var çünkü gerçekten sinir bozucu oldu. (Wordpress sayfasında bir Google haritası görüntülemeye çalışıyordum, ancak yakınlaştırma ve Streetview denetimleri bozuktu).

Yaptığım çözüm, yeni bir html dosyası oluşturmaktı (kopyayı tüm kodu Not Defteri'ne yapıştırın ve xyz.html olarak adlandırın, "tüm dosyalar" olarak kaydedin). Ardından web sitesine yükleyin / ftp yapın ve yeni bir Wordpress sayfası oluşturun ve bir gömme işlevi kullanın. Sayfayı düzenlerken metin düzenleyicisine (görsel düzenleyiciye değil) gidin ve kopyalayın / yazın:

http: // sayfa URL genişliği = "900" yükseklik = "950">

Boyutları değiştirirseniz, yukarıdaki her iki argümanda da değiştirmeyi unutmayın veya garip sonuçlar elde edersiniz.

İşte başlıyoruz - diğer bazı cevaplar kadar akıllı olmayabilir, ama benim için çalıştı! Kanıt burada: http://a-bc.co.uk/latitude-longitude-finder/