![](https://cxg-design.jp/wp-content/uploads/2024/06/geomap_thumb.png)
MapプラグインMapGeoで、ツールチップ付きの日本地図を作成
Webサイトでは位置を表示する場合、Google Mapをよく使用します。今回は、MapプラグインMapGeoで、ツールチップ付きの日本地図を作成する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/d404317fc0304dcd7d72686267316517-1.png)
出典 : MapGeo
今回のDEMOは、拡大縮小できる、ツールチップ付きの日本地図です。
右下に拡大縮小ボタンが表示されます。
Setting
プラグインをインストール、有効化します。MapGeo>Settingをクリックして、設定画面を表示します。Map FeaturesのZoomをONに設定して、保存ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/fac6c8201127c33aa171cb34feaf06a5.png)
MapGeo>Settingをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/7cdef65192933875bec97d4e5720a0f5.png)
設定画面を表示
![](https://cxg-design.jp/wp-content/uploads/2024/06/1e5b04018e0f4d6b2dfd737c62daaf73.png)
ZoomをONに設定
Map Setting
左サイドメニューのMapGeo>Add New Mapをクリックします。Map作成画面が表示されるので、作成して行きます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/e3da2eacecc25149d41d2de808ab8aaf.png)
MapGeo>Add New Mapをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/56a46a4ef2f2737da96359a1ad3547cc.png)
Map作成画面が表示
General Details>Map to DisplayをJapan Highに設定します。Map Previewに日本地図が表示されます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f4041b08dd435db3873c208fee9d0460.png)
Map to DisplayをJapan Highに設定
![](https://cxg-design.jp/wp-content/uploads/2024/06/60ea9093cd0bf879668833a5fb62bf25.png)
日本地図が表示
右側にある、Region CodesのHokkaidoの+マークをクリックします。地図に色が塗られます。同じようにすべての都道府県の+をチェックします。すべての都道府県の色が塗られます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/5313608e86cabbcb3b02a3c8496dab52.png)
Hokkaidoの+マークをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/e940f9a975c4427659f1ce4f61524b8e.png)
すべての都道府県の+をチェック
![](https://cxg-design.jp/wp-content/uploads/2024/06/0850fa556623f251ed4a766fbfafd10d.png)
すべての都道府県の色が塗られる
Regions
ツールチップの設定をします。Regions>HokkaidoのTooltip Contentをローマ字から漢字の北海道に変更します。すべての都道府県を同じように漢字に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f12ccb3fd4a9c272b819a79beead1cce.png)
Tooltip Contentをローマ字から漢字の北海道に変更
![](https://cxg-design.jp/wp-content/uploads/2024/06/de59ad0fb46e89f7d32a2acfc59dbe18.png)
すべての都道府県を同じように漢字に設定
Visual Settings
最後にスタイルの設置をします。Visual SettingsのMin Height、Map Height on Mobileを100%に設定します。残りはデフォルトのままです。
![](https://cxg-design.jp/wp-content/uploads/2024/06/7f2be6026bfb26a6856024ffdb69040d.png)
Min Height、Map Height on Mobileを100%に設定
設置
MapGeo>All Mapsをクリックします。設置したいマップのShortcodeのショートコードをコピーします。編集画面を開き、ショートコードブロックにショートコードをペーストして完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/e7b73d3607b60ba483e2b94c3e785efd.png)
MapGeo>All Mapsをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/4167cdad34beafabe52dff576b4325e2.png)
Shortcodeのショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2024/06/f6de0a89ae63819af081e93b89723e35.png)
ショートコードブロックにショートコードをペースト
以上で今回の説明は終了です。都道府県ごとに色を塗れるので、インフォグラフィックスなどに使えますね。色の変更も可能なので、サイトのデザインに合わせることが出来ます。