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

WordPress

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

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

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

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

【10分でできる】Maps Builderの使い方

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

1.使用したもの

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

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

・WordPress 4.9.8

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

・テーマ Hueman

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

・Maps Builder

Maps Builder – Google Maps Plugin
The most flexible, robust, and easy to use WordPress plugin for creating powerful Google Maps directly on your website.

2.手順

①Maps Builderのインストールと有効化

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

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

Maps Builderを検索し、Maps Builderをインストールします。

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

②Maps Builderの設定

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

Google MapsのSettingをクリックします。

Google Maps API Keyを記入します。

※Google Maps API Keyの取得はこちらの記事で説明しております。

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

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

Default Location を設定します。

Latitudeは、緯度

Longitudeは、経度

を表しています。

上記の画像は、沖縄の緯度経度になっております。

③Mapの編集

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

Google MapsのAdd Newをクリックします。すると、Google Mapが表示されます。

Google Map上の下側にある「Drop a Marker」をクリックします。

そして、Map上をクリックすると、アイコンが表示されます。

MapPress Maps for WordPressプラグインでは、自由にアイコンを設置できなかったが、Maps Builderでは、自由にアイコンを設置できる。

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

アイコンをクリックすると、上記の画像が表示されます。

右下のマークをクリックします。

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

上記の画像が表示され、アイコンを変更することができます。

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

アイコンを変更したら、右下のSet Markeyをクリックします。

下記の画像のように、アイコンが変更されてたら成功です。

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

④Mapの確認

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

Map Shortcodeをコピーします。

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

Mapを表示させたいページに移動し、先ほどコピーしたMap Shortcodeをペーストします。

そして、「変更をプレビュー」をクリックします。

下記の画像のように表示されていたら成功です。

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

3.追記

これで、海中映像マップを作るぞ!

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

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

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

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

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

コメント

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