【WordPress】24種類のマップスタイル・マーカー変更も出来るResponsive Google Map

responsive_google_map_1
Responsive Google Mapはレスポンシブにも対応しているグーグルマッププラグイン。24種類の美しいマップスタイルとマーカーもオリジナルのものに変更することも出来ます。

Responsive Google Mapプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Responsive Google Mapを検索
有効化にすると設定にGMap Settingsが追加されます。

Google Map Settings

responsive_google_map_2
設定を行います。Enable Markerにチェックを入れないとマーカーが表示されません。

MAP Types マップタイプ
Scroll Zoom スクロールズーム
Drag Map 地図ドラッグ
Enable Marker マーカーを有効にします
Draw Circle 円を描きます
Circle Range サークルレンジ
Circle Background Color サークルの背景色
Circle Border Color サークル境界線の色

responsive_google_map_3

投稿・固定ページの編集画面などでビジュアルにすると上記画像のようにOM Gmapが追加されます。
この時点でメディアにマーカーをアップして、URLをコピーしておくと楽かと思います。

responsive_google_map_4

  1. Enter Your Addressに住所を打ち込むかLat・Lngに経度・緯度を直接打ち込みます。Enter Your Addressに住所を打ち込む場合は最後にGet Lat Lngをクリックしてください。
  2. Info Windowは必要でしたら入力してください。
  3. Marker URLにマーカーのURLを入力します。
  4. Zoomは必要でしたら入力してください
  5. Stylesでマップスタイルを変更することが出来ます。

最後にInsert Mapをクリックしたら下記のようなショートコードが挿入されます。
[om_gmap zoom=”15″ lat=”33.2758563″ lng=”130.2941037″ styles=”_light_monochrome” marker=”オリジナルマーカーURL”]

responsive_google_map_5
表示して見てみると上記のような形で表示されます。

 
Responsive Google Map

【WordPress】24種類のマップスタイル・マーカー変更も出来るResponsive Google Map

  • LATEST
  • RELATED
  • POPULAR