【WordPress】Basic Google Maps PlacemarksプラグインにHTML5のGeolocation APIを使って現在地を表示するボタンを追加する方法

wp-light-hi

【WordPress】Basic Google Maps PlacemarksプラグインにHTML5のGeolocation APIを使って現在地を表示するボタンを追加する方法です。

ちなみにBasic Google Maps Placemarksプラグインはお店の各店舗を一つの地図にまとめて表示したいといったときに使えるGoogle Map用のプラグインです。

通常、[bgmp-map]というショートコードを記事に貼り付けるとマーカー付きの地図のみが表示されるのですが、今回はHTML5のGeolocation APIを使って現在地を表示するボタンを追加してみたいと思います。

まず以下のようにBasicGoogleMapsPlacemarksクラスを拡張して、mapShortcodeを上書きします。

BasicGoogleMapsPlacemarksが先に読み込まれないといけないので、plugins_loadedフックを使って全てのプラグインが読み込まれたあと以下のスクリプトが読まれるようにしています。

次に以下のようにビュー(テンプレート)をカスタマイズします。

以上で完成です。

GitHubにリポジトリをあげていますのでディレクトリ構成は以下をご確認下さい。

https://github.com/kurozumi/my-basic-google-maps-placemarks

スポンサーリンク

シェアする

フォローする

スポンサーリンク