WordPress

【WordPress】Google MapビルダープラグインGoogle Maps WD

April 9, 2017
Google Maps WD

Google Maps WD
Google Maps WDは、ユーザーフレンドリーで使いやすいGoogle Mapプラグイン。コーディングスキルや複雑なカスタマイズプロセスを必要としません。マップはショートコード,PHPで設置可能。1つのマップに複数のマーカーを表示させたり、マーカーアニメーション、ポリゴンレイヤーなどの機能もあります。

Google Maps WDプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Google Maps WDを検索
有効化にするとGoogle MapsWDが追加されます。

Options


オプションを設定します。一部は後程各マップ毎に設定変更は行えます。

Map API Key マップAPIキー
Map Language 地図の言語
Marker Default Icon デフォルトのマーカーアイコン(有料版)
Center address マップの中心の住所
Center Lat 中央の緯度
Center Lng 中央の経度
Zoom Level ズームレベル
Wheel Scrolling ホイールスクロール
Map Draggable 地図をドラッグ可能にする

Applyをクリックし、変更を適用します。
マップのカテゴリー登録、マップのテーマカスタマイズは有料版だとが可能です。

Maps


Add newをクリックします。マップが表示されるのでタイトルを入力し、Add MarkerかMarkersのAdd Newをクリックします。

Edit Map

福岡市
Markers

Title タイトル
Address 住所
Latitude 緯度
Longitude 経度
Description 説明(有料版)
Enable Info Window 情報ウィンドウを有効
Custom Icon カスタムアイコン(有料版)
Custom Icon Size カスタムアイコンサイズ(有料版)
Published マーカー表示
Link Url リンクURL(有料版)
Marker Description Image マーカー説明イメージ(有料版)
Category カテゴリー(有料版)
Animation アニメーション
Open Info Window by Default デフォルトで情報ウィンドウを開く

Add Markerをクリックします。同じ要領でマーカーを追加していきます。


Add Polygon

Title タイトル
Link リンク(有料版)
Data データ
Show markers マーカーを表示
Enable Info Windows 情報ウィンドウを有効(有料版)
Published ポリゴンを公開
Line Width 線幅
Line Color ラインカラー
Line Opacity ライン不透明度
Fill Color 塗りつぶしの色
Fill Opacity 不透明度を入力
Line Color Hover ラインカラーホバー(有料版)
Line Opacity Hover ラインホバー不透明度(有料版)
Fill Color Hover ホバーカラーを入力(有料版)
Fill Opacity Hover ホバー不透明度を入力(有料版)

ポリゴンの点は右側のマップを右クリックしていきます。マーカーをドラッグして移動させることも可能。
Add Polygonをクリックします。

Settings


左上のメニューボタンのSettingsをクリックすると上記のような画面になるので、マップの中央を変更したり、ズームレベルを変更したりできます。

佐賀市
サンプルまでに佐賀のマップを入力してみました。最後にSaveをクリックします。
Mapトップにショートコード、PHPが表示されるのでコピペして使用することができます。

投稿画面


エディタをビジュアルにするとInsert Google Map WDが追加されているのでクリックします。


上記のような画面になるので表示させたいマップを選択し、ショートコードを挿入します。

複数マーカーマップ
複数のマーカーを表示させたマップが表示されます。

ウィジェット


ウィジェットを移動させます。
Select Mapで表示させたいマップを選択し、ズームレベルや幅、高さを設定。

ウィジェットに表示させたマップ