japan-map-jsを使って日本地図を表示させる

#はじめに
jQueryのプラグインであるJapan Mapというものを使い日本地図を表示させます。
また、各都道府県をクリックすると指定のページ（都道府県のホームページ）に変遷するようにできたので、その方法も含めてご紹介します。
![map.gif](https://j.gifs.com/k28gJx.gif)

#mapの表示
head内にjQueryとjapan-map-jsを読み込むコードを記述します。

```
<head>

    省略    

    <script type="text/javascript" src="https://unpkg.com/japan-map-js@1.0.1/dist/jpmap.min.js"></script>　//追記
    <script type="text/javascript" src="dist/jpmap.min.js"></script>　//追記
</head>
```
次にhtmlに地図を設置するdiv要素を作成します。

```
<div id="my-map"></div>
```

そして、javascriptで以下のように記述します。

```
<script>
var d = new jpmap.japanMap(document.getElementById("my-map"), {
    onSelect: function(data){
      alert(data.name);
  }
});
</script>
```
すると、下記の画像のような日本地図が表示されます。
![スクリーンショット 2021-07-15 032334.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/843d9155-de1a-6b13-0880-a4877e77434b.jpeg)

#都道府県名を表示させる
htmlの``<script>``タグ内を以下のように変更します。

```
<script>
var d = new jpmap.japanMap(document.getElementById("my-map"), {
  showsPrefectureName: true, //都道府県名を表示させる
  width: 1000,　//横幅のサイズ
  movesIslands: true, //沖縄地方が地図の左上の分離されたスペースに移動する
  lang: 'ja', //表示させている都道府県名を日本語にする
  onSelect: function(data){
    alert(data.name);
  }
});
</script>
```

![スクリーンショット 2021-07-15 190218.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/0c36fc17-7bbc-cb10-be90-847e53a71de3.jpeg)



#各都道府県をクリックすると指定のページ（都道府県のホームページ）に遷移させる
htmlの``<script>``タグ内を以下のように変更します。

```
<script>
var areaLinks = {
		         1:"https://www.pref.hokkaido.lg.jp/",　//リンク先URL
                 2:"https://www.pref.aomori.lg.jp/",
　　　　　　　　　 3:"https://www.pref.iwate.lg.jp/",
                 4:"https://www.pref.miyagi.lg.jp/",
                            ・
                            ・
                        　　省略
                            ・
                            ・
	    };

var d = new jpmap.japanMap(document.getElementById("my-map"), {
    areas: [
    {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee"},
    {code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 7, name: "福島", color: "#759ef4", hoverColor: "#98b9ff"},
    {code : 8, name: "茨城", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 9, name: "栃木", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 10, name: "群馬", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 11, name: "埼玉", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 12, name: "千葉", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 13, name: "東京", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 14, name: "神奈川", color: "#7ecfea", hoverColor: "#b7e5f4"},
    {code : 15, name: "新潟", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 16, name: "富山", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 17, name: "石川", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 18, name: "福井", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 19, name: "山梨", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 20, name: "長野", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 21, name: "岐阜", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 22, name: "静岡", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 23, name: "愛知", color: "#7cdc92", hoverColor: "#aceebb"},
    {code : 24, name: "三重", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 25, name: "滋賀", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 26, name: "京都", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 27, name: "大阪", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 28, name: "兵庫", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 29, name: "奈良", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 30, name: "和歌山", color: "#ffe966", hoverColor: "#fff19c"},
    {code : 31, name: "鳥取", color: "#ffcc66", hoverColor: "#ffe0a3"},
    {code : 32, name: "島根", color: "#ffcc66", hoverColor: "#ffe0a3"},
    {code : 33, name: "岡山", color: "#ffcc66", hoverColor: "#ffe0a3"},
    {code : 34, name: "広島", color: "#ffcc66", hoverColor: "#ffe0a3"},
    {code : 35, name: "山口", color: "#ffcc66", hoverColor: "#ffe0a3"},
    {code : 36, name: "徳島", color: "#fb9466", hoverColor: "#ffbb9c"},
    {code : 37, name: "香川", color: "#fb9466", hoverColor: "#ffbb9c"},
    {code : 38, name: "愛媛", color: "#fb9466", hoverColor: "#ffbb9c"},
    {code : 39, name: "高知", color: "#fb9466", hoverColor: "#ffbb9c"},
    {code : 40, name: "福岡", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 41, name: "佐賀", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 42, name: "長崎", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 43, name: "熊本", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 44, name: "大分", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 45, name: "宮崎", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 46, name: "鹿児島", color: "#ff9999", hoverColor: "#ffbdbd"},
    {code : 47, name: "沖縄", color: "#eb98ff", hoverColor: "#f5c9ff"},
  ],

  showsPrefectureName: true,
  width: 1000,
  movesIslands: true,
  borderLineColor: "#000000",
  lang: 'ja',
  onSelect: function(data){
     location.href = areaLinks[data.area.code];
  }
});
</script>
```
この場合、色も個別で設定することもできます！
#完成
![map.gif](https://j.gifs.com/k28gJx.gif)

#参考記事
・[japan-map-js公式リファレンス](https://github.com/HemingwayLee/japan-map-js)
・[JapanMapで描画した日本地図にページリンクを追加する方法](https://rmtmhome.com/html5-canvas-japanmap-custom4-447)
・[JapanMapを使った県名付き日本地図の動的描画を行う方法](https://rmtmhome.com/html5-canvas-japanmap-custom1-428)（地図のカラーコードを参照）