店舗の場所だけでなく、離れた駐車場や最寄り駅も一緒に案内したい。WordPressのアクセスページに地図を載せるとき、複数の場所をどうまとめるか迷うことがあります。
Googleマイマップなら、一枚の地図に複数のピンを置き、埋め込み用のコードでWordPressに表示できます。作業の要点は、地図の閲覧設定・貼り付けるブロック・表示する幅の3つです。
この記事では、店舗・駐車場・最寄り駅を案内する例で、ピンの準備からカスタムHTMLへの貼り付け、スマートフォンでの確認までを説明します。操作はPCブラウザー版のマイマップと、WordPressのブロックエディターを使います。
店舗・駐車場・最寄り駅を一枚で案内する
たとえば「店舗入口」「お客様用駐車場」「最寄り駅の出口」の3点を載せると、車で来る人も電車で来る人も、自分に必要な場所を同じ地図で探せます。下の図は説明用の配置例で、実在する店舗の地図ではありません。
店舗一か所を示すだけなら、通常のGoogleマップの埋め込みで足りる場合もあります。複数のピンに独自の名前や補足を付け、一緒に見せたいときにマイマップを使いましょう。常設のアクセス案内は、店舗情報と合わせて固定ページに置くと管理しやすくなります。
| ピンの例 | 名前で伝えること | 説明に添えること |
|---|---|---|
| 店舗入口 | 店名＋入口 | 建物名・階数、入る側 |
| お客様用駐車場 | 店舗用と分かる名称 | 入口、利用できる区画 |
| 最寄り駅の出口 | 駅名＋出口名 | 店へ向かう出口の目印 |
駐車場は敷地の中心だけでなく、車が入れる入口を確かめて案内します。色分けだけに頼らず、ピンの名前にも「店舗」「駐車場」「出口」と書くと、一覧から探す人にも役割が伝わります。
マイマップに複数のピンを追加する
まずは店舗・駐車場・最寄り駅を同じ地図に登録します。レイヤは、ピンをまとめるグループです。店舗周辺の数点を案内するだけなら、一つのレイヤから始められます。店舗が複数あるなど、表示を分けたい場合にレイヤを追加してください。
PCでGoogleマイマップを開き、「新しい地図を作成」から始めます。すでに地図がある場合は、その地図を開きます。「無題の地図」を選び、店名を含む案内用の名前にして保存します。
上部の検索欄に店舗名や住所を入力し、正しい候補を選びます。位置と住所を確認したら、吹き出しの「地図に追加」を選びます。駐車場や最寄り駅も同じ操作で追加します。
検索結果の例です。検索しただけでは地図への登録は完了していません。追加後、左側のレイヤ内にその場所が並んだことを確認します。
必要な場所をすべて検索で追加できたら、STEP 3は飛ばして、STEP 4の確認へ進みます。同じ場所にもう一度マーカーを置く必要はありません。
店舗専用の駐車場などが検索に出ない場合に行います。地図を十分に拡大し、検索欄の下にあるピン形の「マーカーを追加」を選びます。続いてピンを入れるレイヤを選び、地図上の位置をクリックします。名前と説明を入力し、「保存」を選んでください。
枠で示したピン形のボタンが「マーカーを追加」です。検索結果の「地図に追加」とは別の操作です。
左側のレイヤに必要な場所が並んだことを確認し、ピンを一つずつ開いて名前・説明・位置を確かめます。道路や隣の敷地にずれていないか、店舗の案内情報と照合してください。名前・説明の修正は鉛筆の編集アイコンを選び、変更後に保存します。位置を直すときは、地図上のピンをドラッグします。必要に応じて色・アイコンも分けます。
公式の操作はGoogleヘルプ「地図に場所を追加する」でも確認できます。
閲覧設定を確認して埋め込みコードを取得する
一般のお客様向けの地図は、作成者以外も閲覧できる必要があります。地図の左側にある「共有」を開き、「このリンクを知っている人なら誰でも表示できる」を確認します。「ドライブで共有」を開く場合は、一般的なアクセスを「リンクを知っている全員」、権限を「閲覧者」にします。
公開してよい店舗情報だけを載せた地図で設定してください。変更を確定したら共有画面を開き直し、意図した範囲になっているか確認します。閲覧用の埋め込みに、来訪者の編集権限は必要ありません。
「インターネットで検索しているユーザーにこの地図を公開する」は、検索で見つけてもらうための別の設定です。リンクで閲覧できることと区別して判断します。共有相手に開けない場合の詳しい切り分けは、マイマップの公開範囲・アカウント・閲覧権限の確認順を参照してください。
埋め込みコードは、別のページを枠の中に表示する「iframe（アイフレーム）」というHTMLです。共有URLは地図を開くリンクに、埋め込みコードはWordPress本文の中に地図を表示するために使います。
共有画面を閉じ、地図名の横にある縦3点のメニューから「自分のサイトに埋め込む」を選びます。
「この地図を埋め込む」に表示された埋め込みコードを全体コピーします。先頭の <iframe から末尾の </iframe> までが対象です。ブラウザーのアドレスバーや共有画面のURLだけをコピーする操作とは異なります。
枠内を全体コピーします。画像では地図固有のIDを伏せています。プロフィール情報を含める項目が表示された場合は、掲載してよい内容か確認してからコピーしてください。
埋め込みの入口と公開条件は、Googleヘルプ「地図の共有、ダウンロード、印刷」にも案内されています。
WordPressのカスタムHTMLに貼り付ける
WordPressで地図を載せたい固定ページ、または投稿を開きます。以下はブロックエディターの操作です。SWELLでも、地図の貼り付けにはWordPress標準のカスタムHTMLブロックを使えます。 以下の画面とボタン名はWordPress 7.1.2で確認しています。バージョンや権限により表示は異なります。
地図を置く位置の「＋」から「カスタムHTML」を検索して追加します。新しい段落で /html と入力して選ぶ方法でも構いません。「コード」はコードを文章として見せるためのブロックなので、地図の表示にはカスタムHTMLを使います。
新しく追加したブロックに「HTMLを編集」が表示されたら開き、HTML欄へコピーしたコードを貼り付けます。すでにあるブロックを直す場合は、そのブロックを選び、上部のツールバーの「コードを編集」を開きます。コード欄が直接表示される画面では、その欄に入力してください。CSSやJavaScriptのタブがあっても、今回使うのはHTML欄です。
コピーしたコード内の width=”640″ を width="100%" に変更します。高さは、まず height="400" を目安にします。元の値が異なる場合も、widthとheightの値を確認して変更してください。
コードを見やすく改行した例です。地図固有のIDは伏せています。説明用に既存の施設地図で表示を確認しており、店舗の実在例ではありません。
別画面でHTMLを編集した場合は、その画面の「更新」を選んでブロックへ反映します。次にWordPressの「下書き保存」など、現在の投稿状態に合う保存操作を行い、ページのプレビューを開きます。地図名とピンが表示されることを確認してください。
WordPressの下書きプレビューをスマホ幅で表示した完成例です。説明用の既存施設地図を使っています。地図名とピンが表示されるか、ご自身の地図で確認してください。実スマートフォンの画面ではありません。
変更するのは表示サイズです。src=”…” の中の地図URLは、自分がコピーした値を保持してください。下のコードは変更箇所だけを示したものなので、これだけを貼り付けても地図にはなりません。
width="100%"
height="400"width=”100%” は、地図を置いた本文や列の幅に合わせる指定です。画面全体の幅という意味ではありません。height=”400″ は高さ400ピクセルの指定で、地図の範囲が窮屈なら数値を増やします。見やすさはピンの距離やページのレイアウトによって変わるため、400を唯一の正解とは考えなくて大丈夫です。
iframeに内容を説明する title 属性がない場合は、title="店舗・駐車場の案内地図" のように補うと、読み上げで枠の用途を伝えられます。ブロックの追加方法はWordPress公式のカスタムHTMLの説明でも確認できます。
スマホで見切れ・ピン・大きな地図を開くリンクを確認する
PCで地図が表示されても、そのままスマートフォンで使いやすいとは限りません。まず狭い幅のプレビューで見た目を確認し、仕上げにスマートフォンのブラウザーで操作します。
- ページ全体が横にはみ出していないか。地図の左右が本文の幅に収まっているか。
- 店舗・駐車場・最寄り駅を確認できるか。必要なピンが端で切れていないか。
- ピンをタップして名前と説明を読めるか。地図の拡大・移動とページのスクロールを使い分けられるか。
- 地図の下に置いた「店舗・駐車場の地図を大きく開く」などのリンクから、同じ地図へ移動できるか。
widthを100%にしても、複数のピンが必ず見やすい大きさになるわけではありません。広い範囲のピンを一枚に入れると、地図が縮小されます。高さ、地図の表示範囲、案内するピンの数を分けて見直しましょう。
大きな地図を開くリンクは、次の手順で付けられます。
マイマップの左側にある「共有」を開き、共有用のURLをコピーします。ここで使うのは、先ほどのiframeコードではなく、地図を開くためのURLです。
WordPressで地図の下に段落を追加し、「店舗・駐車場の地図を大きく開く」と入力します。その文字を選択してリンクのアイコンを押し、コピーしたURLを貼り付けて確定します。ページを保存し、プレビューでリンクを開いて、埋め込んだものと同じ地図へ移動できれば完了です。
地図の下に、住所と駐車場入口の説明を短い文章でも残します。地図を見られないときにも、どこへ向かえばよいかが伝わります。小さい埋め込み枠だけで、すべての案内を済ませようとしないのが実務上のポイントです。
一般公開するページは、公開後に、GoogleアカウントとWordPressへログインしていないブラウザーでも開きます。地図が表示され、目的のピンを確認できれば閲覧確認は完了です。下書きのプレビューにはWordPressのログインが必要な場合があるため、公開前は地図の共有URLをログインしていない環境で確認し、ページ全体は公開後に再確認してください。
表示されない・はみ出すときの確認先
うまく表示されない場合は、次の表で症状を分けます。原因を確かめる前に、地図の編集権限を広げたり、WordPressの保護機能を一括で無効にしたりする必要はありません。
| 症状 | 確認する場所 | 次に行うこと |
|---|---|---|
| URLやコードが文字で出る | WordPressのブロック種類 | カスタムHTMLにiframe全体を貼る |
| 権限の案内が出る | マイマップの共有設定 | 一般の閲覧者が地図を開けるか確認 |
| スマホで横にはみ出す | iframeのwidthと地図を置いた本文や列の幅 | widthを100%にし、ページ全体を再確認 |
| 保存するとiframeが消える | 投稿者の権限・サイト側の制限 | 管理者に埋め込み可否を確認 |
カスタムHTMLに貼った直後は表示されても、保存時に利用者の権限によってiframeが取り除かれる場合があります。保存後に編集画面を開き直し、コードが残っているか確認してください。権限による扱いと新しい編集画面については、WordPress公式のCustom HTML block（英語）に説明があります。日本語ページにはこの詳細がないため、ここでは英語の公式情報を案内しています。
地図そのものを開けるのに一部のピンだけ見えないときは、正しい地図を埋め込んでいるか、ピンがレイヤ内に保存されているか、対象レイヤが表示されているかを確認します。共有の問題とピンの表示の問題を分けてください。
よくある質問
- プラグインやAPIキーは必要ですか？
-
この記事のように、マイマップが発行するiframeをWordPressのカスタムHTMLへ貼る方法では、地図用プラグインやAPIキーを用意する手順はありません。サイト側でiframeが許可されていることは必要です。
- 地図を修正するたびにコードを貼り直しますか？
-
同じマイマップのピンや説明を修正した場合は、同じ地図を参照する埋め込みにも変更が反映されます。ページを読み直して確かめてください。別の地図へ差し替える場合や、表示する幅・高さを変える場合は、WordPress側のコードを編集します。
- スマートフォンだけ高さを変える必要はありますか？
-
最初から端末別の設定を増やす必要はありません。まず幅100%と一定の高さで確認し、ピンが見づらい、余白が大きいなどの問題が残る場合に、テーマ側のCSS調整を検討します。
- WordPressをパスワード保護すれば、地図も非公開になりますか？
-
WordPressのページとマイマップの共有範囲は別です。リンクを知っている人が見られる地図は、ページのパスワードとは別に閲覧できます。限られた人だけに見せたい情報は、一般のお客様向けの地図に含めないでください。
まとめ
GoogleマイマップをWordPressに埋め込むときは、店舗・駐車場・最寄り駅のピンを準備し、閲覧設定を確認してからiframeコードを取得します。貼り付け先はカスタムHTMLブロックです。
幅100%で本文に収め、スマートフォンでピンと操作を確認すれば、貼り付けて終わりにしない案内地図になります。住所の文章と、大きな地図で開くリンクも添えて、来店する人が必要な情報へたどり着ける形に整えましょう。
