Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

Blog

Mobile

Gadget

Travel

⛄️🎄  Articles  🎄⛄️

ブログに案内地図やアクセス方法をわかりやすく表示する方法|グーグルマップを埋め込む

グーグルマップを埋め込む方法

ブログで特定の場所やお店を紹介する時、案内図があるといいと思いませんか?
地図があれば目的の場所がどこにあるのかわかりやすくなりますよね。

グーグルマップ(Google Map)をブログに表示して、場所や交通手段を簡単に確認できるようにする便利な使い方をご紹介します。

この記事はこんな方に読んでほしい
  • ブログに地図を表示させたい
  • 目的地への行き方(アクセスの方法)をイメージできるようにしたい
  • 移動時間の目安を表示させたい

わたしのブログでも活用していますよ!

スポンサーリンク

ブログに案内図の表示があるとわかりやすい理由

なぜかな?

目的地を文章だけで説明した場合と、地図を使って説明する場合を比べてみましょう。

 

文章だけで目的の場所は説明しにくい

例えば、東京の有名な寺院の「浅草寺」を見に行きたいとします。
文章で書くと、次のようになります。

「地下鉄の浅草駅を出て、西の方角にしばらく歩くと「雷門」があります。雷門から北上し、仲見世商店街をずっと上がっていくと浅草寺に着きます。」

土地勘がないと、いまいちよくわかりませんね。

 

地図で目的の場所を示して説明するとわかりやすい

地図で場所を示すと、下のようになります。

文章から想像するよりも、地図がある方が直感的に位置関係がわかったのではないでしょうか。

 

直感的に位置関係を把握してから、
「雷門から北に向かいます。たくさんの観光客で溢れかえる仲見世通りを通り抜けると、浅草寺に到着です。」
というように説明した方が、文章だけで説明されるよりわかりやすいと思いませんか?

視覚的に位置関係を把握できる、これが地図があるとわかりやすいと感じる理由です。

 

グーグルマップ(Google Map)をブログに埋め込む方法

グーグルマップで検索した場所をブログでも表示する方法は、次の手順で対応すれば、どなたでも表示することができます。

簡単にできるので、試してみてね。

 

グーグルマップで特定の場所(目的地)をブログに表示させる(埋め込む)方法

まずグーグルで目的の場所やお店を検索する

グーグルで目的の場所やお店を検索します。
そして、左上に表示されている「地図」をクリックしてください。

グーグル検索の地図

©︎グーグル/検索画面

 

ハンバーガーメニューの地図を共有または埋め込むをクリックする

すると、左上に横線が3つ並んだアイコン(ハンバーガーメニュー)が表示されます。この3本線のアイコン*1(以下「ハンバーガーメニュー」)をクリックしましょう。

グーグルマップ

 

すると、下図のように「地図を共有または埋め込む」が表示されますので、ここをクリックしてください。

地図の共有

 

さらに、「共有」というポップアップが表示されます。
このとき、自動で「リンクを送信する」が最初選択されていますが、「地図を埋め込む」をクリックしてください。

地図を埋め込む

続けて、地図と、地図のHTMLが表示されます。

 

地図の大きさを選択し、地図のHTMLのコードをコピーする

左側に地図の大きさを選択できる部分があるので、大・中・小・カスタマイズから大きさを選びます。

ブログをスマホで読む人が多いので(「中」以上だとかなり大きく感じるため)、私の場合は「小」か「カスタマイズ」を選択することが多いです。

 

下図は「小」を選んだ時の表示です。
ここで「HTMLをコピー」をクリックします。

HTMLをコピー

 

地図のHTMLのコードを自分のブログのHTMLにコピペする

そして、ご自身のブログの記事作成画面の「HTML編集」画面にコードを貼り付けてください。

HTML編集

 

するとこのように地図が表示されます。

グーグルマップをブログに簡単に表示できますね!

 

特定の場所から目的の場所までの行き方、アクセスの方法を表示するやり方

特定の場所の表示だけではなくて、目的の場所への行き方のイメージがわかるようにもできます。

 

ルート、乗り換えを表示して、出発地や交通手段を設定する

まず目的の場所の地図を表示します。
そして、「ルート、乗り換え」のアイコンをクリックします。

ルート乗り換え

 

続いて、出発地を入力し、車で行くのか、電車で行くのかなどを選択すると、移動方法が表示されます。

移動方法の表示

 

そうしたら、ハンバーガーメニューをクリックしてください。

後の手順は、特定の場所を表示させる手順と同じです。

 

地図のHTMLコードをコピーし、ブログのHTMLに貼り付ける

地図を共有または埋め込むをクリックします。

地図を共有

 

そして、表示されたポップアップ画面で出発地と目的地があっていることを確認し、「地図を埋め込む」をクリックします。

地図を埋め込む

 

地図の大きさを選び、HTMLをコピーします。

HTMLをコピー

 

さらに、ブログのHTMLにコピーしたHTMLのコードを貼り付ければ完成です。

HTMLの編集画面

 

こんなふうに表示させることができます。

ここで表示される行き方、アクセス方法は、閲覧時の時間帯に合わせてグーグルが出発地から目的地までにかかる時間などを自動的に最新の情報にして表示してくれます。

便利ですね。

スポンサーリンク

グーグルマップを埋め込んで、地図やアクセス方法(交通手段や必要時間)を表示する方法のまとめ

このように、グーグルマップをブログに埋め込んで、場所を表示したり、行き方やアクセス方法(移動方法や必要時間)を例示してイメージしやすくすることができます。

観光地などの目的地の場所を例示したり、お店の場所を表示させたりするのに便利なので、この記事でご紹介した方法をみなさんもお試しください。

 

わたしの次の記事などでも上記の手順で地図を埋め込んでいます。
どのような表示になるのかの参考にしていただけると思いますので、ぜひご覧ください。

 

 参考記事

simplelifenavigation.com

*1:ハンバーガーのように見えるのでハンバーガーメニューと呼ばれます