Google 地图看起来有弹性

Question

您好，我正在将此 google documentation 实施到我的网站，但它看起来很奇怪且有弹性。如何使其正常但在其列中保持完整的宽度和高度。有什么解决办法吗？

目前，我的map inside flexbox column，对map生效了吗？

#map-canvas{
    height: 100%;
}

<div class="mdl-grid p-0">
  <div class="mdl-cell mdl-cell--6-col">
    <div id="map-canvas"></div>
  </div>
  <div class="mdl-cell mdl-cell--6-col">
  ...
  </div>
</div>

Answer 1

地图当前的屏幕宽度和高度为 100%。您需要将高度和宽度设置为宽度您的专栏。

#map-canvas{
    height: 30vh;
    width: 30vw;
}

另请查看 https://www.w3schools.com/cssref/css_units.asp 中的 vh 和 vw。这有助于将宽度和高度设置为设备的宽度和高度。

Answer 2

终于我遇到了问题，这是我的错。但也许这对未来有用

<div id="map-wrapper"> <!-- in this wrapper i put a style for images inside it -->
  <div class="mdl-grid p-0">
    <div class="mdl-cell mdl-cell--6-col">
      <div id="map-canvas"></div>
    </div>
    <div class="mdl-cell mdl-cell--6-col">
    ...
    </div>
  </div>
</div>

我在里面放了一个图片样式，#map-wrapper img{min-width: 740px} 所以这也会影响 iframe 地图中的所有图片，我认为地图只是一个 canvas

Google 地图看起来有弹性

Google Map looks stretchy

html

javascript

google-maps

google-maps-api-3

google-maps-markers