【レスポンシブ対応】HTMLへのGoogleMapの埋め込み方法！

静的なHTMLページに、動的なGoogleMapを読めこめることを知っていますか？

GoogleMapの埋め込みにAPIキーが必須になったというニュースが流れたことがありますがただ単純に埋め込むだけであれば、APIキー無しで簡単に埋め込めます。

まずは、Google マップを開きましょう

あとはコピーしたコードを埋め込めばHTMLページでGoogleMapを表示できます。

埋め込むやり方については、前半の「HTMLへのGoogleMapの埋め込み方法」と全く同じなので省略します。「HTMLへのGoogleMapの埋め込み方法」を読み飛ばして埋め込み方法が分からない方は先に記事の前半部分を読んでおいてください。

それでは本題ですが、GoogleMapで取得した埋め込みコードそのまま貼り付けると、レスポンシブサイトだと幅が大きすぎてはみ出てしまうことがあります。

ですので、レスポンシブ対応したい場合は以下のCSSを適用させてください。

単純に全てのiframeタグを使った埋め込みコードをレスポンシブ対応するのであれば上記CSSで対応できます。

GoogleMapの埋め込みコードのみレスポンシブ対応したい場合は以下のCSSを使ってください。

これで画面からGoogleMapがはみ出さなくなり、レスポンシブ対応ができるようになります。

ぜひお試しくださいませ。