GoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する

「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」ではHTMLで複数マーカーのある地図を表示しました。
ここまできたらWordPressで同じような事を「簡単に」できるようにしたいなぁ、ということで子テーマに機能を追加してショートコードで複数の吹き出しマーカーのある地図を表示するカスタマイズをしてみました。

ベースとなる地図を表示するショートコードの使い方

今回のカスタマイズは、すべてショートコードで実現できるようにしました。

ベースとなる地図を表示するショートコードは以下の2行です。

ショートコード名:gmap_data_prepare
機能
ベースとなる地図を準備する
引数
lat:中心地点のlat(緯度)。省略した場合は 35.6575244
lng:中心地点のlng(経度)。省略した場合は 139.3349708
zoom:Google Mapのズームレベル。省略した場合は 16
* 省略したときは コワーキングスペース8Beatを中心としたズーム値16の地図となります

ショートコード名:gmap_data_show
機能
指定された地図を描画する
引数
class:地図のDIVの大きさなどを指定するclassを指定する。省略したときは指定無し(高さ350pxとなる)。

この2つのショートコードを投稿や固定ページに書いて表示させると、

このように地図が表示されます。オプションを全部指定せずに

表示させると、

このように8Beatを中心とした高さ350pxの地図が表示されます。

ベースとなる地図を表示するカスタマイズの方法

今回のカスタマイズは「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」で固定的に表示した 8_overlays.html をWordPressのショートコードで地図の位置やズーム、吹き出しの追加や削除が自由に行えるようにしたものです。

それを子テーマフォルダにファイルを追加したり、functions.phpにコードを追加したりすることで実現します。

子テーマにGMaps.jsのフォルダを入れる

GMaps.jsのファイル一式を GMap.jsのダウンロードとサンプルの確認 を参照してダウンロードして、zipファイルを解凍します。

gmaps-master というフォルダ名で解凍されるので、フォルダ名を gmaps に変更します。

使いたい子テーマにこのgmapsを移動します。今回は例として twentysixteen-child という子テーマにカスタマイズをします。

子テーマの中身はこんな感じになりました。

子テーマのstyle.cssにGMaps.jsで使用するcssを追加する

子テーマのstyle.css

を追加します。今回のカスタマイズは前回で行った吹き出しの種類と地図の大きさを実現できるようにしているのでそのときに使ったcssを追加しました。種類や地図の大きさなどを追加したい場合はこのstyle.cssに追加してください。

地図を表示するコードを追加する

子テーマのfunctions.phpにショートコード2つを使って地図を表示することを実現するコードを追加します。

を追加します。gmap_data_preparegmap_data_showの2つのショートコードを追加して、ショートコードで実行する機能をfunctionに記述してあります。

この記述をするために

「Qiita PHPからJavaScriptに変数を渡すまとめ」

を参考にさせていただきました!ありがとうございますm(_ _)m。外部のjsに値を渡す方法は幾つかあったのですが、この方法でようやくうまく動きました。

地図を指定する部分をgmaps_data.jsというjsファイルにして、子テーマに保存します。内容は

このようになっています。functions.phpgmap_data_prepareで受け取ったショートコードの引数を元に、ベースの地図を設定しています。

これで、

2行のショートコードからこの地図が表示されるようになります。

地図に複数の吹き出しを表示するショートコードの使い方

「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」で作った 8_overlays.html と同じ地図をショートコードで実現させてみました。

使い方は、

こういうショートコードを投稿や固定ページに書きます。

先ほど追加したベースの地図を描くショートコードの間に、それぞれの吹き出しを1行ずつ指定しています。

ショートコード名:gmap_data_set
機能
地図上に吹き出しを表示する
引数
id:1から順番に指定する
name:吹き出しに表示する名前。省略した場合は 8Beat。
lat:吹き出しのlat(緯度)。省略した場合は 35.6575244
lng:吹き出しのlng(経度)。省略した場合は 139.3349708
class:吹き出しの種類(class)。省略した場合は overlay

吹き出しが必要な数分のショートコード gmap_data_setを追加します。

表示させるとこのように、複数の吹き出しが表示されました(^^)/。ショートコードにしたので追加や削除などが簡単にできると思います♪

地図に複数の吹き出しを表示するカスタマイズ方法

吹き出しを実現する部分のコードについて書きます。

子テーマのfunctions.php

を追加します。これができるまでちょっと苦労したんですが(^_^;、複数の吹き出し情報を保存してあとで識別できるように

としたことでようやく、複数の吹き出しを表示することができました。

吹き出しを表示する部分のjsファイルを gmaps_data_point.js という名前で作ります。中身は

このようになっています。1から一番最後のIDの数字までをループしてすべての吹き出しを表示します。

このような構造になっているのでショートコードに指定するIDは1から順に1つずつ大きくしていかないとうまく表示できません(^_^;。

使い方の例

東京湾付近の駅を吹き出しにした表示です。

このような記述で、

こういう地図ができます。

子テーマに追加するファイルなどのまとめ。作ったファイルを置いておきます

この機能が使えるようになった子テーマの中身は、

このような構成になっています。

それぞれ、子テーマに追加や修正をする方法は以下の通りです。

style.css 地図表示に必要なcssを追加した
それぞれの子テーマによって頭の部分が違うので追加する部分のコードをコピペしてください。

gmaps_data_point.js 吹き出しを表示するjs
gmaps_data.js 地図を表示するjs
追加した2つのファイルはgmaps_ryus.zipこれをダウンロードして解凍してください。

functions.php 地図表示に必要なコードを追加した
functions.phpで追加する部分のコードをまとめると、以下のようになりますのでこれをお使いの子テーマのfunctions.phpにコピペしてください。

gmapsフォルダ GMap.jsのライブラリ
GMap.jsについてはこの手順で子テーマに入れてください

まとめ:簡単に追加できるようにするのは大変でした(^_^;

このカスタマイズはいろいろな紆余曲折があり、思ったよりずいぶん時間(2時間ぐらいでできると思いましたが5時間ぐらいかかった…)がかかってしまいました。

しかし、参考になるサイトなどの情報からようやく作ることができました。

欲を言えばもっともっと便利に使いやすくしたりしたいですが、まぁキリが無いのでこのぐらいにしておきます。また良いカスタマイズができたらblogに書きます(^^)/

[Amazon sponsored link] jquery 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. php より:

    初めまして。

    参考にさせて頂いておりますが「地図を表示するコードを追加する」に記載があるコードを子テーマのfunctions.phpに追記しましたが、構文エラーとなってしまいます。考えられる原因を教えて頂けないでしょうか。
    よろしくお願いいたします。

    • 兎本美佳 兎本美佳 より:

      phpさん、おはようございます。参考にしていただきありがとうございます。

      >functions.phpに追記しましたが、構文エラーとなってしまいます

      構文エラーということですが、具体的にエラーになったときの状況をもう少しお聞かせいただけないとなんとも分かりません。

      いくつか原因を考えますと以下のようなものがあります。
      以前からblogのコードをコピーすると半角スペースの文字コードが化けてしまうという問題が発生しています。特に行の頭の半角スペースが異なる文字コードになってしまい、それが原因でエラーになる場合が多いです。念のためにコピーしてペーストしたコードの冒頭の半角スペースを自分で打ち直して保存、をしてみていただけますでしょうか。

トップへ戻る