Карты Google с Bootstrap не реагируют

Я использую bootstrap, и я встроил Google Maps API 3.

#map_canvas не реагирует; это фиксированная ширина.

Кроме того, если я использую height: auto и width: auto, карта не отображается на странице.

Почему?

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
#map_canvas {
   height: 400px;
    width: auto;
  }
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

Ответы

Ответ 1

ПЕРЕСМОТРЕННО: официальная почта устарела, поэтому я обновил свой ответ и улучшил код.

Следующий метод не требует загрузчика или любой другой структуры. Он может использоваться независимо, чтобы реагировать на любой контент. К родительскому элементу применяется дополнение, вычисляя aspect ratio. Затем дочерний элемент помещается сверху, используя абсолютное положение.

HTML:

<div class="iframe-container">
    <!-- embed code here -->
</div>

CSS:

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

В следующей "скрипке" есть примеры того, как сделать:

  • Отзывчивая карта Google
  • Отзывчивый OpenStreetMap
  • Отзывчивое видео Vimeo
  • Отзывчивое видео Youtube

Демо: http://jsfiddle.net/LHQQZ/135/

Ответ 2

Используется функция Bootstrap Отзывчивая вставка с фиксированным соотношением сторон 16/9:

<div class="embed-responsive embed-responsive-16by9">
    <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>

Ответ 4

Если кто-то еще посмотрит это, возникла такая проблема.

У меня был iframe whit openstreet map, и я не мог сделать его отзывчивым. Я, наконец, поставил "img-отзывчивый" класс, и все было хорошо.

<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>

Ответ 5

Чрезвычайно просто. Сделайте карту относительно высоты видового экрана с помощью CSS:

.map {
  height: 80vh;
}

Это указывает, что контейнер .map должен составлять 80% высоты окна просмотра.

Ответ 6

Вы можете дать классу span6 ширину и высоту, затем укажите map_canvas ширину и высоту 100%.

Ответ 7

Ответ Smartik работает хорошо. Я использую gmaps4rails gem и применил эти изменения к сгенерированному css следующим образом:

.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}

.gmaps4rails_map {
  display: block;
  height: 400px;
}

Затем добавили эти строки в мое представление:

<div class="map_container">
  <div id="map" class="gmaps4rails_map">
    <div id="map_canvas" class="span9">
      <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
    </div>
  </div> 
</div>

Ответ 8

<div class="map_container">
    <div id="map" class="gmaps4rails_map">
        <div id="map_canvas" class="span9">
            <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
        </div>
    </div>