Wordpressテーマの販売やHTMLテンプレートの無料配布

MapPress Easy Google Mapsでマップを!各ページのピンを一つの地図にまとめる

2015.12.08

何らかのお店などの店舗情報を掲載しているサイトを運営している方は、「各店舗情報ページに、その店の場所がわかるようにマップを掲載したいな」と思ったりしませんか?

例えば、全国のエステサロンを紹介するサイトを作り、各都道府県にあるエステサロンの店舗情報ページを作成。「店舗場所のところにピンを立てたマップをページに掲載したい!」と考える人もいると思います。

「できれば、作成した各店舗情報のページのマップのピンを一つにマップにまとめたい」と思ってる人もけっこういるのではないでしょうか?

そういったことが簡単にできるプラグインがあるのでご紹介します。

Googleマップにピン(マーカー)を立てよう

Googleマップを簡単に設置し、マップ上にピン(マーカー)を立てることが出来るプラグインというのが、「MapPress Easy Google Maps」というプラグインです。

このプラグインは基本的には無料ですが、有料でアップグレードすることもできます。

管理画面の「プラグイン」→「新規追加」で「MapPress Easy Google Maps」を検索。

map_01

インストール&有効化をしてください。

map_02

プラグインを有効化すると管理画面のメニューに「MapPress」という項目ができるので、それをクリックすると設定画面が開きます。

2か所だけやっておいたほうがよい設定があるので書いておきます。

map_04

「ローカライズ」というところの「言語」の部分に、「ja」と書き込んでおくと、Googleマップ内の表記が日本語になります。

map_03

次に「その他」のところの「マップサイズ」のところでサイズを指定しておくと使いやすいです。なぜか「太さ」と書かれてますがここは幅です。「Height」は高さです。

幅100%と書き込んでおくとレスポンシブに対応し、スマホなどで見た時にスマホ画面に合わせてサイズが変化します。縦サイズは350px前後くらいにしておくとパソコン画面でもスマホ画面でも見やすいです。

ラジオボタンにチェックが入っているサイズが個別ページにマップを掲載するときのデフォルトサイズになります。

投稿ページなどにマップを掲載しよう

「投稿」や「固定ページ」などの記事投稿ページに行くと、下記のように「MapPress」というものが追加されています。

map_05

マップを作るために「新規マップ」というボタンをクリック。

map_06

すると上記のようなフィールドなどが現れます。

map_07

マップの場所指定するために、赤で囲ったフィールドに、ピンを表示させたい場所の住所などを入力します。住所でも良いですし、緯度経度でもOKです。

あとは、有名な場所であれば住所などではなく建物名などで大丈夫なものもあります。(例えば東京スカイツリーとか東京ビッグサイトとか)

試しに東京スカイツリーの住所を入力してから虫眼鏡のアイコンをクリック。

map_08

すると、東京スカイツリーの場所にピン(マーカー)が打たれます。

map_09

地図上に打たれたピン(マーカー)をクリックすると小さなエディタが出現し、Googleマップ上でピンをクリックしたときに表示される吹き出しの中を作成することができます。写真なども入れ込むことができます。

編集が終わったら「保存」をします。

map_10

保存を完了させると上記のような表示になるので、「記事に挿入」をクリック。

map_11

すると投稿記事エディタの中にマップのショートコードが挿入されます。この状態で記事を公開すると、ページにマップが表示されるようになります。

下記の画像は投稿した記事の中にマップを設置した例です。

map_12

このような感じで各店舗の情報ページを作りマップを掲載しておくと、場所を知りたいユーザーに見やすくわかりやすい店舗情報ページになると思います。

このプラグインはアップグレードするともっと良いことができます

この「MapPress Easy Google Maps」というプラグインは基本的には無料で使えます。ですがアップグレード版もあります。

価格はBasic License(3サイト分)で$29.95。1サイト分だと1,000円くらいですので安いです。Developer Licenseは無制限。Developer Licenseの価格は$49.95なので5,000円くらいですね。いずれにしても高くないプラグインなのでアップグレードも検討してみると良いと思います。

ただ「One year of updates and support」という表記があるので、1年間しかアップデートやサポートはしませんということなのでしょうか?

この部分はよくわからないので、ご自身でお調べになってください。

アップグレード版でできること

【できることその①】

SnapCrab_NoName_2015-12-8_1-46-18_No-00

まず、マップ上のピン(マーカー)を別のものに変更することができる。自分で用意した「png」画像ファイルのアイコンなどをピンにすることも可能です。各ページ、別々のピンを指定することができます。

【できることその②】

map_13

各個別ページに設置したマップのピン(マーカー)をひとつのマップ上にまとめて表示させることができます。

map_14

ピン(マーカー)をクリックすると吹き出しがでますので、その中のタイトルリンクをクリックするとその個別に移動します。

yaji_down

map_15

各ページのピン(マーカー)をひとつにまとめる方法はとても簡単です。下のショートコードを、「投稿」や「固定ページ」の投稿記事本文エディタに書き込むだけ。

これだけで、各ページのマップ上のピンをひとつのマップにまとめることができます。

ウィジェットでショートコードが使えるように設定のしてあるwordpressテーマでしたら、サイドバーなどのウィジェットエリアにもショートコードでマップを設置することができます。

アップグレード版でできることを2つ紹介しましたが、このほかにももうちょっといろいろとできることがあります。

管理画面の「MapPress」の設定画面を見ると、無用版ではなかった設定があることに気づくと思いますので、いろいろといじってみてください。

このプラグインがあればアイディア次第でいろんなサイトが出来そうですよね♪例えば、脱毛サロンミュゼプラチナムの全国店舗情報サイトなど作ってみたいなぁと思いました^^

いろんな場面で活躍できそうなプラグインですので、ぜひ使ってみてください♪

当サイトに掲載された記事・写真の無断転載を禁じます
Copyright 2015 HTM-WEB All Rights Reserved.