ホーム » Googleマップウィジェットの使い方

Googleマップウィジェットの使い方

Googleマップウィジェットの使い方

所在地が分かる地図をページへ載せましょう。

このページでできること
住所の入力・ズーム・地図の高さ・場所の確認

画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や画像が異なります。

① 部品・画面を開く② 内容を設定③ 見た目を確認④ 保存

① 「Google マップ」を選ぶ

  1. 編集したいページを「Elementorで編集」で開きます。
  2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
  3. 新しく追加する場合は、左上の「+」を押し、検索欄に「Google マップ」と入力します。
  4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。
似た名前が複数ある場合、このページでは基本の「Google マップ」を使います。Atomic版や追加プラグインの同名部品とは設定が異なります。

開き方から確認したい場合:ページを作成・編集する

② 住所と地図の大きさを設定する

① 所在地 → ② ズーム → ③ 高さ(実際のElementor画面)123
① 所在地 → ② ズーム → ③ 高さ。画像を押すと拡大できます。
  1. 「所在地」に都道府県からの住所、または特定できる施設名を入力します。画面例は「東京駅」です。
  2. 入力欄の外をクリックし、右側の地図が変わるのを待ちます。
  3. 「ズーム」はまず15程度を試します。数字を上げると近く、下げると広い範囲が見えます。
  4. 「高さ」は例として300pxを入力します。
画面は操作例です。公開する際は、東京駅ではなくご自身の店舗・事業所の正確な住所へ置き換えてください。
成功の目印:地図の位置が入力した場所に変わり、周辺の道路などが見えるようになります。

③ 場所が正しいか確認する

  1. 地図のピンが実際の住所を指しているか確かめます。同名の店舗がある場合は住所を詳しく入力します。
  2. 駅や目印が分かるようにズームを調整します。
  3. 地図の近くに、住所を文章でも書きます。建物名や階数もあると親切です。
  4. 公開ページで地図を開き、拡大・縮小などの操作を確認します。
地図の下に添える文章の例

所在地:○○県○○市○○1-2-3 ○○ビル2階
アクセス:○○駅から徒歩5分
※ご自身の住所・経路に置き換えてください。

スマホで地図の高さを確認するための切り替え位置(共通例)(実際のElementor画面)1
スマホで地図の高さを確認するための切り替え位置(共通例)。画像を押すと拡大できます。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

  • ピンが正しい場所にある。
  • スマホで地図が高すぎたり小さすぎたりしない。
  • 住所を文章でも読める。

スマホ表示の詳しい調整方法下書き保存・公開・元に戻す手順

うまくいかないとき

困ったこと 確認するところ
別の場所が表示される 施設名だけでなく、都道府県・市区町村・番地まで入力します。
地図が表示されない 通信状況、ブラウザのブロック、画面に出たエラー文を確認します。API設定を求められた場合は、管理者へエラー文とURLを伝えてください。

画面の表示はバージョンや設定によって異なる場合があります。


← Elementor使い方マニュアルの目次へ