今回はWordPressのプラグイン「Geo Mashup」で表示するGoogleMapのピン（旗）のアイコンを好きな画像に変更する方法を記載します。

※本記事は「Geo Mashup」のピンのカスタマイズに絞って記載しておりますので、プラグインの導入方法や使い方などは下記サイト様を参考にしてください。
GoogleMapにWordPressの記事をプロットする方法 | Geo Mashup

「Geo Mashup」とは何か？

「Geo Mashup」は、記事ごとに設定した座標位置にピンを立ててGoogleMapを表示してくれるプラグインになります。
ピンのアイコン設定は記事のカテゴリーごとに設定できますので、カラフルなピンを立てたGoogleMapを表示することが可能となります。

今回はこのピンを好きな画像に変更する方法をご紹介致します。

GoogleMapのピンのアイコンを変更する方法

アイコンを変更する方法としては、下記の二通りの方法があります。

①プラグインのフォルダに入っている画像を別の画像に変更する
②画像を設定しているJavaScriptの処理を変更して別の画像を参照する

簡単な変更方法は画像を上書きするだけの①となります。
②はちょっと面倒なうえにソースコードが汚くなるのであまりオススメはしませんが、一応記載しておきます。

方法①：プラグインのフォルダに入っている画像を別の画像に変更する

「Geo Mashup」をインストールすると、サーバー内の”/wp-content/plugins/geo-mashup/”のフォルダに”images”フォルダが生成されます。
“images”フォルダの中にはプラグインで使用する画像が全て入っていますので、その画像を上書きすることでピンのアイコンを変更します。

ちょっと試しにやってみましょう。

まずは”images”フォルダをダウンロードして中身を確認します。
すると、フォルダ内に”mm_36_aqua.png”や”mm_36_black.png”等の画像が存在することが確認できます。

この”mm_36_XXXX.png”というのが、カテゴリーで設定したときの色に対応するピンのアイコンとなっています。
なので、元素材の画像をちょっと加工して下記のようなアイコンを作ってみました。

作ったアイコンで表示させるために、作ったアイコンの名前を”mm_36_aqua.png”という名前にリネームして、サーバー内の”.png”形式のファイルを上書きします。
ファイルを上書きしてからGoogleMapを見ると、下図のように作ったアイコンがピンとして表示されるようになります。

同じようにして”mm_36_black.png”や”mm_36_blue.png”等のアイコンも変更して、オリジナルのアイコンを表示させることができます。

方法②：画像を設定しているJavaScriptの処理を変更して別の画像を参照させる

次に紹介する方法はちょっと難しい方法になりますので、JavaScriptがわからない方は①を試してください。
※違う場所をいじってしまうと、プログラムの処理が変わって予想外の動きをしてしまう場合があるので注意が必要です。

まずはじめに、サーバー内の”/wp-content/plugins/geo-mashup/js/”のフォルダ内の”geo-mashup-mxn.min.js”のファイルをダウンロードします。

ファイルにはJavaScriptの処理が書かれています。
JavaScriptの処理をちょっと変更しますので、まずはファイル内の文言で”return icon”の記述を探します。

“return icon”の記述を見つけたら、処理の前に下記のような処理を追加します。

if( 'aqua' == color_name ) {
  icon.image = '<<使用したい画像のファイルパス>>';
}

ソースコードの書き方としては下記のような記述で構いません。
（下記のように雑に入れたほうが、後になって追加した処理を探す際に探しやすくなるかもしれません。）

処理の概要としては、color_nameには参照する色の名称（”aqua”等）が入ってきますので、特定の文言が入ってきたら参照する画像を変更することで使用する画像を変更しています。
上記の処理では”aqua”の色が指定された際に、別の画像を表示するように変更しています。

JavaScriptを編集する方法は、ちょっと面倒なうえにプラグインの更新が入った際に処理が消えてしまうこともありますので、やはり方法①の方が良いように思います。

やってみると意外と簡単？プラグインを自分の好みに編集してみましょう！

いかがでしたか？

WordPressのプラグインは誰でも使えて非常に便利なのですが、なかなか自分好みの編集ができないことが悩みの種だったりします。
そこで、今回の記事のような画像やアイコンを変更したい場合は、プログラムをいじる必要はなく、画像の上書きでなんとかなってしまう場合もあります。

プラグインを調査するのは非常に面倒ですが、よくよく考えたら簡単な場合もありますので「これはプラグインだから変更は無理！」と諦めてしまった部分をもう一度見直してみると良いかもしれません。
案外簡単に変更ができてしまうかもしれません。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。