Googleマップをレスポンシブに対応する方法

Googleマップを埋め込む

はじめにGoogleマップをサイトに埋め込みむ方法を確認しましょう！
Googleマップにアクセスします

https://www.google.co.jp/maps/

画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。
そして同じく左のメニューにある「共有」をクリックします

こんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックし、表示が変わりiframeのタグが出てきたらコピーします

iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサイズはCSSで指定しますので特に何も指定しません
そして、表示したいところにiframeタグを貼り付けると下のように表示されます。簡単ですね。