jQueryプラグインJapan Mapを使用したマップのカスタマイズ

https://blog.imo-tikuwa.com/draw-japanmap/

上記サイトのような２段階選択式の地図を埋め込まない形で、
行いたいのですが、方法が分からなかったので、
htmlのscript箇所をどのように変更すればよいか教えていただければ幸いです。

■カスタマイズしたい項目
埋め込まない形で
①日本地図から地方を選択
②地方の各都道府県をクリック
③指定したページに飛ぶ（各県ごとに別ページ）

のような仕様にしたいと考えています。

下記コードで上記URLと同じようなページ作成をまず行ったのですが、
作成した両ページとも白紙のページに戻るボタンだけ表示されている状態です。

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8" />
5    <title>japanmapを使用した日本地図選択</title>
6    <link rel="stylesheet" href="japanmap.css">
7 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
8 <script type="text/javascript" src="jquery.japan-map.min.js"></script>
9
10</head>
11<body>
12<iframe id="map" src="map.html?canvasWidth=800" frameborder="0" scrolling="no"></iframe>
13<script>
14    $(function(){
15 
16        var $mapObj = $("#map");
17        $mapObj.on("load", function(){
18            // iframe読み込み後、iframe内のcanvasのサイズを取得し、iframeのサイズを設定する
19            var $iframeCanvas = $('iframe:first').contents().find("#japan-map-container > canvas");
20            $mapObj.attr({
21                width : $iframeCanvas.attr("width"),
22                height : $iframeCanvas.attr("height")
23            });
24        });
25    });
26</script>
27</body>
28</html>
29

map.html

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8" />
5    <title>2段階選択式の日本地図</title>
6    <link rel="stylesheet" href="japanmap.css">
7 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
8 <script type="text/javascript" src="jquery.japan-map.min.js"></script>
9    <script>
10        $(function(){
11             
12            var $mapContainer = $(document).find("#japan-map-container");
13            var canvasWidth = _getUrlParams()['canvasWidth'] && $.isNumeric(_getUrlParams()['canvasWidth']) ? _getUrlParams()['canvasWidth'] : 800;
14            var mapWidth = null;
15            var mapHeight = null;
16            var backgroundPrefColor = "#ababab";
17 
18            /*
19             * 2段階選択式の日本地図を表示する
20             */
21            _initJapanMap();
22            function _initJapanMap() {
23                $("#japan-map-back-btn").hide();
24                $mapContainer.empty().japanMap({
25                    areas: [
26                        {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
27                        {code : 2, name: "東北地方",   color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2,3,4,5,6,7]},
28                        {code : 3, name: "関東地方",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8,9,10,11,12,13,14]},
29                        {code : 4, name: "中部地方",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15,16,17,18,19,20,21,22,23]},
30                        {code : 5, name: "関西地方",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [24,25,26,27,28,29,30]},
31                        {code : 6, name: "中国地方",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31,32,33,34,35]},
32                        {code : 7, name: "四国地方",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36,37,38,39]},
33                        {code : 8, name: "九州地方",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40,41,42,43,44,45,46]},
34                        {code : 9, name: "沖縄",   color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47]},
35                    ],
36                    movesIslands : true,
37                    borderLineWidth: 0,
38                    width: canvasWidth,
39                    onSelect:function(data){
40                        switch (data.code){
41                         
42                            // 北海道
43                            case 1:
44                                $mapContainer.empty().japanMap({
45                                    areas: [
46                                        {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
47                                        {name: "", color: backgroundPrefColor, hoverColor: backgroundPrefColor, prefectures: [2,3,5]},
48                                    ],
49                                    width: canvasWidth * 2.5,
50                                    onSelect:function(data){
51                                        _sendData(data);
52                                    }
53                                });
54                                $mapContainer.find("canvas").css({"top": mapHeight * 0.15, "left": 0 - (mapWidth * 1.55)});
55                                $("#japan-map-back-btn").show();
56                                break;
57                                 
58                            // 東北
59                            case 2:
60                                $mapContainer.empty().japanMap({
61                                    areas: [
62                                        {code : 2, name: "青森県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2]},
63                                        {code : 3, name: "岩手県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3]},
64                                        {code : 4, name: "宮城県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4]},
65                                        {code : 5, name: "秋田県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5]},
66                                        {code : 6, name: "山形県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6]},
67                                        {code : 7, name: "福島県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7]},
68                                        {name: "", color: backgroundPrefColor, hoverColor: backgroundPrefColor, prefectures: [1,8,9,10,11,15,16,17,18,20,21]},
69                                    ],
70                                    width: canvasWidth * 2.8,
71                                    onSelect:function(data){
72                                        _sendData(data);
73                                    }
74                                });
75                                $mapContainer.find("canvas").css({"top": 0 - mapHeight * 0.55, "left": 0 - (mapWidth * 1.65)});
76                                $("#japan-map-back-btn").show();
77                                break;
78 
79
80 
81                    },
82                });
83                 
84                // 初回のみ実施
85                if (mapWidth == null && mapHeight == null) {
86                    mapWidth = $mapContainer.find("canvas").attr("width");
87                    mapHeight = $mapContainer.find("canvas").attr("height");
88                    $mapContainer.css({"width": mapWidth, "max-width": mapWidth, "height": mapHeight, "max-height": mapHeight});
89                }
90            }
91             
92            /*
93             * 都道府県選択時のデータ送信処理
94             */
95            function _sendData(data) {
96                if (data.code) {
97                    window.parent.location.href = "/pref/" + data.code + "/";
98                }
99            }
100             
101            /*
102             * getパラメータを取得
103             */
104            function _getUrlParams() {
105                var vars = [], hash;
106                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
107                for (var i = 0; i < hashes.length; i++) {
108                    hash = hashes[i].split('=');
109                    vars.push(hash[0]);
110                    vars[hash[0]] = hash[1];
111                }
112                return vars;
113            }
114             
115            /*
116             * 戻るボタンクリック時の全国マップ表示処理
117             */
118            $("#japan-map-back-btn").on("click", function(){
119                _initJapanMap();
120            });
121        });
122    </script>
123</head>
124<body>
125<div id="japan-map-container"></div>
126<input type="button" value="&lt;&lt;戻る" id="japan-map-back-btn"/>
127</body>
128</html>
129