「初心者だけどWEBサイトに見やすい地図を載せたい」
「観光や旅行情報発信のため、カスタマイズして地図をつくりたい」
GoogleMAP等で作成した地図を掲載するWEBサイトがとても多くなりました。
以前はピン（＝マーカー）が立ってズームしたりエリアが動いたりする地図の作成にはJavascriptの知識が必要でしたが、今はWordPressで構築されたWEBサイトであればプラグインで簡単に地図が作れるようになりました。
この記事で使い方の解説するプラグイン「Leaflet Maps Marker」は、管理画面上で地図作成の全工程を済ませられます。また、1つの地図に複数のピンを立てることができ、ルートの紹介や観光地の紹介に便利な使い方ができます。
ピンをクリックすると吹き出しが出て、個別に登録した写真やコメント、問い合わせ先、ルート案内も出せます。すべての作業が管理画面上で済み、難しい技術も使いません。
とても便利なプラグインですので、観光振興のための情報発信に活用していただければと思います。
また、このプラグインとは別に、過去記事［ランキング］観光情報サイトに入れるオススメWordPressプラグイン5選にはもう少し簡易に複数ピンを立てられるマッププラグイン「MapPress Maps for WordPress」の解説もしています。
「MapPress Maps for WordPress」と「Leaflet Maps Marker 」を比較すると、「MapPress Maps for WordPress」のほうが設定箇所が少なく簡単です。表現幅が広いのは「Leaflet Maps Marker」です。それぞれに一長一短ありますので、両方の比較後に、導入するプラグインを決定くださると間違いないと思います。
１．地図作成プラグイン「Leaflet Maps Marker」でできること
https://ja.wordpress.org/plugins/leaflet-maps-marker/
■日本語対応（公式の説明は英語ですが、管理画面は日本語）
■無料（有料プロ版もありますが今回解説するのは無料の範囲内です）
地図のAPIサービスを活用したWordPressプラグインは多数ありますが、この「Leaflet Maps Marker」は、その名（リーフレット）の通り、パンフレットに載っているかのようにスポットをまとめて見せる機能があります。
そのほか、このプラグインに備わっている主な機能を以下にまとめます。
◯1つの地図に複数のピンを立てる
◯住所入力だけでピンを立てる（緯度経度の入力など不要）
◯ピンに吹き出しを出す
◯ピンから別ページ（別記事）へリンクする
◯ルート検索を出す
◯使用する地図APIサービスを複数の選択肢から選ぶ
◯マップデザインの選択、カスタマイズをする
リストで見ているとピンと来ませんが、仕上がりをみると、その便利さ、見栄えの良さに驚きます。ぜひ皆さんに素敵な地図をつくっていただきたいです。
では、初期設定から解説していきます。
２．地図作成プラグイン「Leaflet Maps Marker」の初期設定①APIの選択
プラグインをインストールすると、初期設定の画面が開きます。
まず、「ジオコーディング＞ジオコーディングのプロバイダ」の画面を開き、利用する地図APIサービスの選択をします。
いくつかの中から選ぶことができます。
プラグイン側から推奨されるのは”Mapzen Search”です。ただ、この記事を書いている段階でエラーが出ていましたので、オススメではないです。
日本語で登録できて安心して使えるのは、やはり”Google Geocoding”。GoogleのAPIサービスです。特にGoogleがNGでなければ、”Google Geocoding”を選ぶと使い勝手がよいと思います。
この記事でも”Google Geocoding”を選んで進めます。
APIサービス（プロバイダ）を選択したら、画面いちばん下の保存を押して決定します。
３．地図作成プラグイン「Leaflet Maps Marker」の初期設定②APIキーの取得
まず、地図を動かすために、APIサービスのキーを登録する必要があります。
今回は”Google Geocoding”を使いますので、GoogleのAPIキーを取得→登録します。
◯GoogleのAPIキー取得手順
１．Google Maps Platformのサービス利用を開始する
２．必要事項を登録し、APIキーを発行する
Google Maps Platformの登録は簡単で、ステップは2つ。
特に審査もなく、すぐにAPIキーの発行ができます。
途中でクレジットカードの登録が必要になりますが、自動的に課金されることはありません。安心して登録してください。
APIサービスは利用できるデータ量の上限が決まっていて、その無料枠を超えたときに「課金しますか？」と聞かれます。引き続きMAPを使うのであれば、課金プランに切り替えてください。その後に請求が始まります。
カードを登録したらキーが発行されます。
それをコピーして、管理画面にペーストします。
３．地図作成プラグイン「Leaflet Maps Marker」の初期設定③APIキーの登録
キーをコピーしたら、管理画面「ジオコーディング＞Google ジオコーディングの設定」ページを開き、”Google API サーバキー (必要)”の枠にペースト→変更を保存します。
これで基本的な初期設定は完了です。
４．地図作成プラグイン「Leaflet Maps Marker」で複数のピンが立った地図を作成する①新規レイヤー作成
まず、このプラグインの中に出てくる基本用語で重要なものが以下の2つです。
◯マーカー
◯レイヤー
マーカーはピンと同義で、地図の上に印が付く場所のことです。
レイヤーはそのマーカーをまとめる土台となる地図のこと。
複数のマーカー（ピン）を立てた地図をつくるには、レイヤーをまずつくり、その上に関連付けるようにマーカーをつくっていきます。
今回は”複数のピンが立った地図をつくる”設定ですので、まず新規レイヤーをつくり、その中に連なる形でマーカーを新規作成します。
①APIサービスの選択→”Google Geocoding”
②地図の上部にタイトルとして出す名前を入れる
③表示させたいエリアを登録する（その範囲がデフォルトで地図に表示される）
④マップの大きさ、ズーム（拡大比率）が決まっていれば入力
→表示させたいエリアが広い＝数字が小さい、エリアが狭い＝数字が大きい
建物をはっきり見せたいくらい拡大したい場合は、ズーム16前後。
ちなみにズームを1にすると世界地図になります。
ここまで設定して”公開”をクリックすると、レイヤーが保存されます。これでベースとなる地図が完成しました。※”公開”を押しても誰かに見えるわけではありません
５．地図作成プラグイン「Leaflet Maps Marker」で複数のピンが立った地図を作成する②レイヤーに複数のマーカーを立てる
ここまできたら、あとは必要なマーカーを登録する流れ作業です。
「全レイヤーを一覧＞該当レイヤーを開く＞このレイヤーに新マーカーを追加」から順次マーカーを登録していきます。
マーカーの新規追加作業では、まずそのマーカーの名前と、住所（ピンを立てる場所）を登録します。
このピンに吹き出しを付けてポップアップで情報を表示させることもできます。また、そのポップアップと同じ情報が地図の下部に表示されます。
マーカーに情報を足したいときは、新規マーカーをつくった同じ画面からその情報も登録します。リンクや画像も貼ることができます。
↓管理画面で情報を登録します。WordPressの記事と同じ書き方ができます。
この作業を繰り返して、ピンを立てたい数だけ登録します。
６．地図作成プラグイン「Leaflet Maps Marker」で複数のピンが立った地図を作成する③記事や固定ページに表示させる
レイヤーのショートコードをコピーして、表示させたい記事や固定ページにペーストします。
とても見栄えのよい、パンフレットの1ページのような地図が完成しました。
ピンを立てたスポットをより詳細に紹介したページがあれば、前項のポップアップ内容の登録時にリンクを貼っておくと、この地図を拠点にしてさまざまな記事へのリンクを貼ることができます。
WEBサイトのトップページや、特集ページのトップにも良いですね。
デザインや見栄えは上級者向けの設定で変化を付けられます。
７．地図作成プラグイン「Leaflet Maps Marker」で作成した地図のカスタマイズ
管理画面内に、さまざまなカスタマイズが準備されています。
・QRコード：地図をQRコードで表示させれられます（紙のパンフレットと同期できる！）
・新マーカー/レイヤー用の既定のベースマップ：道路地図以外にも、地形図などを選べる
・地図の折りたたみ
デザインができる方であれば、デザインカスタマイズやオーバーレイの設定など触っているととても楽しいと思います。
ただこのプラグインの最大のポイントは、こういったカスタマイズをせずとも初期設定のままでもきれいな地図ができることです。
最短時間でパンフレットのような地図ができますので、ぜひ紙パンフレットとWEBとの同期にも使ってみてください。
８．まとめ
初心者でも専門的な知識をほぼ使わずに日本語で複数のピンが立った地図が作れるプラグインはそもそも数も少ない中で、「Leaflet Maps Marker 」はカスタマイズも幅広く、見栄えもよいので非常に優秀なプラグインだと思いました。
APIキーの設定さえ終われば、管理画面上で「レイヤー作成、マーカー登録」のすべての作業が終わります。ショートコードをコピペするだけで地図が表示されるのも手軽です。ぜひ観光振興等のWEBサイトにご活用ください。