Simple Map で簡単に地図表示 WordPressプラグイン – Google Maps

LINEで送る
Pocket

  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への遷移となることです。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%”]
東京スカイツリー
[/cc]
属性名 width height zoom breakpoint infowindow ○:設定可、-:設定不可
lat,lng
東京スカイツリー

addr (住所・地名)

[cc lang=”bash” theme=”blackboard” width=”99%”]
東京スカイツリー
[/cc]
属性名 width height zoom breakpoint infowindow ○:設定可、-:設定不可
addr
東京スカイツリー

content (住所・地名)

[cc lang=”bash” theme=”blackboard” width=”99%”]
東京スカイツリー
[/cc]
属性名 width height zoom breakpoint infowindow ○:設定可、-:設定不可
content
東京スカイツリー

オプション

[cc lang=”bash” theme=”blackboard” width=”99%”]
東京スカイツリー
[/cc]
属性名 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)崩れの修正

テーマがTwenty Fourteenの場合、IEで地図を表示しますと右下のCopyrights「地図データ(c)2014 Google, ZENRIN」のwidthが狭まり、縦に表示されてしまうため、以下のCSSを追加しました。これは Simple Map プラグインが原因ではなくGoogle Mapsの問題ですね。
(以下の地図は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件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。