48

私はブートストラップを使用しており、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>
4

11 に答える 11

100

改訂: 公式投稿は古くなっているため、回答を更新し、コードを改善しました。

次のメソッドは、ブートストラップやその他のフレームワークを必要としません。独立して使用して、コンテンツをレスポンシブにすることができます。親要素には、 を計算してパディングが適用されます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/

于 2013-03-27T20:39:41.180 に答える
9

非常にシンプルです。CSS を使用して、ビューポートの高さに相対的なマップを作成します。

.map {
  height: 80vh;
}

これは、.map コンテナーがビューポートの高さの 80% でな​​ければならないことを指定します。

于 2015-09-30T08:09:48.367 に答える
2

2021年09月

質問されてから8年が経ちました。
まだ解決策を探していて見つからない場合は、こちらをご覧ください。

Boostrap 5 (テスト済みで動作)

width="100%"Google マップに追加iframe

<div class="row">
    <div class="col-6">
        <iframe src="SOURCE" width="100%" OTHER_ATTRIBUTES></iframe>
    </div>
</div>
于 2021-09-01T05:07:46.030 に答える
0

span6クラスに幅と高さを指定してからmap_canvas、幅と高さを指定できます100%。

于 2013-03-27T20:29:08.453 に答える
0

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>
于 2013-04-10T15:44:07.407 に答える