あわせて読みたい
【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！
Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレスポンシブに対応させる方法」をやっていきたいと思います。
この記事を書いた人
- フリーランスWEBクリエイターとして10年の活動実績。WEB制作歴トータル17年。
- 要件定義からデザイン・コーディングまで全て担当。
- Webサイト、LPの制作数、延べ100サイト以上。
- 個人での売上1300万円超えを機に法人化
- 現在は株式会社Spring DAY代表、兼クリエイティブディレクターとして現役活動中
目次
まずはGoogleマップを埋め込む
ご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。
Googleマップにアクセスします。
https://www.google.co.jp/maps/
画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。
そして同じく左のメニューにある「共有」をクリックします。
するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。
iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサイズはCSSで指定しますので特に何も指定しません。
そして、表示したいところにiframeタグを貼り付けると下のように表示されます。簡単ですね。
