WordPressサイトにGoogleMapを埋め込む!レスポンシブ対応やプラグインの使用方法

WordPressサイトを運営していてブログを書いている時に、マップを埋め込みたい!と思ったことはありませんか?

せっかく行ったお店を紹介したいのに、住所しか表示されていなかったら、読者に不親切ですよね。できれば住所だけでなくGoogleマップが表示できれば読者にも伝わりやすいのかと思います。特に店舗を運営している人なら自分の店舗に足を運んでもらうためにも、読者にわかりやすい表記にしましょう。

そこで、今回はWordPressの初心者でも簡単にGoogleマップを表示させる方法を紹介します。この方法はもちろん無料でできます。Googleマップのコードを取得して埋め込む方法と、プラグインを使って埋め込む方法について解説します。

初心者でもこの2つの方法は簡単にできるので、ぜひあなたのサイトで試してみてください。

Googleマップのコードを取得して埋め込む方法

一番オススメな方法の「Googleマップのコードを取得して埋め込む方法」を紹介します。この方法はわたしがこのサイトでやっている方法です。もちろんPCだけでなく、スマホでもGoogleマップが見れるので、読者にとっても良い方法です。

この方法は、住所がわからなくても建物の名前がわかれば、Googleマップを埋め込むことができますし、日本だけじゃなく海外の施設のGoogleマップを埋め込むことができます。

今回は先日わたしが紹介した、シンガポールの「アイオン・オーチャード」というショッピングモールのGoogleマップの埋め込み方法を説明します。

シンガポール『アイオン・オーチャード』全店舗を制覇してみた

2016.10.19

Googleマップのコードを取得して埋め込む手順

まず「Googleマップ」と検索して、Googleマップを表示させてください。

google%e3%83%9e%e3%83%83%e3%83%97

今回は日本の施設ではなく、海外の施設でもできることを証明しますので、例としてシンガポールの「アイオン・オーチャード」というショッピングモールのマップを埋め込みます。

Googleマップの入力画面に「アイオン・オーチャード」と入力してみてください。

ion-orchard-google-%e3%83%9e%e3%83%83%e3%83%97

そうすると、このように「ION Orchard」にピンが刺さっている状態で表記されます。ここまでできればもう簡単です。

Googleマップに登録されていないような商業施設の場合は、住所を入力しないとこのようにピンが刺さらないかもしれません。できるだけ正式名称を入力してください。もし商業施設で表示されない場合は、正式な住所を入力してください。

次に画面の左側の「共有」(下記の赤枠)をクリックしたら、次に「地図を埋め込む」(下記の青枠)をクリックします。

ion-orchard-google-%e3%83%9e%e3%83%83%e3%83%972

そうすると埋め込み用のマップが表示されます。Googleマップの埋め込みサイズも選べます。選択方法はムラサキ枠で囲っているところで4タイプ選べます。

  1. 小(ヨコ400ピクセル×タテ300ピクセル)
  2. 中(ヨコ600ピクセル×タテ450ピクセル)
  3. 大(ヨコ800ピクセル×タテ600ピクセル)
  4. カスタマイズ(ヨコもタテも自分で選択できる)

 

実際わたしは、カスタマイズを選択し、ヨコ700ピクセル×タテ350ピクセル(下図の赤枠)で設定してみました。

ion-orchard-google-%e3%83%9e%e3%83%83%e3%83%97

カスタムサイズで入力した後に、青枠で囲っている部分を選択しコピーします。

参考までに、シンガポールの「アイオン・オーチャード」のGoogleマップのカスタムサイズ(700×350)は、このようなソースコードになります。

 

これをコピーした状態で、今度はあなたのWordPressサイトに貼り付け(ペースト)します。この時「ビジュアルモード」ではなく「テキストモード」になっていることを確認して貼り付けてください。

%e6%8a%95%e7%a8%bf%e3%81%ae%e7%b7%a8%e9%9b%86-fujimotoyousuke-com-wordpress

 

 

表記チェック(Googoleマップ)

どうでしょうか?うまく表記できていますかね?

このマップは埋め込んでありますから、画面上でマウスをドラッグするとマップが動きます。ぜひマウスで操作してみてください。

 

レスポンシブ対応

念のため表記確認のために、PCとスマホでもしっかりレスポンシブ表記できていることをチェックしてください。

PCの表記

wordpress%e3%82%b5%e3%82%a4%e3%83%88%e3%81%abgooglemap%e3%82%92%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%81%9f%e3%81%84%ef%bc%81%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c※これは表記チェックのため画像です。

 

スマホの表記

googlemap※これは表記チェックのため画像です。

 

自分のサイトでGoogleマップを埋め込んでみて、サイトでチェックしてみてください。

 

いかがでしたか?すごく簡単ですよね。

次にプラグインを使ってGoogleマップを埋め込む方法を紹介します。

 

Googleマップをプラグインで埋め込む方法

公式プラグインディレクトリ「Simple Map」

WordPressの公式ディレクトリにも登録されている「Simple Map」というプラグインでGoogleマップを埋め込む方法を紹介します。このプラグインの作者はTakayuki MiyauchiさんというWordPress業界では有名な方が作られたプラグインですから安心して使って大丈夫です。もちろん最新のWordPressのバージョン4.6系対応となっていました。

プラグイン「Simple Map」を使う手順

管理画面の左メニューにある「プラグイン」を選択し、「新規追加」をクリックします。

%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0-fujimotoyousuke-com-wordpress

「今すぐインストール」をクリックし、「有効化」をすると、下記の表記が表示されます。

Simple MapプラグインはGoogle Maps APIキーが必要です。設定ページへ移動して設定してください。

つまりGoogleマップのAPIキーが必要になります。このAPIキーというのはGoogleのサイトで「キーを取得」します。

%e3%82%a6%e3%82%a7%e3%83%96%e5%90%91%e3%81%91-google-maps-api-google-developers

こちらのGoogleのサイトの右上に「キーを取得」(赤枠)もしくは「GET A KEY」をクリックして「続行」をクリックします。

そのまま画面にしたがって「作成」をクリックすると、このような画面になります。

%e8%aa%8d%e8%a8%bc%e6%83%85%e5%a0%b1-my-project

ここの画面で取得した「APIキー」を、今度はプラグインの画面に入力して「変更を保存」をクリックします。

simple-map-fujimotoyousuke-com-wordpress

この状態になったら、下記のようなショートコードを入力するとGoogleマップが表示されます。

wordpress%e3%82%b5%e3%82%a4%e3%83%88%e3%81%abgooglemap%e3%82%92%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%81%9f%e3%81%84%ef%bc%81%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c※現在このサイトがプラグイン「simple map」を設定していないので、ココには画像を貼り付けておきます。

このプラグインではこのようにコメントも入力できるので、ちょっとおもしろいですね。ただ住所か緯度経度を入力しないといけないようなので、慣れるまでにはちょっと大変かもしれません。

 

まとめ Googleマップを埋め込む

このようにGoogleマップを埋め込む方法は簡単にできます。「Simple Map」プラグインを使う方法は、APIキーの取得と、住所を正確に入力しないと表示されないので、Googleマップのコードを取得して埋め込む方法の方が簡単かもしれませんね。

今回紹介した「Googleマップのコードを取得して埋め込む方法」を使って、作った記事がこちらです。もしよければチェックしてみてください。

シンガポール『アイオン・オーチャード』全店舗を制覇してみた

2016.10.19

Googleマップが表示されると、すごく読みやすくなりますよね。ぜひ自分のやりやすい方法を選んで、自分のWordPressのサイトで試してみてください。

おすすめプラグインは、こちらで紹介していますのでチェックしてみてください。
→厳選おすすめプラグイン

【保存版】WordPressのおすすめプラグイン2017年版

2017.01.01

1 個のコメント

  • 初めまして!こんにちわ。
    咲月ミオと申します。

    グーグルマップの埋め込みを探してたどり着きました。
    とても丁寧な解説ありがとうございます。

    あるお店が地元にあるのを初めて知って行ってみたいと思い
    あれこれ検索してそれを日記に書きたかったのですが。

    行き方を説明するのに電車とか〇〇行きをどこそこの駅で降りて
    そこから〇〇方面に歩いてと解説することはできますが、
    やはり地図があった方が便利だし…と思って探していたんです。

    これで無事地図を差し込むことができます。
    ありがとうございました。

  • コメントを残す

    メールアドレスが公開されることはありません。