【WordPress】Google map の使用 プラグインMapPress Maps for WordPress編

WordPress

【やりたいこと】Google mapを使用したい

今回の記事は、過去記事の「Google map APIを取得する方法」の続きとなっております。

【WordPress】Google map APIを取得する方法
【やりたいこと】Google map APIを取得したい Google map APIの取得、めんどくさいですよね~、 ということで、 Google map APIを取得する方法を一番シンプルな記事を目指して書きました! 【...

今回は、Google map を使用できるようになるプラグイン「MapPress Maps for WordPress」の紹介です(^^)/

【10分でできる!】超簡単マップ表示の方法

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman – WordPress テーマ | WordPress.org
Free WordPress Themes

・MapPress Maps for WordPress

MapPress Maps for WordPress
MapPress adds beautiful, interactive Google or Leaflet maps to WordPress.

2.手順

①MapPress Maps for WordPressのインストールと有効化

※下記の画像は、すでにインストール済みの表示になります。

f:id:hk-ryukyu:20181202044125p:plain

プラグインの新規追加をクリックします。

MapPress Maps for WordPressを検索し、MapPress Maps for WordPressをインストールします。

インストール完了後、有効化にします。

②Google API keyの記入

f:id:hk-ryukyu:20181202044421p:plain

MapPressをクリックし、基本設定を変更します。

Mapping EngineのGoogleにチェックをつけます。

Google API keyを記入します。

※APIキーの取得はこちらの記事を参考にしてください

【WordPress】Google map APIを取得する方法
【やりたいこと】Google map APIを取得したい Google map APIの取得、めんどくさいですよね~、 ということで、 Google map APIを取得する方法を一番シンプルな記事を目指して書きました! 【...

③Google map の使用方法

f:id:hk-ryukyu:20181202044841p:plain

固定ページ(投稿でも可)をクリックし、MapPressの新規マップをクリックします。

f:id:hk-ryukyu:20181202045130p:plain

上記の画像のように、「okinawa」と記入すると、指定の場所にアイコンが表示されます。

f:id:hk-ryukyu:20181202050654p:plain

上記の画像のように、2つ以上の場所を指定することもできます。

f:id:hk-ryukyu:20181202045415p:plain

また、アイコンをクリックすると、説明文を加えることができます。

f:id:hk-ryukyu:20181202045623p:plain

マップの保存を行い、記事へ挿入をクリックします。

すると、記事にマップが挿入されます。

記事に挿入後の「6」という数字は、挿入したマップの番号になります。

④マップの確認

「変更をプレビュー」をクリックし、マップが表示されているか確認します。

f:id:hk-ryukyu:20181202050136p:plain

上記の画像のように表示されていれば成功です。

3.追記

このプラグインは、KMLファイルが使用できます!別記事で書きます!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

SHOWROOM(ショールーム)
SHOWROOMはアーティストやアイドル、タレント等の配信が無料で視聴でき、さらに誰でもすぐに生配信が可能な、双方向コミュニケーションの仮想ライブ空間です。

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

コメント

タイトルとURLをコピーしました