お店やオフィスの場所を伝えたい時、住所を文字で書くだけより、地図をそのまま載せたほうが分かりやすくなります。
Googleマップには、コードをコピーして貼り付けるだけでサイトに地図を表示できる「埋め込み」機能があります。
ただ、そのまま貼り付けただけだと、スマホで見た時に地図が画面からはみ出してしまうことがあります。
この記事では、埋め込みコードの取得方法から、スマホでも崩れないレスポンシブ対応、地図が表示されない時の対処法まで解説します。
WordPressサイトへの貼り付け方も、これ1本でまるごとわかります。
Googleマップの埋め込みとは？できることと向いているケース
Googleマップの埋め込みは、地図をHTMLコードとしてサイトに直接表示できる機能です。
APIキーの取得や料金の登録なしに、無料で使えるのが大きな特徴です。
お店やオフィスの所在地を紹介したいコーポレートサイト、来店のアクセス案内など、地図を1つだけ表示したい場面に向いています。
ピンの色を変えたり、複数の店舗をまとめて表示したりといった細かなカスタマイズをしたい場合は、Googleマイマップで作った地図を埋め込む方法もあります。
地図を埋め込むのに、お金がかかったりしないの？
埋め込みコードを使う方法なら、無料でできるよ。APIキーの登録も必要ないんだ。
Googleマップの埋め込みは、APIキーの登録なしに無料で利用できる。複数店舗を1つの地図にまとめたい場合は、マイマップを使う方法もある。
埋め込みコードを取得する手順
パソコンでGoogleマップを開き、検索窓に表示したい場所の住所や店舗名を入力します。
場所が表示されたら、左側のパネルにある「共有」をクリックします。
表示されたウィンドウの中から「地図を埋め込む」のタブを選びます。地図のサイズを「小」「中」「大」「カスタムサイズ」から選び、「HTMLをコピー」をクリックすれば、埋め込み用のコードが取得できます。
この時点で、サイトに貼り付ける準備が整います。
コードって、どうやって手に入れるの？
場所を検索して、「共有」から「地図を埋め込む」を選ぶんだ。「HTMLをコピー」を押せば、コードが取得できるよ。
埋め込みコードは、場所の検索、共有、地図を埋め込む、HTMLをコピーの順に進めて取得する。サイズはあらかじめ選べる。
サイトにコードを貼り付ける方法（WordPress・HTML）
コピーしたコードは、iframeタグと呼ばれる形式になっています。
通常のHTMLサイトであれば、表示したい場所にそのままコードを貼り付ければ地図が表示されます。
WordPressのブロックエディタを使っている場合は、「カスタムHTML」ブロックを追加し、そこにコードを貼り付けます。
貼り付けたら、実際にページを開いて、意図した場所に地図が表示されているかを確認しましょう。
先ほどの広島城だと、このように表示されます。
WordPressだと、どこに貼り付ければいいの？
「カスタムHTML」というブロックを追加して、そこにコードを貼り付けるんだ。貼り付けたら、実際のページで表示を確認してね。
貼り付け先は、通常のHTMLサイトなら表示したい場所、WordPressならカスタムHTMLブロックである。貼り付け後は、表示の確認が必要である。
スマホでも崩れない｜レスポンシブ対応のコツ
Googleマップの埋め込みコードは、初期状態では横幅と高さが固定された数値になっています。
そのままスマホで開くと、地図が画面の外にはみ出したり、横に長くなりすぎたりすることがあります。
対処法は、iframeを囲む親要素に、高さをパディングの割合で指定するCSSを使う方法です。
親要素にposition: relativeとpadding-bottomを指定し、中のiframeをposition: absoluteで重ねると、画面幅に合わせて地図が伸び縮みするようになります。
スマホで見たら、地図がはみ出しちゃったよ…
それは、コードのサイズが固定されているからなんだ。CSSで画面幅に合わせて伸び縮みするように調整できるよ。
埋め込みコードは初期状態で固定サイズのため、スマホでは崩れやすい。親要素へのCSS指定によって、画面幅に応じて伸び縮みする表示にできる。
地図のサイズと位置を調整する方法
「地図を埋め込む」の画面では、あらかじめ「小」「中」「大」「カスタムサイズ」の4種類からサイズを選べます。
カスタムサイズを選ぶと、横幅と高さの数値を自分で指定できます。
取得したコード内の width と height の数値を、あとから直接書き換えることも可能です。
地図の中心位置やズームの度合いは、コードを取得する前の画面で、あらかじめ表示したい状態に調整しておく必要があります。
地図の大きさって、あとから変えられるの？
コード内のwidthとheightの数値を書き換えれば、あとからでも調整できるよ。中心位置は、取得前に地図側で決めておいてね。
サイズは、取得時のカスタムサイズ指定と、コード内の数値の書き換えの両方で調整できる。中心位置とズームは、コード取得前に決めておく必要がある。
複数の店舗をまとめて表示する方法
通常の埋め込みコードは、1つの場所につき1つの地図しか表示できません。
複数の店舗をまとめて1つの地図に表示したい場合は、Googleマイマップを使います。
マイマップで各店舗をピンとして登録した地図を作り、その地図名の下にある「共有」から、同じようにiframe形式のHTMLコードを取得します。
取得したコードは、通常の埋め込みコードと同じ方法でサイトに貼り付けられます。
Googleマイマップの解説はこちらから↓
うちは店舗がいくつかあるんだけど、まとめて載せられる？
マイマップで各店舗をピンにしておけば、まとめて1つの地図として埋め込めるよ。取得の手順は、通常の埋め込みとほぼ同じなんだ。
複数店舗の表示には、マイマップで作成した地図を使う。コードの取得と貼り付けの流れは、通常の埋め込みと同様である。
地図が表示されない・反映されない時の対処法
貼り付けたのに地図が表示されない時は、コードが途中で切れていないかを確認します。
コピーの際に一部の文字が抜けると、正しく表示されなくなります。
地図の内容を編集した直後や、時間が経ってから開いた場合は、古いコードが無効になっていることがあります。
その場合は、Googleマップの「共有」から、コードをあらためて取得し直しましょう。
WordPressでは、貼り付けたブロックの種類が正しいかも、あわせて確認してください。
コードを貼ったのに、地図が出てこないよ…
コードが途中で切れてないか、まず確認してみて。それでもダメなら、コードを取得し直すと直ることが多いよ。
表示されない原因は、コードの欠落や、古いコードの無効化であることが多い。改善しない場合は、コードを取得し直すのが確実である。
Googleマップ以外の選択肢｜マイマップの活用
店舗ごとにピンの色を変えたい、道順を一緒に見せたいといった細かな要望がある場合は、マイマップを使う方法が向いています。
マイマップでは、レイヤ分けや色分け、ルートの保存ができ、それらを反映した状態で埋め込めます。
ただし、マイマップの地図を埋め込むには、地図を「公開」の状態にしておく必要があります。
社内向けなど、公開したくない地図の場合は、通常の埋め込みコードの利用が安全です。
ピンの色を変えたりもしたいんだけど、できる？
それならマイマップがおすすめだよ。ただ、埋め込むには地図を「公開」にする必要があるから、そこだけ気をつけてね。
細かなカスタマイズをしたい場合は、マイマップの利用が向いている。マイマップを埋め込むには、地図の公開設定が前提となる。
埋め込み時に気をつけたいこと
地図を埋め込んだページは、表示のたびにGoogleのサーバーと通信するため、ページの読み込み速度に多少影響します。
ページの下部など、最初に読み込む必要のない位置に配置すると、体感速度への影響を抑えられます。
個人の自宅などプライバシーに関わる場所を埋め込む際は、意図した範囲だけが表示されているかを、公開前に必ず確認しましょう。
サイトのデザインに合わせて、地図の周囲に余白や枠線を加えると、見た目もなじみやすくなります。
埋め込むと、サイトが重くなったりしない？
多少の影響はあるから、ページの下のほうに置くのがおすすめだよ。表示範囲も、公開前に確認しておこう。
埋め込みはページの読み込みに多少影響するため、配置位置を工夫するとよい。プライバシーに関わる場所は、表示範囲の確認が必要である。
まとめ｜Googleマップ埋め込みの手順早見表
| やりたいこと | 操作 | ポイント |
|---|---|---|
| コードを取得する | 共有→地図を埋め込む→HTMLをコピー | サイズは取得前に選べる |
| サイトに貼る | HTMLに直接貼る、またはカスタムHTMLブロック | 貼り付け後に表示を確認 |
| スマホで崩れる | 親要素にCSSでレスポンシブ対応 | padding-bottomで高さを指定 |
| 複数店舗を表示する | マイマップの地図を埋め込む | 地図を公開にする必要がある |
| 表示されない | コードの欠落確認、再取得 | 編集直後は古いコードが無効になることも |
これで僕のサイトにも、お店の地図を載せられそうだよ！
うん、まずは埋め込んでみて、スマホでも崩れずに見えるか確認してね。表示されない時は、コードの取得からやり直すと解決しやすいよ。
埋め込みは、コードの取得と貼り付けだけで完了する手軽な機能である。スマホでの見え方は、CSSでの調整によって整えられる。
