t's space.

GoogleMapのiframeではみ出る問題を解決する

GoogleMapのiFrameを貼り付ける際に、このようなトラブルが起きたことは無いでしょうか。

See the Pen
GoogleMap iframe
by tk96 (@tk96)
on CodePen.

“BOX”の中にGoogleMapを埋め込むと、BOXからはみ出てしまう・・・ということがあると思います。

それを解決する方法があるのでご紹介していきます。

解決方法

まずは、iframeのコードを見てみましょう。

<iframe src="URL省略" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="">
</iframe>

iframe内にある、widthとheightの値を100%にしましょう。

<iframe src="URL省略" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="">
</iframe>

これだけで完了です。

See the Pen
GoogleMap iframe New
by tk96 (@tk96)
on CodePen.


このように、はみ出ること無くBOX内に収まっていると思います。

ちなみに、レスポンシブ対応するときは、widthのみを100%にすることで可能となっております。
更にYouTube等のiFrameにも対応しております。
みなさんも困ったら是非やってみてください。

Comment