Twitter Bootstrap CSS влияет на Google Maps

151

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

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

В Bootstrap CSS есть:

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

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

Теги:
google-maps

11 ответов

178
Лучший ответ

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

#mapCanvas img {
  max-width: none;
}
  • 0
    Гениально, делает свое дело :-)
  • 0
    Спасибо, отлично работает!
Показать ещё 12 комментариев
84

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

#mapCanvas img { 
  max-width: none;
}

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

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

  • 0
    Да ! все кажется исправленным с этим ответом, помеченным как принятый выше. Благодарю.
  • 0
    Потрясающие. Спасибо!
Показать ещё 2 комментария
21

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

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

  • 0
    Я думаю, что только для изменения идентификатора необходимо в v2.2.2
  • 0
    я не могу найти такой идентификатор в файле CSS
Показать ещё 3 комментария
11

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

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

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

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

  • 0
    +1 это единственный ответ, который помог мне исправить странные элементы управления «зумом». (Bootstrap 2)
  • 0
    У меня тоже сработало. Хороший споттинг :)
Показать ещё 1 комментарий
3

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

2

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

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

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

.map_container img {
    max-width: none;
}

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

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

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

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

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

0

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

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

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

0

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

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}
  • 1
    Это сработало для меня. Если вы хотите кого-то проголосовать, вы должны хотя бы сказать, почему.
  • 0
    Это частично решило проблему. Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню