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