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

Google Maps WDは、ユーザーフレンドリーで使いやすいGoogle Mapプラグイン。コーディングスキルや複雑なカスタマイズプロセスを必要としません。マップはショートコード,PHPで設置可能。1つのマップに複数のマーカーを表示させたり、マーカーアニメーション、ポリゴンレイヤーなどの機能もあります。
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にするとGoogle MapsWDが追加されます。
オプションを設定します。一部は後程各マップ毎に設定変更は行えます。
Map API Key | マップAPIキー |
---|---|
Map Language | 地図の言語 |
Marker Default Icon | デフォルトのマーカーアイコン(有料版) |
Center address | マップの中心の住所 |
Center Lat | 中央の緯度 |
Center Lng | 中央の経度 |
Zoom Level | ズームレベル |
Wheel Scrolling | ホイールスクロール |
Map Draggable | 地図をドラッグ可能にする |
Applyをクリックし、変更を適用します。
マップのカテゴリー登録、マップのテーマカスタマイズは有料版だとが可能です。
Add newをクリックします。マップが表示されるのでタイトルを入力し、Add MarkerかMarkersのAdd Newをクリックします。
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をクリックすると上記のような画面になるので、マップの中央を変更したり、ズームレベルを変更したりできます。
サンプルまでに佐賀のマップを入力してみました。最後にSaveをクリックします。
Mapトップにショートコード、PHPが表示されるのでコピペして使用することができます。
エディタをビジュアルにするとInsert Google Map WDが追加されているのでクリックします。
上記のような画面になるので表示させたいマップを選択し、ショートコードを挿入します。
複数のマーカーを表示させたマップが表示されます。
ウィジェットを移動させます。
Select Mapで表示させたいマップを選択し、ズームレベルや幅、高さを設定。