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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPress|メタ情報のいらない項目を非表示にする

サイドバーウィジェットにある「メタ情報」は全体を表示させるか非表示にするかの2択しかない。必要な項目だけ表示させたいのでその方法を調べてみた。 メタ情報のデータファイル メタ情報の表示データは、wp- …

WordPress★記事にグラフを加える「WP Graphs & Charts」プラグインを試してみた!

記事中にグラフを加えたくて調べてみた。 実装には、プラグインを使う方法やjQueryを仕込む方法などさまざまあるみたい。 jQueryを仕込む場合は、後々のメンテナンスや更新もコード中心の記述になるの …

WP★flamingo 受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい!

受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい! 件名のところに[your-subject]じゃなくて、フォームのタイトル名を表示させる方法を調べてみました。 flamingoの …

WordPress★ページごとに個別のCSSを読み込ませる方法★編集画面下にCSSを入力するエリアをつくる

WordPressはCSSを「style.css」に記述していくのが一般的な方法。 一つのファイルにまとめて書くとものすごい量になってしまうので、もっとスッキリさせたい! ページごとに読み込む方法はい …

WPプラグイン「Crayon Syntax Highlighter」のテーマ一覧

WordPressでコードを表示させるプラグインで「Crayon Syntax Highlighter」というのがあります。表示させるテーマもたくさんあって便利なのですが、どのテーマがどんな風にみえる …

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