【コピペOK】Googleマップをレスポンシブで入れる方法

google

最近はワードプレスやbootstrapなど、PCとスマートフォンに対応した画面サイズで自動でコンテンツ表示が切り替わる「レスポンシブ」なサイトが多くなってきてます。

以前からよく使われている「googleマップ」を入れる需要も多いのですが、困ったことに普通にやっただけでなはレスポンシブの形で埋め込めることができないみたいです。

ちょっと面倒だな~と思って、ググるとやっぱりありましたw

Googleマップをレスポンシブで入れる方法

  1. 通常通り、掲載したい場所をGoogleマップで探す
  2. iframeコードをコピーして自分のサイトの入れたいところにペーストする

普通にhtmlソースをコピペするとこんな感じですよね。

 

上記の動画の手順でソース(iframe部分)をコピーし、以下のhtmlの該当部分にペースト。
cssも記載します。

[html title=”HTML”]
<div class="ggmap">iframeのコピーしたコード</div>
[/html]

[css title=”CSS”]
.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]

こちらの内容は以下サイトで詳しく紹介されてます。

入れる側の気持ちがわかっているかのように、CSSのソースもコピペするだけにしてくれてます。
ありがたいっす!!備忘録的に掲載しました。

あわせて読むと効果的な記事
[nlink url=”https://laplace.link/google/responsive-the-google-calendar/” title=”【コピペOK】Googleカレンダーをレスポンシブで入れる方法” excerpt=”Googleカレンダーもマップと同様に“サイトに入れるだけ”だったら、簡単に入れる事ができます。”]

参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法(参考)

エディタのように綺麗にソースコードを表示できるプラグイン – SyntaxHighlighter Evolved の使い方(参考)