Twitter Bootstrap CSS memengaruhi Google Maps

147

Saya menggunakan Bootstrap Twitter, dan memiliki peta Google.

Gambar pada peta, seperti marker sedang miring oleh CSS di Bootstrap.

Dalam Bootstrap CSS ada:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
}

Ketika saya menonaktifkan max-widthproperti menggunakan Firebug, gambar penanda muncul seperti biasa. Bagaimana saya bisa mencegah Bootstrap CSS mempengaruhi gambar peta Google?

google-maps twitter-bootstrap css raklos
sumber

jawab di sini: github.com/zurb/foundation/issues/26

raklos

187

Dengan Bootstrap 2.0, ini sepertinya berhasil:

#mapCanvas img {
  max-width: none;
}

kevinwmerritt
sumber

6

Pastikan untuk menambahkan #mapCanvas img { width: auto; display:inline; }seperti yang disebutkan di bawah ini oleh @nodrog

jlb

Dari catatan rilis Bootstrap 2.0.3: "Regresi tetap pada gambar responsif mendukung pada 2.0.1. Kami telah menambahkan kembali max-width: 100%; ke gambar secara default. Kami menghapusnya dalam rilis terakhir kami karena kami memiliki orang-orang mengeluh tentang integrasi Google Maps dan proyek lainnya, tetapi kami mengambil sikap berbeda sekarang tentang hal-hal ini dan akan meminta pengembang untuk membuat tweak ini pada akhirnya. "

kevinwmerritt

FYI: Catatan rilis Bootstrap 2.0.4: "Menambahkan CSS khusus untuk mencegah lebar maksimum: 100%; pada gambar dari mengacaukan rendering Google Maps."

kevinwmerritt

Itu aneh bahwa mereka akhirnya memutuskan untuk hardcode id, bukan menggunakan kelas sebagai gantinya

zerkms

1

#mapCanvas tidak berfungsi untuk saya. Saya hanya menggunakan kelas .map yang saya gunakan sebagai wadah google maps dan itu berhasil. TERIMA KASIH!

Fydo

80

Ada juga masalah dengan pemilih dropdown untuk medan dan hamparan, menambahkan keduanya akan memperbaiki masalah ...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
}

Gaya kedua akan menyortir masalah lain dengan kotak terrain dan overlay di beberapa browser.

nodrog
sumber

Iya ! semuanya tampaknya sudah diperbaiki dengan yang satu ini dikombinasikan dengan jawaban yang ditandai sebagai "diterima" di atas. Terima kasih.

Mat

bekerja seperti pesona di firefox 17 tetapi tidak di chrome 23. tidak tahu mengapa tetapi saya menemukan solusinya tambahkan saja ini:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

yosafatade

Anda jenius. Terima kasih banyak. Ini membuatku gila :-)

Beruang

20

Berikan id kanvas peta Anda map_canvas.

Komit bootstrap ini mencakup max-width: noneperbaikan untuk id map_canvas(tetapi tidak akan bekerja untuk mapCanvas).

robd
sumber

Saya pikir hanya untuk mengubah id diperlukan di v2.2.2

jacktrades

saya tidak dapat menemukan id dalam file css

Muhaimin

@robd: Hanya ingin tahu, Mengapa itu tidak akan berfungsi kecuali map_canvas.

ArunRaj

@ArunRaj karena perbaikan di bootstrap hardcoded ke id #map_canvas (lihat komit terkait). Bagaimanapun, jawaban ini mungkin sudah usang sekarang mengingat sudah hampir 2 tahun.

Robd

11

Tidak satu pun dari jawaban ini yang bekerja untuk saya, jadi saya masuk ke div saya dan melihat anak-anaknya, saya melihat div baru dengan kelas "gm-style", jadi saya meletakkan ini di CSS saya:

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..dan itu memecahkan masalah bagi saya.

Christopher Dow
sumber

+1 ini satu-satunya jawaban yang berfungsi untuk memperbaiki kontrol "zoom" yang aneh. (Bootstrap 2)

philfreo

Bekerja untuk saya juga. Tempat yang bagus :)

jeje

Terima kasih, bekerja untuk saya juga. Satu-satunya jawaban yang berhasil bagi saya untuk memperbaiki kontrol "zoom" yang aneh. (dengan Yayasan 5)

Steffi

3

Anda ingin menggunakan aturan max-width di bagian CSS dengan menggunakan max-width: none; Ini tampaknya menjadi cara mengatasi masalah ini

Pawpoint
sumber

2

Mengubah #MapCanvas tidak berfungsi untuk kami menggunakan permata gmap4rails, tetapi berhasil ketika kami mengubahnya

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

Sam Joseph
sumber

2

Saya menggunakan gmaps4rails, perbaikan ini melakukannya untuk saya:

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

Benjamin Crouzier
sumber

1

bootstrap twitter terbaru 2.0.4 termasuk perbaikan ini secara langsung.

Jika Anda membungkus konten Anda di a (div class = "container") seperti di halaman demo bootstrap twitter, Anda harus menambahkan style = "height: 100%"

redochka
sumber

1

Ada juga masalah dengan mencetak peta menggunakan Cetak di browser apa pun. Tidak img { max-width: 100% !important; }akan diperbaiki oleh kode di atas: Anda perlu menambahkan !importantdeklarasi seperti:

@media print {
  img {
    max-width: auto !important;
  }
}

tempranova
sumber

0

Saya juga harus mematikan bayangan kotak, dan karena urutan termasuk saya, saya menambahkan bendera! Penting.

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}

Redtopia
sumber

1

Ini berhasil untuk saya. Jika Anda akan memilih seseorang, Anda setidaknya harus mengatakan mengapa.

Redtopia

0

Semua jawaban max-widht: tidak ada

bagi saya, max-height: inherit berfungsi .....

Orang-orang menggunakan #map, #map_canvas, dll. Lihatlah div induk Anda. Jika biru, maka akan menjadi #blue img {}

pengguna2060451
sumber

Twitter Bootstrap CSS memengaruhi Google Maps

Jawaban: