Карта Google выглядит растянутой

Question

Здравствуйте, я внедряю эту документацию google на свой сайт, но она выглядит так странно и растянуто. Как сделать так, чтобы оно было нормальным, но оставалось в ширине и высоте в столбце. любое решение?

в настоящее время моя карта внутри столбца flexbox, влияет ли она на карту?

#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

наконец я столкнулся с проблемой, это была моя вина. но, может быть, это пригодится в будущем

<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, мне показалось, что эта карта - просто холст

Answer 2

Карта в настоящее время на 100% ширины и высоты экрана. Вы должны установить Высота и Ширина в ширину вашей колонки.

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

Также посмотрите на VH и VW на https://www.w3schools.com/cssref/css_units.asp. Это помогает ширине установки ширины и высоты устройства ширины и высоты.