MapプラグインMapGeoで、ツールチップ付きの日本地図を作成

Webサイトでは位置を表示する場合、Google Mapをよく使用します。今回は、MapプラグインMapGeoで、ツールチップ付きの日本地図を作成する方法を紹介します。

今回のDEMOは、拡大縮小できる、ツールチップ付きの日本地図です。

右下に拡大縮小ボタンが表示されます。

Setting

プラグインをインストール、有効化します。MapGeo＞Settingをクリックして、設定画面を表示します。Map FeaturesのZoomをONに設定して、保存ボタンをクリックします。

Map Setting

左サイドメニューのMapGeo＞Add New Mapをクリックします。Map作成画面が表示されるので、作成して行きます。

General Details＞Map to DisplayをJapan Highに設定します。Map Previewに日本地図が表示されます。

右側にある、Region CodesのHokkaidoの＋マークをクリックします。地図に色が塗られます。同じようにすべての都道府県の＋をチェックします。すべての都道府県の色が塗られます。

Regions

ツールチップの設定をします。Regions＞HokkaidoのTooltip Contentをローマ字から漢字の北海道に変更します。すべての都道府県を同じように漢字に設定します。

Visual Settings

最後にスタイルの設置をします。Visual SettingsのMin Height、Map Height on Mobileを100%に設定します。残りはデフォルトのままです。

設置

MapGeo＞All Mapsをクリックします。設置したいマップのShortcodeのショートコードをコピーします。編集画面を開き、ショートコードブロックにショートコードをペーストして完成です。

以上で今回の説明は終了です。都道府県ごとに色を塗れるので、インフォグラフィックスなどに使えますね。色の変更も可能なので、サイトのデザインに合わせることが出来ます。