ホームページやブログなどのWebサイトにグーグルマップを埋め込んでいるページを見かけます。
ページ内で地図を動かしたり、グーグルマップサイトへ移動できたり、とても便利ですよね。
今回はWebサイトにグーグルマップを埋め込む手順をご紹介します。
グーグルマップを埋め込んだ画面って？
Webサイトにグーグルマップが埋め込まれた画面は、例えばこんな感じです。
画面に埋め込まれたマップはそのページの中で拡大や縮小ができたり、別のタブでマップの画面が開いたりととても便利に使うことができます。
マップの中にある赤枠の部分は全てアクティブになっています。
このような便利なマップの埋め込みの手順をご紹介していきます。
埋め込みの手順
step.1
ここでは上野駅周辺のマップを埋め込む手順で説明していきます。
- ①まず検索バーに埋め込みたい場所を入力し、地図に表示します。
- ②「共有」ボタンを押します。
step.2
このような画面が出てきます。
- ①「地図を埋め込み」を押す
- ② 地図サイズを選択する
- ③「HTMLをコピー」を押してコードをコピーする
②のマップサイズは次のようになっています。
- 小・・・・・巾400×高300px
- 中・・・・・巾600×高450px
- 大・・・・・巾800×高600px
- カスタム・・サイズを自由に入力
step.3
ワードプレスの画面に移動し、マップを埋め込みたい投稿画面を開きます。
先ほどコピーしたコードをテキスト画面に貼り付けます。
※ビジュアル画面に貼り付けても画像は反映されません
※こちらの画面はアフィンガー５というテーマを使っているため、皆さんのエディターでテキスト画面を表示してください。
step.4
ビジュアル画面を押すと、マップが貼り付いていることが確認できます。
これで完成です。
まとめ
グーグルマップをWebサイトに貼り付ける手順をご紹介してきました。
ポイントは２つです。
- グーグルマップの「共有」ボタンを見つける
- エディターへの貼り付けはテキスト画面で
これでマップを貼り付けた便利なWebサイトの完成です。
どうもおつかれさまでした。