MENU

API v3で動くGoogle Maps 決定版かも?

2020 3/22

追記
「Comprehensive Google Map Plugin」は開発もメンテナンスも終了しているので、「Maps Marker Pro」を勧めるアラートが表示されました。管理画面にトラブルも見られますので、このWordPressから削除します。

Attention: the development and maintenance of the “Comprehensive Google Map Plugin” has been discontinued!
A switch to the mapping plugin “Maps Marker Pro” is recommended – please click here for more information

「Lightweight Google Maps」もダメ、「Geo Mashup」もイマイチ動作が危ない、そして3つめの「Comprehensive Google Map Plugin」。使いやすさ、安定度とも、決定版かも?

その他にも、WordPress のプラグインサイトで評判の良さそうなのを試用したけれど、機能や表現の面で物足りなかったし…。

目次

Comprehensive Google Map Plugin

「Comprehensive Google Map Plugin」の主な機能
グローバルマップ(一覧=Mashup)と記事ページの地図が自動で連動。
ウィジェットにも対応。
マップ上のマーカーを選べる。
個別ページ上に複数のマーカーを置ける。

その他、設定できる項目がいろいろ…。
「Geo Mashup」のバグフィックスをしてくれたプログラマ君もこれを使っているもよう(信頼度アップ)。

1.インストール
プラグイン「新規追加」から「Comprehensive Google Map Plugin」をインストールし、有効化。

2.設定
左メニュー「設定」の下に「Google Map」項目が追加。

Comprehensive Google Map Plugin

個別ページへの挿入

プラグインを有効化すると、投稿編集画面の下部に多くの設定項目が表示されます。

・絶対に必要な設定は、右図の3つです(が、表示サイズや倍率、マーカなど細かい設定もどうぞ)。

※「Enter marker info bubble text here(optional)」欄は「optional」じゃないようです。
  この欄を空にしたままだと、アラートが出て先に進めませんので、適当なテキストを!

・最後に「Send to Editor」をクリックすると、編集画面のカーソル位置にマップのコードが挿入されます。

マッシュアップマップのページを作る

・左メニュー「Google Map」の「Shortcode Builder」をクリック。開いた画面がマッシュアップマップの設定画面です。サイズや表示を自由に設定します。

・中程のメニュー「GEO Mashup」の「Make this map a Marker Geo Mashup」にチェックを入れるとマーカーが非表示になります。各記事で設定した地図のポイントを一括表示するためなので、マーカーはいらないですから。

・すべての設定が終わったら、「GENERATE SHORTCODE」をクリック。別パレットに書き出されるコードをコピーして、投稿か固定ページにペースト。

ウィジェットで使う

・ウィジェット挿入画面に「AZ::Google Map」という項目が追加されるので、それをサイドバーやフッターなど任意の位置にドラッグ&ドロップ。

・目的の場所にマーカーを設置することも、マッシュアップマップを作る事もできます。

ちょっとだけ使い易くする

不要なマーカーを削除

・マーカーが多すぎる(こんなにいらんって! 場所取るし)。なので、使いそうなマーカーだけ残し、あとを削除&表示スペースを縮める。

・「/wp-content/plugins/comprehensive-google-map-plugin/assets/css/images/markers/」内の不要なマーカーを削除。
※爆笑! マーカーを引っ張っているソースがわからないので、原始的に「ナシ」に。

そのままだと高さが変わらないので、functions.php の377行目あたりを編集。

$items = "<div id='".$attr['id']."' class='".$attr['class']."' style='margin-bottom: 15px; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; height: 200px; overflow: auto; 


   ▼

$items = "<div id='".$attr['id']."' class='".$attr['class']."' style='margin-bottom: 15px; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; height: 60px; overflow: hidden;

自分用のマーカーをプリセットされた状態にしたい時は…

「/wp-content/plugins/comprehensive-google-map-plugin/assets/css/」内の「cgmp.admin.css」を編集。

fieldset.fieldset table input.default-marker-icon{background:url(‘images/markers/1-default.png‘) no-repeat scroll 0 0 transparent !important}

個別ページに入れるマップのサイズを任意の値にセットしたい時は…

「/wp-content/plugins/comprehensive-google-map-plugin/data/」内の「html.elements.form.params.json」を編集。

20行目あたり
“dbParameterName” : “width”,
“dbParameterValue” : “400“,   ← よく使う横サイズに

28行目あたり
“dbParameterName” : “height”,
“dbParameterValue” : “250“,   ← よく使う縦サイズに

mapサンプル
目次
目次
閉じる