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|子テーマのstyle.cssの画像パスはどう書くの?

WordPressでは、themesフォルダ内の「テーマ名フォルダ」の中に「style.css」が入っています。子テーマの場合は「テーマ名-child」としていることが多いので、「テーマ名-child …

WP★サブディレクトリにインストールしたWordPressをルートディレクトリに表示する方法

WordPress のファイルってフォルダやファイルがたくさんあって、サーバー内がゴチャゴチャしてしまいます。 これらをドメイン直下のドキュメントルートディレクトリに散らかしたくない場合は、新規インス …

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

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

WordPress★TwitterとInstagramをサイトに表示させる

サイトにTwitterのタイムラインを埋め込む方法のメモ。 Twitterのタイムラインをサイトに埋め込むコードを取得する ここにアクセスして、コードを取得する!  ↓  ↓  ↓ https://p …

Lens Camera Photography  - rotation360 / Pixabay

WordPress★「Pixabay images」に変わるプラグイン

WordPressを最新版にアップデートしたら、プラグイン「Pixabay images」がブロックエディターに対応していない。そこで、代わりになるプラグインを探してみた。 googleで検索すると、 …

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