googleマップを埋め込む方法（アスペクト比制御）

googleマップをHTMLのコードに埋め込む際にアスペクト比を指定して制御する方法です。

コード

HTMLとCSSで実現可能です。

HTML

<div class="g-map">
  <iframe
    src="https://www.google.com/maps/embedpb=!1m18!1m12!1m3!1d3240.881123921605!2d139.77318147651175!3d35.67992897258753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188959cc2b8d99%3A0x40b84cbd2dfa9f63!2z44CSMTAzLTAwMjcg5p2x5Lqs6YO95Lit5aSu5Yy65pel5pys5qmL77yS5LiB55uu77yR77yW4oiS77yU!5e0!3m2!1sja!2sjp!4v1755067221929!5m2!1sja!2sjp"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

CSS

.g-map {
  text-align: center;
}

.g-map iframe {
  aspect-ratio: 400/300;
  width: 400px;
}

解説

アスペクト比を制御するために、埋め込み用のGoogleマップのコードからheightとwidthの値を削除して貼り付けます。

CSSではiframeにaspect-ratioを記載しています。

iframeのwrapeer要素にtext-align:center;はお好みでどうぞ。