WordPress

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

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

絶対に導入しておきたいWordPressプラグイン10+3選

絶対に導入しておきたいWordPressプラグイン10+3選   WordPress サイトの集客に必須のプラグイン 【1】「All in One SEO Pack」 【2】「WP Soci …

WP★フロントページの背景色を変更する★Twenty Seventeenをカスタマイズ04

フロントページの背景色をパネルごとに変更する方法 フロントページを複数指定している場合、設定した固定ページを順番に表示させています。 このとき 各セクションごとに背景色を変更する方法です。 CSSを追 …

ContactForm7のフォーム作成時に出るエラー「複数のフォームコントロールが単一の label 要素内に置かれている」を解消する

WordPressでは超有名なフォームプラグインの Contact Form 7。 新しくフォームを作成するにはコードを編集する必要があります。 コード編集といっても簡単で、初心者でもそんなに困ること …

WordPress★プラグインなしでページのトップへ戻るリンクを設置

ページのトップへ戻るボタンを設置するとき、プラグインを使うか自作するか。。。いつも迷ってしまう。プラグインは便利で簡単だけど、使わない機能もたくさんついてくるし、余分なデータは極力省きたい。だから、今 …

WordPress|Twenty Nineteen 固定ページをカスタマイズするときに編集するファイル

themes > Twenty Nineteen > page.phpファイルを複製 複製してできたpage copy.phpファイルを子テーマのフォルダに移動 page copy.php …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。