今回は、google mapをブログやホームページに載せる方法を紹介したいと思います。
google mapを貼るとは？
お店のサイトを見ているとお店の住所と共にお店の位置を示したgoogle mapが掲載されていることがあると思います。あれは、投稿者がgoogle mapのリンクを貼りつけるという作業を行って表示されています。
これだけ聞くと作業が難しそうと感じるかもしれませんが、以下に図を交えながら解説を行っていきますので簡単に作成することができますよ。
google mapのページを開こう
まずは、google mapのサイトを開くところから始めましょう。
Microsoft edgeやgoogle chrome等のインターネットブラウザで「google map」と検索すると先頭に「Google Maps」または「Google マップ」と表示されるため、そのページをクリックしてサイトを開きます。
ブログやホームページに載せたい建物または住所を検索しよう
google mapの左上の検索窓に地図を載せたい建物や住所を入力して検索します。
または、地図上で建物や住所をクリックして建物、住所を指定します。
下の画像では例として「東京駅」と検索して東京駅を中心とした地図を画像として表示しています。
「共有」から地図のURLを手に入れよう
いきなり難しそうなワードを載せてしまい、すみません。
しかし、これができることでブログやホームページに地図を載せることにグッと近づきます。
作業自体は簡単なので一緒に画像を見ながら頑張りましょう。
左の新幹線の写真の下に赤丸で囲った「共有」というボタンがあると思うので、それをクリックします。
すると、上の写真のように「共有」というボックスが出てくるので、赤丸で囲った「地図を埋め込む」をクリックします。
すると、上の写真のような画面になると思うので左の赤丸で囲った「中」と書いてあるところをクリックし、画像のサイズを選び、右の赤丸で囲った「HTMLをコピー」をクリックします。
ブログやホームページに地図を載せてみよう
ここまでくると、最後の作業になります。Wordpressの作成中のページを開きます。
私の貼り付け方としては、左上の「＋」を押し、検索窓に「カスタム」と入力し、赤丸で囲った「カスタムHTML」を選択します。
すると、上の図のように「HTMLを入力…」と表示されるので、表示されているところに、先ほどGooglemapでコピーしたHTMLを貼り付けます。
そうすると、プレビューで見ると、以下のように地図が埋め込まれ、閲覧している人が自由に地図を拡大したり、動かしたりできる今回指定した東京駅を中心とした地図を貼り付けることができました。
まとめ
いかがだったでしょうか。
慣れないうちは難しいと思うかもしれませんが、
慣れてくると難しい作業ではないため、ぜひチャレンジしてみてください。
今回は投稿ページでの貼り付け方を紹介しました。
もちろん、この方法で固定ページでも貼り付けることができます。
その他にもウィジェットの項目からフッターに地図を埋め込むなど、
よりホームページのデザインに凝った編集も行うことができますが、
今回は本文中に地図を貼り付ける方法のみ紹介させていただきました。
最後まで閲覧いただきありがとうございました。
よろしければ他の投稿も見てもらえると嬉しいです。
コメント