WordPress★グーグルマップを表示させる

2016年6月からグーグルマップを使う場合はAPIキーが必要になったとのこと。

評判のよいプラグイン「simple map」を使ってみたけど、
今回制作しているサイトでは動かなかったので、
i frameをサイトのページへ直貼りしました。

APIキーの取得方法ついてはこちらを参考にしました。
画像入りでとても丁寧に解説してくださっています。
http://design-plus1.com/tcd-w/2016/06/google-maps.html 

グーグルマップをサイトへ直貼りする方法

Google Mapから、直接コードを取得して表示したいところに挿入する方法です。

  1. 地図出力用のコードを取得 

    まず、Google Mapで、挿入したい地図を表示します。
    (今回は大阪城を選んでみました)
    画面の左上にメニューマークがあるので、クリックします。
    %e5%a4%a7%e9%98%aa%e5%9f%8e_-_google_%e3%83%9e%e3%83%83%e3%83%97_2

    そこで立ち上がるメニューの中の「地図を共有する/埋め込む」を選びます。
    %e5%a4%a7%e9%98%aa%e5%9f%8e_-_google_%e3%83%9e%e3%83%83%e3%83%97_%e3%81%a8_%e6%8a%95%e7%a8%bf%e3%81%ae%e7%b7%a8%e9%9b%86__web-geek_-_wordpress_1

    %e5%a4%a7%e9%98%aa%e5%9f%8e_-_google_%e3%83%9e%e3%83%83%e3%83%97_%e3%81%a8_%e6%8a%95%e7%a8%bf%e3%81%ae%e7%b7%a8%e9%9b%86__web-geek_-_wordpress

    左にあるボタンをクリックすると地図の表示サイズを好みの大きさに変更できます。
    %e5%a4%a7%e9%98%aa%e5%9f%8e_-_google_%e3%83%9e%e3%83%83%e3%83%97_1

    %e5%a4%a7%e9%98%aa%e5%9f%8e_-_google_%e3%83%9e%e3%83%83%e3%83%97

    サイズ調整が終わったら、その下にあるコードをコピーします。

  2. WordPressに反映させる 

    WordPressの表示したい場所にコピーしたコードを貼り付けます。
    その時、「テキストモード」を選択しておいてください。
    %e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__web-geek_-_wordpress

  3.  更新するとちゃんと地図が表示されました!

    引用:http://techacademy.jp/magazine/3291

プラグイン「simple map」はこちら
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-22-00
https://wordpress.org/plugins/simple-map/

プラグインの作者ページはこちら:
https://firegoby.jp/wp/simple-map

シェアする

  • このエントリーをはてなブックマークに追加

フォローする