- Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps
- gmaps.js ライブラリを使用した地図表示 – Google Maps
- 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, lat&lng, addr, content のどれか一つを指定します。
| 属性名 | 必須/任意 | 初期値 | 説明 |
|---|---|---|---|
| url | 一つが必須 | – | URL |
| lat,lng | 緯度、経度 | ||
| addr | 住所・地名 | ||
| content | 住所・地名 or 吹き出しテキスト（マーカーをクリックすると表示） |
オプション
| 属性名 | 必須/任意 | 初期値 | 説明 |
|---|---|---|---|
| width | 任意 | 100% | 横幅 |
| height | 任意 | 200px | 縦幅 |
| zoom | 任意 | 16 | ズーム倍率 0~21(0が最小、21が最大) |
| breakpoint | 任意 | 480 | 地図埋め込みか、地図画像リンクにするかのブラウザ横幅のしきい値。最大640。 |
| infowindow | 任意 | close | 吹き出しテキストのデフォルト開閉。<open|close> |
サンプル
位置情報
url (URL)
[cc lang=”bash” theme=”blackboard” width=”99%”] [/cc]| 属性名 | width | height | zoom | breakpoint | infowindow | ○：設定可、-：設定不可 |
|---|---|---|---|---|---|---|
| url | ○ | ○ | – | – | – |
lat,lng (緯度,経度)
[cc lang=”bash” theme=”blackboard” width=”99%”]東京スカイツリー
| 属性名 | width | height | zoom | breakpoint | infowindow | ○：設定可、-：設定不可 |
|---|---|---|---|---|---|---|
| lat,lng | ○ | ○ | ○ | ○ | ○ |
東京スカイツリー
addr (住所・地名)
[cc lang=”bash” theme=”blackboard” width=”99%”]東京スカイツリー
| 属性名 | width | height | zoom | breakpoint | infowindow | ○：設定可、-：設定不可 |
|---|---|---|---|---|---|---|
| addr | ○ | ○ | ○ | ○ | ○ |
東京スカイツリー
content (住所・地名)
[cc lang=”bash” theme=”blackboard” width=”99%”]東京スカイツリー
| 属性名 | width | height | zoom | breakpoint | infowindow | ○：設定可、-：設定不可 |
|---|---|---|---|---|---|---|
| content | ○ | ○ | ○ | ○ | ○ |
東京スカイツリー
オプション
[cc lang=”bash” theme=”blackboard” width=”99%”]東京スカイツリー
| 属性名 | width | height | zoom | breakpoint | infowindow |
|---|---|---|---|---|---|
| 属性値 | 90% | 240px | 17 | 400 | open |
width, height, zoom, infowindow
東京スカイツリー
breakpoint
「breakpoint=”400″」ですと、ブラウザの横幅が400px以下にならないとbreakpointが有効にならないため、便宜的に以下のような地図画像のリンクで再現してみました。クリックするとGoogle Mapsへ遷移します。スマホであればGoogle Mapsアプリが起動します。(iOSはGoogle Mapsアプリのリンクページへ遷移）
カスタマイズ
ストリートビューコントロールの追加
ストリートビューのペグマン（人型のアイコン）を表示したく、コントロールをtrueに設定しました。以下はコードを解りやすくするため、 simple-map.js を記載していますが、実際には simple-map.min.js を変更する必要があります。
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は以下の通りです。
% 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)崩れの修正
(以下の地図はIEで表示しないと違いがわかりません)
2015/09/16
Google の新ロゴが 2015/09/01 に発表されたのを機に、Google Map の CSS もアップデートされたようで（Fixed issue with overly broad CSS classes）当修正は不要になりました。
東京スカイツリー
.gmnoprint {
word-wrap: normal !important;
}
東京スカイツリー