Twitter Bootstrap CSS, влияющий на Карты Google

Я использую Twitter Bootstrap и имею карту Google.

Изображения на карте, такие как маркер, искажаются CSS в Bootstrap.

В Bootstrap CSS есть:

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

Когда я отключу свойство max-width с помощью Firebug, изображение маркера появится как обычно. Как я могу помешать CSS Bootstrap влиять на изображения карт Google?

Ответы

Ответ 1

С Bootstrap 2.0 это, казалось, делало трюк:

#mapCanvas img {
  max-width: none;
}

Ответ 2

Также существует проблема с селекторами выпадающих списков для рельефа и наложений, добавив, что оба они исправят проблемы...

#mapCanvas img { 
  max-width: none;
}

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

Во втором стиле будут отображаться другие проблемы с полем рельефа и наложения в некоторых браузерах.

Ответ 3

Дайте вашему холсту div карты идентификатор map_canvas.

Это сообщение об ошибке загрузки включает исправление max-width: none для id map_canvas (но оно не будет работать для mapCanvas).

Ответ 4

Ни один из этих ответов не работал у меня, поэтому я вошел в свой div и посмотрел на своих детей, я увидел новый div с классом "gm-style", поэтому я поместил это в свой CSS:

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

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

.. и это решило проблему для меня.

Ответ 5

Вы хотите переопределить правило max-width в разделе CSS с помощью max-width: none; Кажется, что это проблема вокруг этой проблемы.

Ответ 6

Изменение #MapCanvas не сработало для нас, используя gmap4rails gem, но когда мы изменили на

.map_container img {
    max-width: none;
}

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

Ответ 7

Я использую gmaps4rails, это исправление сделало это для меня:

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

Ответ 8

Последняя версия twitter bootstrap 2.0.4 включает это исправление напрямую.

Если вы завершаете свой контент в контейнере a (div class=), как на демонстрационной странице twitter bootstrap, вы должны добавить style = "height: 100%"

Ответ 9

Также существует проблема с печатью карт с использованием Print в любом браузере. img { max-width: 100% !important; } не будет исправлен с помощью кода выше: вам нужно добавить объявление !important, например:

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

Ответ 10

Мне также пришлось отключить тень, и из-за порядка моего включения я добавил важный флаг.

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

Ответ 11

Все ответы были max-widht: none

для меня, max-height: inherit работал.....

Люди используют #map, #map_canvas и т.д. Посмотрите на свой родительский div. Если он синий, то это будет #blue img {}