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

147

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

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

В Bootstrap CSS есть:

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

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

google-maps twitter-bootstrap css

— raklos
источник

ответ здесь: github.com/zurb/foundation/issues/26

— raklos

187

С Bootstrap 2.0 это, похоже, помогло:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
источник

6

Не забудьте добавить, #mapCanvas img { width: auto; display:inline; }как упомянуто ниже @nodrog

— jlb

Из примечаний к выпуску Bootstrap 2.0.3: «Исправлена регрессия в поддержке адаптивных изображений с 2.0.1. Мы повторно добавили max-width: 100%; к изображениям по умолчанию. Мы удалили его в нашем последнем выпуске, так как у нас были люди жаловаться на интеграцию с Google Maps и другие проекты, но сейчас мы придерживаемся другой позиции в отношении этих вещей и потребуем, чтобы разработчики сделали эти поправки с их стороны ».

— kevinwmerritt

К вашему сведению: примечания к выпуску Bootstrap 2.0.4: «Добавлен специальный CSS для предотвращения максимальной ширины: 100%; на изображениях не возникает путаница при отображении Google Maps».

— Kevinwmerritt

Странно, что они наконец решили жестко закодировать идентификатор, а не использовать вместо него класс

— zerkms

1

#mapCanvas не работает для меня. Я просто использовал свой класс .map, который я использовал в качестве контейнера карт Google, и он добился цели. СПАСИБО!

— Фидо

80

Существует также проблема с выпадающими селекторами для ландшафта и оверлеев, добавление обоих из них устранит проблемы ...

#mapCanvas img { 
  max-width: none;
}

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

Второй стиль будет иметь некоторые другие проблемы с рамкой terrain и overlay в некоторых браузерах.

— nodrog
источник

Да ! все кажется исправленным с этим ответом, помеченным как принятый выше. Спасибо.

— Мат

работает как шарм в Firefox 17, но не в Chrome 23. Не знаю почему, но я нашел решение, просто добавьте это:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Ты гений. Огромное спасибо. Это сводило меня с ума :-)

— Медведь

20

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

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

— robd
источник

Я думаю, что только для изменения идентификатора необходимо в v2.2.2

— jacktrades

я не могу найти такой идентификатор в файле CSS

— Мухаймин

@robd: Просто для любопытства, почему он не будет работать, кроме map_canvas.

— ArunRaj

@ArunRaj, потому что исправление в начальной загрузке жестко закодировано с идентификатором #map_canvas (см. Связанный коммит). В любом случае, этот ответ, вероятно, устарел, учитывая, что ему почти 2 года.

— Робд

11

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

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

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

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

— Кристофер Доу
источник

+1 это единственный ответ, который помог мне исправить странные элементы управления «зумом». (Bootstrap 2)

— Philfreo

У меня тоже сработало. Хорошее замечание :)

— Jeje

Спасибо, у меня тоже сработало. Единственный ответ, который помог мне исправить странные элементы управления «зумом». (с Фондом 5)

— Штеффи

3

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

— Pawpoint
источник

2

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

.map_container img {
    max-width: none;
}

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

— Сэм Джозеф
источник

2

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

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

— Бенджамин Крузье
источник

1

последняя версия Twitter начальной загрузки 2.0.4 включает это исправление напрямую.

Если вы помещаете содержимое в a (div class = "container"), как на демонстрационной странице начальной загрузки Twitter, вы должны добавить style = "height: 100%"

— redochka
источник

1

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

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

— tempranova
источник

0

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

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

— Redtopia
источник

1

Это сработало для меня. Если ты собираешься кого-то проголосовать, ты должен хотя бы сказать, почему.

— Редтопия

0

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

для меня max-height: Наследовать работал .....

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

— user2060451
источник