Kontrol zoom Google Maps kacau

Saya menggunakan Google Maps API (v.3) untuk menunjukkan peta dengan beberapa penanda. Baru-baru ini saya memperhatikan bahwa kontrol yang digunakan untuk memperbesar peta kacau (tidak selalu seperti ini). Saya tidak tahu apa penyebabnya.

Memperbarui

Posting ini awalnya memiliki tautan ke laman tempat Anda dapat melihat masalah, tetapi tautan itu rusak sekarang, jadi saya telah menghapusnya.

CSS Anda mengacaukannya. Hapus max-width: 100%;sejalan 814 dan kontrol zoom akan terlihat baik lagi. Untuk menghindari bug seperti itu gunakan penyeleksi yang lebih spesifik di CSS Anda.

#myMap_canvas img {
    max-width: none;
}

memperbaikinya untuk saya, tetapi saya juga ingin menunjukkan komentar pada pertanyaan oleh @Ben, "Masalah ini tidak terjadi dengan Bootstrap jika Anda menggunakan map_canvas sebagai id peta map". Dia benar. Saya tidak menggunakan Bootstrap, tetapi masalah mulai terjadi setelah saya mengubah id id.

Mengaturnya kembali ke map_canvas memperbaikinya tanpa perubahan lebar maks.

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

Jika Anda menggunakan Bootstrap, berikan saja kelas "google-maps". Ini berhasil untuk saya.

Sebagai alternatif, Anda dapat mengatur ulang semuanya untuk google map div sebagai solusi terakhir:

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

Cukup bagikan @ Max-Favilli jawab:

Dengan versi terbaru google maps api, Anda memerlukan ini:

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

Terima kasih kepada @ Max-Favilli

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

Jika Anda pengguna Bootstrap Twitter, Anda harus menambahkan baris ini ke CSS Anda:

.gmnoprint img { max-width: none; } 

Saya punya masalah ini juga dan menggunakan

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

tidak bekerja Saya akhirnya menggunakan

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

dan itu bekerja seperti pesona.

Jika Anda menggunakan CSS Murni Yahoo, berikan kelas "google-maps" seperti Bootstrap, dan masukkan aturan ini dalam CSS Anda:

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

Sejauh yang saya tahu, Pure CSS tidak memiliki cara untuk memperbaiki masalah ini sendiri.

Opsi itu yang kalian katakan tidak bekerja untuk situs web saya.

Saya menggunakan Bootstrap V3 dan fokus pada fungsinya. Alasan utama adalah bahwa saya telah memberikan peta saya ID yang berbeda maka file CSS yang digunakan untuk menampilkan bar zoom dengan pria jalanan kuning

Saya mengganti nama map_canvas menjadi mafolder dan kemudian berhasil bagi saya! Terima kasih lagi atas petunjuk bahwa saya harus melihat ke dalam file CSS!

Saya mencoba semua solusi di atas, dan yang lain dari forum lain tidak berhasil. itu benar-benar menjengkelkan karena saya memiliki situs non-Wordpress lain di mana kodenya bekerja dengan sempurna. (Saya mencoba untuk menampilkan peta Google di halaman Wordpress, tetapi kontrol zoom dan Streetview terdistorsi).

Solusi yang saya lakukan adalah membuat file html baru (salin tempel semua kode ke Notepad dan beri nama xyz.html, simpan sebagai ketik "semua file"). Kemudian unggah / pasang ke situs web, dan atur halaman Wordpress baru dan gunakan fungsi sematan. Saat mengedit halaman buka editor teks (bukan editor visual) dan salin / ketik:

http: // halaman URL width = "900" height = "950">

Jika Anda mengubah dimensi, ingatlah untuk mengubahnya di kedua argumen di atas, atau Anda mendapatkan hasil yang aneh.

Kita mulai - mungkin tidak sepintar beberapa jawaban lain, tetapi itu berhasil untuk saya! Bukti di sini: http://a-bc.co.uk/latitude-longitude-finder/