本日のテーマはGoogleマップの挿入方法の手順について解説します。
GoogleマップをWEBサイトに設置する方法についてご紹介していくよ～。プラグインを使用せず単純にコピペで設置していく簡単な方法を説明するよ～
Googleマップを挿入したいけど、どうやってやるの？
自分のWEBサイトにGoogleマップを挿入したいな～。と思い立った方はいるでしょう。
でも、実際には、やり方がわからなくて「どうやってやるの？」という方もいるでしょう。
すっごく簡単なので、ぜひ自分のサイトでもやってみてください。
実店舗やテナントなど、お店を経営している方であれば、「自分のお店はここですよ。」とGoogleマップを設置して伝えていくことで、視覚的に伝わるサイトになります。
Googleマップの活用方法は多岐にわたるでしょう。
自分のお店を紹介したり、おすすめのお店を紹介したりすることにも活用することができますが、他にもいろいろ活用方法はあると思うので、自分なりに考えて実践してみてください。
今回は、簡単に設置できる方法をお伝えてしておきます。
Googleマップ×自社WEBサイトをつなげる！
直接店舗に足を運んでもらいたいと思っているのに、住所だけの記載だけしか行っていない所は非常にもったいないです。
住所や行きたい場所を調べるのに、ほとんどの方はマップをつかって場所を調べるのが一般的ではないでしょうか。
私もGoogleマップは頻繁に使用しますし、あなたもマップを検索して場所を調べるのではないしょうか。
文字だけで住所を表示している場所ももちろんあるかと思いますが、WEBサイトにGoogleマップを挿入してあげると場所なども把握しやすく、親切かと個人的には思います。
※ちなみに、コードをコピー貼り付けするだけで、以下のような埋め込みが可能。
直接画像をクリックしてスライドすることも可能。
Googleマップと相性がよいサイトはこんな感じ！
店舗型のお店を紹介するサイト
グルメのようなサイト
街を紹介するサイト
観光で場所を紹介するサイト
海外を旅するサイト
イベント会場やお知らせをするサイト
お店を経営しているならホームページを作成して自社の所在地を表示<
などでしょうか。
他にも色々と活用方法はあるかと思いますが、上記のようなサイトは一般的には自分のWEBサイトにマップを設置しているのは良く見かけた事はあるでしょう。
もし、あなたのサイトも上のようなコンテンツであれば相性がよいかもしれないので、もし導入していない。という方は簡単なので、ぜひやってみてください。
WEBサイトにマップを挿入する事で得られるメリット
店舗型のお店を経営している方であれば地図で場所を簡単に周囲に知らせることができる
住所を文字だけで記載すると伝わりにくいが、地図で表示することで視覚的に訴えることができる。
文字だけ住所の場合、サイト訪問者は、場所がイメージつかなければ、そこからさらに住所を再検索しなければいけないのが手間。その手間をはぶくことができる。（ユーザビリティーが高いサイトとなる。）
サイトの見栄えもよくなる
Googleマップを利用している方も多いので、ほとんどの方が場所を簡単に調べることができる
などなど、マップを挿入することのメリットは多いのではないしょうか。
もちろん、マップが不要なコンテンツもあると思いますので、そこはあなたのサイトにあわせて導入するかどうかを検討したらいいのではないしょうか。
Googleマップ挿入時の注意点
Googleマップを利用する時は、禁止行為というものが存在しているので導入する時は確認しておいてください。
やってしまいそうな禁止行為の一つとして、マップ画像のスクリーンショットがあがるかと思います。
その他にも注意点はあるので、目を通しておくことをおすすめします。
ストリートビューの画像、ルートの検索結果、ビジネス情報などの記載はゆるされているようですが、地図そのものをスクリーンショットする事はNGのようです。WEBサイト運営者は、スクリーンショットは結構使う行為だと思いますが、間違えてマップをアップしなうように注意しておきましょう
以下に公式のガイドラインがありますので、参照しておいてください。
Googleマップを貼りつけるための具体的な手順！
１．Googleマップを開き指定の場所や住所を検索する
まずはGoogleマップを開き、調べたい住所や指定の場所を入力しましょう。
２．三本線のバーをクリック’
次に左上の三本ラインを引いてある部分をクリックしましょう。
すると、ずらーっとメニューが表示されます。その中の下の方をみてみてください。
３．地図を共有または埋め込むをクリック
地図を共有または埋め込む。という項目をクリックしましょう。
４．WordPressのテキストに貼り付けコピ
あとは、テキストエディターに貼り付け押してクリックして終了です。
最後にしっかりと表示されているか確認しましょう。
５．最後に確認
このようにサイトに地図が表示ができていれば完成です。お疲れさまでした。
ちなみに、画像は札幌駅のマップを表示させています。なんだか、地図を挿入するだけでイメージがしっくりくる感じです。
オススメのお店なんかがあれば、バシッと地図をのせたい所ですね＾＾
ストリートビューを貼りつけるための手順
完成形はこんな感じです。Googlemapのストリートビューで札幌駅を表示。というわけで、いってみましょう。
１．Googlemapを開く
調べたい場所や指定の場所を検索しましょう。
２．ストリートビューが表示できるよう道路をクリック
次に、場所はどこでもいいと思いますが、ストリートビューを開くために、マップの道（道路）をクリックしましょう。
すると、ストリートビューが表示できるよう下らへんにストリートビューを閲覧できる画像が表示されます
３．’Googlemapが表示されたら点をクリック
Googlemapを表示する事ができたら左上の方に上の画像のようなものがでるので、点をクリックします。
４．地図を埋め込むを選択してHTMLをコピーする
HTMLコードをコピーしましょう。最後にさきほど同様にテキストエディターに張り付けて完了です。
５．最後に確認
さきほどと同様に、最終確認です。実際に表示されているかチェックしてみましょう。
こんなかんじで表示できていれば完璧です。
Googlemapで経路を表示させる方法
次にGooglemapで経路を表示させる方法についてご紹介します。完成形はこんな感じです。札幌の場所で紹介します。
「札幌駅」から「すすきの駅」まで徒歩で行くための経路を知らせたい。そんな時に活用できる方法です。
徒歩１８分で行けますよ。と視覚的に訴えることができますね。
１．まずはGooglemapを開きましょう
２．ルート経路を検索する
次に、経路案内のピクトをクリックします。
３．出発場所や目的地、何でそこまでいくかを検索
検索画面に移動するので、徒歩なのか、車なのか、地下鉄なのかをクリックしましょう。
出発場所はどこから、目的地はどこまで？を検索して経路を表示させます。
４．バーをクリックする
地図を共有または埋め込むボタンをクリック。さきほど説明したものと同様にHTMLコードがでたらそれをコピーして、テキストエディターに貼り付けして完了です。
まとめ
地図をWEBサイトに設置する方法は、この他にもプラグインを使って設置する事もできますが、有料だったり、人によって設置が難しい。と感じる方もいるようです。今回紹介した方法は地図を挿入するごく一般的な方法です。
Googlemapをつかって地図を設置する方法、ストリートビューを設置する方法、経路を表示する方法についてご紹介しました。
誰でも簡単に設置できる方法などで興味がある方は、実践してみてくださいね～。
