レスポンシブなクリッカブルマップを作成してみました

先ほどクラウドワークスで以下のような仕事がありました。

この仕事をこなすには、レスポンシブな日本地図を作成する必要があるので、そのやり方を調べて実際に試してみました。

以前、日本地図にリンクを設定する方法という記事を作成しましたが（参考記事: 日本地図にリンクを設定する方法）、この時はスマホで確認すると横スクロールしてしまっていました。

横スクロールしてしまっている様子

今回、横スクロールさせずにレスポンシブ対応を行なったので、記事に残しておきます。

サンプル

都道府県をクリックすると、「都道府県名 + がクリックされました」と表示されます。

横スクロールが出ないようにする

まずは以下のCSSを追加して、スマホの時に横スクロールが出ないようにしました。

img {
  max-width: 100%;
}

この状態だと、リンクの位置がずれてしまっているため、都道府県をクリックしたときに、リンク先のページに飛びません。

image-map-resizerというプラグインを使用する

image-map-resizerとは、クリッカブルマップをレスポンシブ対応させることのできるJavaScriptのライブラリです（GitHubのページはこちら）。

クリッカブルマップとは、クリックできることのできる地図のことです。今回サンプルとして挙げているようなものです。

リソースを読み込む

まずは、以下のスクリプトを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>

関数を実行する

JavaScriptで以下の記述を行います。

imageMapResize();

これで、クリッカブルマップをレスポンシブ対応させることができました。