最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。
以前からよく使われている「googleマップ」を入れる需要も多いのですが、困ったことに普通にやっただけでなはレスポンシブの形で埋め込めることができないみたいです。
ちょっと面倒だな~と思って、ググるとやっぱりありましたw
Googleマップをレスポンシブで入れる方法
- 通常通り、掲載したい場所をGoogleマップで探す
- iframeコードをコピーして自分のサイトの入れたいところにペーストする
普通にhtmlソースをコピペするとこんな感じですよね。
上記の動画の手順でソース(iframe部分)をコピーし、以下のhtmlの該当部分にペースト。
cssも記載します。
<div class="ggmap">iframeのコピーしたコード</div>
.ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
こちらの内容は以下サイトで詳しく紹介されてます。
入れる側の気持ちがわかっているかのように、CSSのソースもコピペするだけにしてくれてます。
ありがたいっす!!備忘録的に掲載しました。
下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法(参考)
エディタのように綺麗にソースコードを表示できるプラグイン – SyntaxHighlighter Evolved の使い方(参考)