ホームページ

最も簡単!WordPressでGoogleMapを表示する方法(スマホ対応)

WordPressでGoogleMapを表示する方法ホームページ

こんにちはチョッカです。

自社の場所などホームページを見てくれた人にお伝えするのに、
住所で書いても直感的に伝えにくいですよね。
やはり、地図でお伝えするのが一番です。

今回は、WordPressでGoogleMapを表示する、最も簡単な方法をご紹介します。
今の世の中、7〜8割のアクセスがスマホから見られていますので、
パソコンだけではなく、スマホでも見やすくなる修正方法もセットをご紹介します。

最後に、プラグインを使わずにGoogleMapを表示するメリットも記載しています。

スマホ対応したGoogleMapを表示する、たった4つの手順

自分のWebサイトに、地図を表示するのは面倒じゃないの?と思う方もいるかもしれませんが、スマホ対応したものが、たったの手順で実現します。

  1. GoogleMapで表示したい場所を検索する
  2. 表示用のコードをコピーする
  3. WordPressにコードを埋め込む
  4. スマホ対応のため、横幅を指定する。

それでは、各工程を画像を使いながらご説明します。

手順1:GoogleMapで表示したい場所を検索する

GoogleMapを開き、表示したい場所を検索します。

GoogleMap手順画像01

今回は、東京駅を検索します。

GoogleMap手順画像02

表示されました!!

手順2:表示用のコードをコピーする

メニューから、「地図を共有または埋め込む」を選択します。

GoogleMap手順画像03

「地図を埋め込む」にある「HTMLをコピー」をクリック

GoogleMap手順画像04
GoogleMap手順画像05

以下のように「クリップボードにコピーしました」と表示されたら、コピー完了です。

GoogleMap手順画像06

手順3:WordPressにコードを埋め込む

表示したい記事や固定ページで、「カスタムHTML」ブロックにペーストします。

GoogleMap手順画像07

「カスタムHTML」が表示されない場合は、検索欄に「HTML」と入れると出てきます。

GoogleMap手順画像09

ブロックの枠内に、ペーストします。

GoogleMap手順画像10

この時点で確認したい方は、プレビューボタンを押してみてください。
横幅が小さいマップが表示されていると思います。

GoogleMap手順画像11

手順4:スマホ対応のため、横幅を指定する。

ペーストしたコードの一部を以下のように修正します。
width=”600px” → width=”100%

スマホは画面が小さいので出来るだけ大きく表示した方が、
見てもらうためにも、操作してもらうためにも良いと思います。

GoogleMap手順画像12

これで、完成です。

プレビューで表示を確認してみましょう。

GoogleMap手順画像13

横幅いっぱいになりました。

どうでしょうか。
思ったよりも簡単だったのではないでしょうか。

地図を固定サイズでカスタマイズする場合

もし、横幅をパソコンやスマホによって変えずに、固定サイズで良いという方は、
GoogleMapの「HTMLをコピー」する際に、サイズを指定することができます。

「中」と書かれているボタンをクリックすると、「カスタムサイズ」が出てきますので、こちらをクリックします。

GoogleMap手順画像101

カスタムサイズに、横幅 x 縦幅 の入力欄が出てきます。

お好きなサイズを指定してください。

「実サイズをプレビュー」ボタンを押せば、指定サイズのマップが表示されます。

GoogleMap手順画像102

プラグインには、2つのリスクがある

GoogleMapを表示するプラグインは多くあります。

見た目を多くのバリエーションから選べたりと、プラグイン を使うメリットもあるのですが、
プラグインを使う上でリスクがあることも知っておきましょう。

アップデートで動かなくなるリスク

プラグインをインストールすると、時々アップデートが発生します。

これがセキュリティ向上など良い面もあるのですが、
これまで動いていたものが、動かなくなってしまうリスクもゼロではありません。

不具合があった場合、プラグイン開発者は早々に改修しますが、
たった1日であっても、その間にお客様への影響が発生してしまいます。

見込み客を逃してしまうかもしれません。

Webサイトの速度ダウンにより、検索順位が落ちてしまうリスク

プラグインを入れることで速度ダウンしてしまうことはよくあります。

速度ダウンしてしまうと、Googleの検索順位(SEO)にも悪影響を及ぼしてしまいます。
GoogleはWebサイトの速度を重要視しているからです。

今回のように簡単に作れるものであれば、プラグインを使わない方が良いと思います。

まとめ

スマホに対応したGoogleMapを表示するのは、たったの4工程

  1. GoogleMapで表示しい場所を検索する
  2. 表示用のコードをコピーする
  3. WordPressにコードを埋め込む
  4. スマホ対応のため、横幅を指定する。

プラグインには、2つのリスクがある

  1. アップデートで動いていたものが動かなくなるリスク
  2. Webサイトの速度ダウンにより、検索順位が落ちてしまうリスク

非常に簡単な対応なので、プラグインは使わずにマップを表示させましょう。

GoogleMapに関わらず、お困りごとがありましたら、
お気軽に、チョッカ にお問い合わせください。

タイトルとURLをコピーしました