【コピペOK】GoogleMapのレスポンシブ化（YoutubeもOK）

2019年4月15日

ホームページを作る際、必ずと言っていいほどGoogleMapを組み込むかと思います。

しかし、2018年より今まで無料で利用できていた、GoogleMapAPIが有料化しました。

それからGoogleMapを埋め込むように変えた方も多いのではないでしょうか。

私も、その波をうけて組み込みに変えたものです。

その際に、レスポンシブ対応として使ったソースを記載します。

HTML

<div class="google-map">
  iframeのコピーしたコード
</div>

CSS

.google-map {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 高さはここで調整してください */
overflow: hidden;
}
.google-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

css