Twitter Bootstrap CSS wpływa na Mapy Google

Używam Twitter Bootstrap i mam mapę Google.

Obrazy na mapie, takie jak znacznik, są wypaczane przez CSS w Bootstrap.

W Bootstrap CSS jest:

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

Kiedy wyłączam max-widthwłaściwość za pomocą Firebuga, obraz znacznika pojawia się normalnie. Jak mogę zapobiec wpływowi kodu CSS Bootstrap na obrazy map Google?

W przypadku Bootstrap 2.0 wydawało się, że to działa:

#mapCanvas img {
  max-width: none;
}

Występuje również problem z rozwijanymi selektorami terenu i nakładek, dodanie obu tych elementów rozwiąże problemy ...

#mapCanvas img { 
  max-width: none;
}

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

Drugi styl będzie dotyczył innych problemów z terenem i polem nakładki w niektórych przeglądarkach.

Podaj identyfikator div kanwy mapy map_canvas.

To zatwierdzenie bootstrap zawiera max-width: nonepoprawkę dla id map_canvas(ale to nie zadziała mapCanvas).

Żadna z tych odpowiedzi nie działała dla mnie, więc poszedłem do mojego div i spojrzałem na jego elementy podrzędne. Zobaczyłem nowy div z klasą „gm-style”, więc umieściłem to w moim CSS:

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

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

.. i to rozwiązało problem za mnie.

Chcesz zastąpić regułę max-width w sekcji CSS, używając max-width: none; Wydaje się, że jest to sposób na obejście tego problemu

Zmiana #MapCanvas nie działała dla nas przy użyciu klejnotu gmap4rails, ale działała, gdy przeszliśmy na

.map_container img {
    max-width: none;
}

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

Używam gmaps4rails, ta poprawka zrobiła to za mnie:

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

Najnowszy program bootstrap 2.0.4 na Twitterze zawiera tę poprawkę bezpośrednio.

Jeśli pakujesz zawartość w a (div class = "container"), jak na stronie demonstracyjnej programu twitter bootstrap, powinieneś dodać style = "height: 100%"

Występuje również problem z drukowaniem map za pomocą funkcji Drukuj w dowolnej przeglądarce. Nie img { max-width: 100% !important; }zostanie to naprawione przez powyższy kod: musisz dodać !importantdeklarację w następujący sposób:

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

Musiałem też wyłączyć box-shadow, a ze względu na kolejność moich włączeń dodałem flagę! Important.

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

Wszystkie odpowiedzi były maksymalne: brak

dla mnie max-height: dziedziczenie działało .....

Ludzie używają #map, #map_canvas itp. Spójrz na swój nadrzędny div. Jeśli jest niebieski, to będzie #blue img {}