ホームページビルダー17でGoogleマップの挿入

ホームページで今や会社やお店の地図は必須です。そこでWordPressサイトの『アクセス』のページにGoogleマップを挿入する方法を調べてみたいと思います。

1. ホームページビルダー17を起動し、『WordPressページを開く』をクリックします。編集したいサイトを選択し、『開く』をクリックします。編集したいタイトル『アクセス』をダブルクリックして開きます。

2. 『アクセス』のページが開いたら、①『地図』と書かれている灰色の枠をクリックします。左にある簡単ナビメニューの下から2番目(カレンダーっぽいアイコン)の②『その他の挿入』をクリックし、③『Googleマップの挿入』をクリックします。

3. 地図の挿入(Googleマップ)ダイアログが開いたら①ズームレベルを15~18あたりの数字に指定して、サイトに表示したい②地図の大きさを指定したら、③更新をクリックします。④住所を入力して、⑤検索をクリックすると、周辺の地図が表示されますので、⑥詳細設定をクリックします。

4. ①『手動設定』をクリックして、マーカーの横の②『追加』ボタンをクリックします。

5. ①マーカー名を記入したら、必要な方は、②詳細ウインドウにチェックを入れ③ウインドウの出現方法を選択し、④表示する内容を記入したら、⑤OKをクリックします。

6. 『地図の詳細』ダイアログに戻りますので、他に設定変更がなければOKをクリックします。

7. 最後に、『地図の挿入』ダイアログに戻ったら、地図内をドラッグして、見やすい位置(駅などの目印と目的地の両方が分かり易い位置)に修正したら、OKをクリックします。

8. 画像の置き換えを確認するダイアログが表示されたらOKをクリックします。下のような画像が挿入されたらOKです。ホームページビルダーの『ページ編集』の画面では実際の地図は表示されません。

9. ①プレビューをクリックして、表示された地図のマーカーに②カーソルを当ててウインドウが表示されるのを確認します。

10. ちょっと地図が縦長すぎました修正したいと思います。①ページ編集をクリックして、地図の表示される箇所を②右クリックして、③マップの編集をクリックします。

11. ①高さを修正し、②更新ボタンをクリックしたら、③地図全体を確認します。最後に④地図内をドラッグして表示位置を微調整したら⑤OKをクリックします。

12. 上書き保存して、サイトの公開をクリックすればGoogleマップの挿入は完成です。何度も言うようにデータの転送が終わったら、必ずWordPressのhpbダッシュボードでデータを反映させて下さい。

マーカーの位置がずれている場合

13. 住所で地図検索したときにマーカーの位置がずれている場合があります。マーカーの位置を修正する方法を記述しておきます。

14. マップの編集で地図の挿入ダイアログに戻ったら、詳細設定⇛マーカー名の選択⇛編集とクリックして、マーカーの設定ダイアログを開きます。

15. ①地図内をドラッグして、マーカーを表示したい位置を真ん中にします。②ズームインボタン(+)をクリックして、地図を拡大します。③地図の中心位置を取得をクリックします。

16. このドラッグ⇛とズームイン⇛地図の中心位置を取得ボタンを交互に繰り返しながら、目的の位置にマーカーが移動できたら、OKをクリックします。

これで、正確にマーカーの位置を修正できます。本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ