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

【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にリポジトリをあげていますのでディレクトリ構成は以下をご確認下さい。

 

2件のコメント

  1. 良質の記事有難う御座います。
    こちらの拡張プラグインをインストールしようとしましたところ、以下のエラーが発生し、インストールできませんでした。

    パッケージをインストールできませんでした。 PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    バージョンはそれぞれ以下となります。
    Wordpress 4.9.5
    Basic Google Maps Placemarks 1.10.7
    Really Simple CSV Importer 1.3

    可能であればアップデートしていただけますと幸いです。
    よろしくお願いいたします。

  2. 申し訳ございません。こちらの確認ミスでした。
    問題なくインストールできました。
    今後もこちらのブログを拝見し勉強させていただきます。
    引き続き応援させていただきます。

お気軽にコメントをどうぞ

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください