超簡単&スマフォ対応のGoogle Mapのプラグインつくった。

こんなタイミングであれですがWordPressにGoogle Mapsを貼り付けるためのプラグインを作りました。

詳細は以下のページに引越しました!
https://firegoby.jp/wp/simple-map

WordPress › Simple Map « WordPress Plugins

会社概要のページなどに企業のお客さんが設置するのを想定していますので低機能ですが、とても簡単に使える上に、レスポンシブデザインのサイトとフレンドリーです。

このプラグインの特徴

  • [map addr="東京都千代田区永田町1-7"] または [map]東京都千代田区永田町1-7[/map] のように住所を指定するだけの簡単なショートコードで地図を設置することができます。
  • 1つのページに複数のGoogle Mapを設置できます。
  • 一定の横幅以下の環境(たとえばスマフォなど、デフォルトは480px以下)では、自動的にGoogle Static Mapsが表示されます。
  • フィルターフックが用意されてるので、柔軟なカスタマイズが可能です。

使い方

プラグインを有効化した後で、以下の様なショートコードをビジュアルエディター等で入力してください。

最もシンプルなパターン

基本的には住所を指定するだけで使用できます。

[map addr="東京都千代田区永田町1-7"]

または

[map]東京都千代田区永田町1-7[/map]
東京都千代田区永田町1-7

 

地図に表示する場所は緯度経度でも指定可能です。

[map lat="35.677443" lng="139.74498"]

 

幅と高さを指定

幅、高さともに%でも指定できます。

[map addr="東京都千代田区永田町1-7" width="400px" height="300px"]
東京都千代田区永田町1-7

 

地図の倍率を指定

デフォルトは16です。

[map addr="東京都千代田区永田町1-7" zoom="18"]
東京都千代田区永田町1-7

 

Google Static Mapsを表示するためのブレークポイントを指定

以下の例では、画面の横幅が320px以下の環境で開くと、Google Static Mapsで表示されます。

この機能は、タッチインターフェースの端末で画面をスクロールさせる時に邪魔にならないのでおすすめです。

この属性が指定されていない場合は、480px以下でGoogle Static Mapsが表示されます。

[map addr="東京都千代田区永田町1-7" breakpoint="320px"]
東京都千代田区永田町1-7

 

各属性のデフォルト値について

各属性にはデフォルト値が設定されています。

またデフォルト値にはフィルターフックがありますので、テーマによってカスタマイズすることで最小限の記述で地図を挿入することが可能です。

属性 デフォルト値 フィルターフック
width 100% simplemap_default_width
height 200px simplemap_default_height
zoom 16 simplemap_default_zoom
breakpoint 480 simplemap_default_breakpoint

JavaScriptについて

Google MapのJavaScriptについてはgmaps.jsを使用しています。

また、JavaScript のパスにもフィルターフックがあります。

add_filter("simplemap_script", "my_map");

function my_map($path) {
    return "path/to/my_map.js";
}