1. Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps
2. gmaps.js ライブラリを使用した地図表示 – Google Maps
3. Google Maps JavaScript API V3 を使用した地図表示- Google Maps (作成中)

WordPress記事に地図を表示するには、いろいろな方法がありますが、まずは一番お手軽な「Simple Map」というWordPressプラグインを使ってみました。作者は日本の方で、名前がシンプルが付くだけに非常に簡単に地図を表示できます。地図表示できるのは1地点のみになりますが、普通は1地点を表示できれば大概は問題ないですね！また地図表示にはgmaps.jsライブラリを使用しています。

インストールはいつもの通り管理画面のプラグイン画面から「Simple Map」で検索しインストールします。バージョンは2.2.0(2014/12/13時点)です。インストール手順は割愛します。またシンプルなだけに設定画面もありません。

このプラグインの面白いところは、端末のブラウザの横幅（breakpoint）が480px以下の場合、地図画像に切り替りリンクがGoogle Mapsへの遷移となることです。５インチ以下のスマホなどでは、なかなかよい機能だと思います。

まずは Simple Map プラグインのショートコードから。

ショートコード

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

位置情報

オプション

サンプル

位置情報

url (URL)

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

lat,lng (緯度,経度)

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

addr (住所・地名)

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

content (住所・地名)

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

オプション

[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]

width, height, zoom, infowindow

breakpoint

カスタマイズ

ストリートビューコントロールの追加

    if ($('html').width() > breakpoint) {
        var map = new GMaps({
            div: element,
            lat: pos.lat(),
            lng: pos.lng(),
            mapTypeControl: false,
            zoom: parseFloat(zoom),
            streetViewControl: true,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

% diff -u simple-map.js.org simple-map.js
--- simple-map.js.org   2014-11-16 18:05:32.000000000 +0900
+++ simple-map.js       2014-11-19 22:26:59.000000000 +0900
@@ -20,3 +20,3 @@
             zoom: parseFloat(zoom),
-            streetViewControl: false,
+            streetViewControl: true,
             scrollwheel: false,

IEのデザイン(Copyrights)崩れの修正

.gmnoprint { 
	word-wrap: normal !important;
}