google

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

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

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

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

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

  1. 通常通り、掲載したい場所をGoogleマップで探す
  2. 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】Googleカレンダーをレスポンシブで入れる方法
【コピペOK】Googleカレンダーをレスポンシブで入れる方法
Googleカレンダーもマップと同様に“サイトに入れるだけ”だったら、簡単に入れる事ができます。
2016-02-20 14:19
参考＆Special Thanks

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

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

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

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。

NEW POSTこのライターの最新記事