【Googleマップ】をWordPressに簡単に設置する方法|プラグイン使用せずコードコピーで完了!

Toshi

今日はGoogleマップをWEBサイトに設置する方法についてご紹介していくよ~。プラグインを使用せず単純にコピペで設置していく簡単な方法を説明するよ~。

本日のテーマはGoogleマップの挿入方法の手順について解説します。

Googleマップを挿入したいけど、どうやってやるの?

Toshi

設置したいけど、やりかたわからん。。。

自分のWEBサイトにGoogleマップを挿入したいな~。と思い立った方はいるでしょう。
でも、実際には、やり方がわからなくて「どうやってやるの?」という方もいるでしょう。
すっごく簡単なので、ぜひ自分のサイトでもやってみてください。

実店舗やテナントなど、お店を経営している方であれば、「自分のお店はここですよ。」とGoogleマップを設置して伝えていくことで、視覚的に伝わるサイトになります。

Googleマップの活用方法は多岐にわたるでしょう。
自分のお店を紹介したり、おすすめのお店を紹介したりすることにも活用することができますが、他にもいろいろ活用方法はあると思うので、自分なりに考えて実践してみてください。

今回は、簡単に設置できる方法をお伝えてしておきます。

Googleマップ×自社WEBサイトをつなげる!

直接店舗に足を運んでもらいたいと思っているのに、住所だけの記載だけしか行っていない所は非常にもったいないです。

住所や行きたい場所を調べるのに、ほとんどの方はマップをつかって場所を調べるのが一般的ではないでしょうか。
私もGoogleマップは頻繁に使用しますし、あなたもマップを検索して場所を調べるのではないしょうか。

文字だけで住所を表示している場所ももちろんあるかと思いますが、WEBサイトにGoogleマップを挿入してあげると場所なども把握しやすく、親切かと個人的には思います。

設置はとても簡単

※ちなみに、コードをコピー貼り付けするだけで、以下のような埋め込みが可能。
直接画像をクリックしてスライドすることも可能。

Googleマップと相性がよいサイトはこんな感じ!

 

Googleマップと相性がよいであろうコンテンツ

 

  • 店舗型のお店を紹介するサイト
  • グルメのようなサイト
  • 街を紹介するサイト
  • 観光で場所を紹介するサイト
  • 海外を旅するサイト
  • イベント会場やお知らせをするサイト
  • お店を経営しているならホームページを作成して自社の所在地を表示

などでしょうか。
他にも色々と活用方法はあるかと思いますが、上記のようなサイトは一般的には自分のWEBサイトにマップを設置しているのは良く見かけた事はあるでしょう。
もし、あなたのサイトも上のようなコンテンツであれば相性がよいかもしれないので、もし導入していない。という方は簡単なので、ぜひやってみてください。

WEBサイトにマップを挿入する事で得られるメリット

 

GoogleマップをWEBサイトに挿入するメリット

 

  • 店舗型のお店を経営している方であれば地図で場所を簡単に周囲に知らせることができる
  • 住所を文字だけで記載すると伝わりにくいが、地図で表示することで視覚的に訴えることができる。
  • 文字だけ住所の場合、サイト訪問者は、場所がイメージつかなければ、そこからさらに住所を再検索しなければいけないのが手間。その手間をはぶくことができる。(ユーザビリティーが高いサイトとなる。)
  • サイトの見栄えもよくなる
  • Googleマップを利用している方も多いので、ほとんどの方が場所を簡単に調べることができる

などなど、マップを挿入することのメリットは多いのではないしょうか。
もちろん、マップが不要なコンテンツもあると思いますので、そこはあなたのサイトにあわせて導入するかどうかを検討したらいいのではないしょうか。

Googleマップ挿入時の注意点

Googleマップを利用する時は、禁止行為というものが存在しているので導入する時は確認しておいてください。
やってしまいそうな禁止行為の一つとして、マップ画像のスクリーンショットがあがるかと思います。
その他にも注意点はあるので、目を通しておくことをおすすめします。

注意
 ストリートビューの画像、ルートの検索結果、ビジネス情報などの記載はゆるされているようですが、地図そのものをスクリーンショットする事はNGのようです。WEBサイト運営者は、スクリーンショットは結構使う行為だと思いますが、間違えてマップをアップしなうように注意しておきましょう。

以下に公式のガイドラインがありますので、参照しておいてください。

参考 マップヘルプGoogle

Googleマップを貼りつけるための具体的な手順!

  • 手順1
    Googleマップを開き指定の場所や住所を検索する

    まずはGoogleマップを開き、調べたい住所や指定の場所を入力しましょう。

  • 手順2
    三本線のバーをクリック

    Google Mapsの使い方

    次に左上の三本ラインを引いてある部分をクリックしましょう。
    すると、ずらーっとメニューが表示されます。その中の下の方をみてみてください。

  • 手順3
    地図を共有または埋め込むをクリック

    地図を共有または埋め込む

    地図を共有または埋め込む。という項目をクリックしましょう。

    地図を共有または埋め込む
    すると、このようなコードがでてきますので、そのままコピーしましょう。

  • 手順4
    WordPressのテキストに貼り付けコピー

    WordPressに貼り付け
    あとは、テキストエディターに貼り付け押してクリックして終了です。
    最後にしっかりと表示されているか確認しましょう。

  • 手順5
    最後に確認

    このようにサイトに地図が表示ができていれば完成です。お疲れさまでした。

ちなみに、画像は札幌駅のマップを表示させています。なんだか、地図を挿入するだけでイメージがしっくりくる感じです。
オススメのお店なんかがあれば、バシッと地図をのせたい所ですね^^

ストリートビューを貼りつけるための手順

完成形はこんな感じです。Googlemapのストリートビューで札幌駅を表示。というわけで、いってみましょう。

  • 手順1
    Googlemapを開く

    調べたい場所や指定の場所を検索しましょう。

  • 手順2
    ストリートビューが表示できるよう道路をクリック

    次に、場所はどこでもいいと思いますが、ストリートビューを開くために、マップの道(道路)をクリックしましょう。
    すると、ストリートビューが表示できるよう下らへんにストリートビューを閲覧できる画像が表示されます。

  • 手順3
    Googlemapが表示されたら点をクリック

    ストリートビューを表示させる

    Googlemapを表示する事ができたら左上の方に上の画像のようなものがでるので、点をクリックします。

  • 手順4
    地図を埋め込むを選択してHTMLをコピーする

    ストリートビューを表示させる

    HTMLコードをコピーしましょう。最後にさきほど同様にテキストエディターに張り付けて完了です。

  • 手順5
    最後に確認


    さきほどと同様に、最終確認です。実際に表示されているかチェックしてみましょう。
    こんなかんじで表示できていれば完璧です。

Googlemapで経路を表示させる方法

次にGooglemapで経路を表示させる方法についてご紹介します。完成形はこんな感じです。札幌の場所で紹介します。
「札幌駅」から「すすきの駅」まで徒歩で行くための経路を知らせたい。そんな時に活用できる方法です。
徒歩18分で行けますよ。と視覚的に訴えることができますね。

  • 手順1
    Googlemapを開く
    まずはGooglemapを開きましょう。
  • 手順2
    ルート経路を検索する

    ルートを表示させる

    次に、経路案内のピクトをクリックします。

  • 手順3
    出発場所や目的地、何でそこまでいくかを検索

    ルートを表示させる

    検索画面に移動するので、徒歩なのか、車なのか、地下鉄なのかをクリックしましょう。
    出発場所はどこから、目的地はどこまで?を検索して経路を表示させます。

  • 手順4
    バーをクリックする

    ルートを表示させる

    バーをクリックします。

    ルートを表示させる

    地図を共有または埋め込むボタンをクリック。さきほど説明したものと同様にHTMLコードがでたらそれをコピーして、テキストエディターに貼り付けして完了です。

  •  

  • 手順5
    Googlemapで経路案内を表示する事ができました。

    札幌駅からすすきの駅までは、徒歩19分程度で行く事が可能だとGooglemapを表示させる事で視覚的に表示する事ができるかと思います。テナントや店舗で経営している方であれば、最寄り駅からどの程度でいくことができますよ。と簡単に表示する事ができますね。

まとめ

地図をWEBサイトに設置する方法は、この他にもプラグインを使って設置する事もできますが、有料だったり、人によって設置が難しい。と感じる方もいるようです。今回紹介した方法は地図を挿入するごく一般的な方法です。
Googlemapをつかって地図を設置する方法、ストリートビューを設置する方法、経路を表示する方法についてご紹介しました。

誰でも簡単に設置できる方法などで興味がある方は、実践してみてくださいね~。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です