【コピペOK】GoogleMapの地図をスマホサイトに埋め込む方法

2016年7月29日 16時51分

googleマップはweb担当者にとってとてもありがたい存在ですね。

地図をホームページに掲載したいと思った瞬間に、簡単にホームページ内に導入できますからね。

・自分で地図を作らなくてよい
・地図が自動で最新版になってくれる
・スマホで使うと道案内までしてくれる
・埋め込みタグをＨＰに貼るだけで導入できる

といったメリットがあり、地図をＨＰに導入する人も多いのではないでしょうか。

また、この記事かいてる途中で分かったのですが、
ある地点から別の地点のルートまで表示してくれる機能までありました。

試しに舞浜駅からディズニーランドへの道のりを設置したサンプルがこちら

これを利用すると最寄り駅から自分お店までのルートを表示したまま、地図をＨＰに埋め込むことができてしまいますね。

これにはちょっと感動しました。

こんな便利なGoogleマップなんですが、１つ問題がありまして、Googleマップの埋め込みリンクがそのままではスマホ対応してないんですね。

googleマップの埋め込みタグをそのまま使う場合の問題点

Googleマップから取得したタグを、そのままホームページに張り付けた場合、埋め込みタグの横幅が固定されているため、どうしてもはみ出してしまうんですね。

ＰＣで記事からはみ出してしまった例

スマホで記事からはみ出してしまった例

でも大丈夫、タグをちょっと加工するだけで、あっという間に画面に収まります。

これを利用すれば、どちらかに合わせるのではなく、どんなデバイスで見た時でも横幅ぴったりになってくれます。

まずは、Googleマップを張り付ける作業のおさらいです。

１、まずは普通にGoogleマップをホームページに埋め込みます。

１、Googleマップにアクセスします。
→　Googleマップ

２、住所か場所を入力し検索します。
検索すると入力した場所が表示されます。

３、埋め込み用タグを取得します。

（１）共有というボタンを押します。
（２）埋め込みタブを押します。
（３）タグをクリックすると選択されるのでコピーします。

４、ホームページの地図を掲載したいページに埋め込みタグを張り付けます。

例）ワードプレスの編集画面の場合
（１）記事編集画面でテキストをクリックして
（２）投稿エリアにコピーしたタグを張り付けるだけです。

２、埋め込んだタグに1行追加します。

この1行をコピーしてGoogleマップのタグを張り付けたページ内に張り付けます。
張り付け箇所はタグ内であればどこでもよいですが、Googleマップのタグの上がおすすめです。

300の数字は縦幅なので自由な数字に変更して使ってください。
一般的に300であればＰＣとスマホで見た時両方対応する高さではないかと思います。

この方法はアメブロの最新エディタ（2016年7月現在）でも使えました。PC、スマホどちらも画面内に収まりました。
→　アメブロにGoogleマップが表示されるかのテスト

このタグを使うと以下のようなマップが完成します。

なお、このタグを張り付ける方法は縦幅が300と固定されてしまっていますので横幅のみ可変となります。
縦も可変にしたほうが、縦横比を保ったまま拡大縮小するので美しくしあがります。
縦横比を保ったまま表示する場合には以下CSSを使う方法がおすすめです。

３、以下のCSSを使うと縦横比を保ったまま縮小します。

この方法を行うと以下のようなメリットがあります。

（１）縦横比を保ったまま拡大縮小できる。
今回紹介する方法は、横と縦が「16対9」の比率と「4対3」の比率になります。

（２）この作業を行えばyoutube動画にも有効になる。

（３）CSSに一度追加するだけで今後アップ予定の地図・youtube動画にも適用される

といったものです。
特に、縦横比率を保ったまま拡大縮小すると、youtube動画を張り付けた時にきれいに見せることができます。

CSSを使うと以下のようなマップが完成します。16対９の表示サンプルです。

CSS版の利用方法

１、CSSの編集を開きます
基本的にはstyle.cssというファイルを別途作成するのですが、今回はワードプレスのCSS編集画面で解説をします。
（１）外観から
（２）テーマの編集を押して
（３）style.cssが選択されている状態で
（４）編集エリアを開きます。

２、以下のタグをコピペして保存してください

/*-------------------
Googleマップのレスポンシブ対応
---------------------*/
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 100%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video { 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

３、Googleマップの設置したページを開いて

ワードプレスの編集画面の場合記事編集画面で
（１）テキストをクリックして
（２）投稿エリアを開きます。

４、以下のタグを埋め込みタグの上下に追加します。

16対9の場合


Googleマップのタグ

４対３の場合


Googleマップのタグ

５、横幅にあったマップが表示されます。

なお、2回目以降は３～４の作業だけでＯＫです。

【コピペOK】GoogleMapの地図をスマホサイトに埋め込む方法