- Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps
- gmaps.js ライブラリを使用した地図表示 – Google Maps
- Google Maps JavaScript API V3 を使用した地図表示- Google Maps (作成中)
INDEX
WordPress記事に地図を表示するには、いろいろな方法がありますが、まずは一番お手軽な「Simple Map」というWordPressプラグインを使ってみました。作者は日本の方で、名前がシンプルが付くだけに非常に簡単に地図を表示できます。地図表示できるのは1地点のみになりますが、普通は1地点を表示できれば大概は問題ないですね!また地図表示にはgmaps.jsライブラリを使用しています。
インストールはいつもの通り管理画面のプラグイン画面から「Simple Map」で検索しインストールします。バージョンは2.2.0(2014/12/13時点)です。インストール手順は割愛します。またシンプルなだけに設定画面もありません。
このプラグインの面白いところは、端末のブラウザの横幅(breakpoint)が480px以下の場合、地図画像に切り替りリンクがGoogle Mapsへの遷移となることです。5インチ以下のスマホなどでは、なかなかよい機能だと思います。
まずは 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; }
東京スカイツリー
「Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps」への1件のフィードバック