Simple Map – 超簡単＆スマフォ対応のGoogle Map

WordPressにGoogle Mapsを貼り付けるためのプラグインを作りました。

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

このプラグインの特徴

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

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

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

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

東京都千代田区永田町1-7

[map lat="35.677443" lng="139.74498"]緯度経度で指定[/map]

緯度経度で指定

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

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

東京都千代田区永田町1-7

デフォルトは16です。

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

東京都千代田区永田町1-7

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

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

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

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

東京都千代田区永田町1-7

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

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

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

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

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

add_filter("simplemap_script", "my_map");

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

バージョン 0.6.0 から、Google MapのURLを貼り付けるだけでも地図を挿入できるようになりました。

詳しくは以下のページでどうぞ。

バージョン 1.1.0からinfoWIndowに対応しました。

詳しくは以下のページで。

また、2.0.0から以下のようにデフォルトでinfoWIndowを開くこともできます。

[map infowindow="open"]Kushimoto, Japan[/map]

Kushimoto, Japan