WorodPressにGoogleMapをShortCodeで挿入するプラグインを自作してみる

取得したデータをもとにショートコードでマップを表示する。

ショートコードとマップの表示のプログラムは以下になります。

上記のコードの簡単な説明に入ります。

・後から変更したいグーグルマップの属性値のデフォルトを登録する

ショートコードを挿入するときに変更したい値を「’名前’=>’値’」の形でここに記入します。

投稿画面にショートコードを挿入する場合[bit_gmap address=’藤沢市片瀬山3′ zoom=19]のように書きますが、この時’address’ => false,が’address’ => ‘藤沢市片瀬山3’,に書き換わります。

・キャッシュしてあるジオコードのデータの取得

前に作成したジオコードメソッドを使用し、緯度経度など必要なデータを取り出します。

・一意IDの生成

あくまでもひとつのIDに対してひとつのマップを表示します。複数のマップを表示したい場合は表示させたいマップの数だけ一意のIDが必要になります。

uniqid()メソッドを使用して一意のIDを取得します。

・Google Maps JavaScript API でマップを表示する  。

簡単に流れを説明します。

キャッシュしてある経度緯度をマップに登録。

 

登録した経度緯度をマップのセンターに設定。

 

オプションをもとに地図を生成。

 

マップ上の緯度経度にマーカーを表示。

上記をすべて実行する。

ショートコードを登録

下記のコードでワードプレスにショートコードを登録します。

これで完成になります。後は出力用のコードを貼り付ければ、地図が表示されます。

出力用コードの挿入

1.投稿画面の任意の場所に下記コードを貼り付ける。

2.single.phpの<?php the_content(); ?>の下あたりに下記のコードを貼り付ける。

以下のように地図が表示されてすべて完成です。

gmap表示

おススメ関連記事

コメント

0

コメントして下さい

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です