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

関連記事

Confused Question Marks Boy  - milaoktasafitri / Pixabay

WPで「永続的なオブジェクトキャッシュは有効化されていません」に対処したときのメモ

WordPressのダッシュボードに「サイトヘルス」の表示をさせています。最近「永続的なオブジェクトキャッシュは有効化されていません|AMP」というエラーがずっと出っぱなし。 ??? 何をどうすればい …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

WP★User Role EditerでFlamingoを編集者権限でも使えるようにする

  プラグイン「User Role Editer」を使うと権限の設定ができるので、クライアント向けの管理者を編集者権限でログインできるようにして使うことが多いのですが、「Contact Fo …

WordPress|Twenty Nineteen トップページを固定ページにする

WordPressのダッシュボードから「外観」>「カスタマイズ」を選択。 「ホームページ設定」を選びます。 「ホームページ」と「投稿ページ」の2つに固定ページを割り当てます。 「+新規固定ページを追加 …

no image

WordPress4.5.3 「短縮URLを取得」ボタンを表示させる方法

WordPressをアップロードしたら「短縮URLを取得」ボタンが消えてしまった。。。(汗) これがないとちょっと不便なので、ググってみたら解決法が載っていたので早速トライ! 無事表示されました!! …

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