「jmap jquery plugin」で地図の各都道府県をクリックしたとき、任意リンク先に飛ぶよう設定したい

前提・実現したいこと

jmap jquery plugin というプログラムを使って簡易な都道府県の画像を表示させ、
各都道府県をクリックすると、任意のリンク先に飛ばしたいと考えています。

イメージとしては、全国歯科医院マップのようなもので、都道府県をクリックすると、その地域のリストが並ぶページに飛ばすようなものです。

試したこと

上記HPのサンプルコードを活用し、見よう見まねで、以下のようにjavascriptを記述しました。これをローカル環境のwordpressで動作確認しているのですが、どうにもうまく行きません。

$(document).ready(function() {

var areaLinks = {
1: 'http://www.pref.hokkaido.lg.jp/',<!-- リンク先はだたのサンプルで何でもかまいません -->
2: "https://www.pref.aomori.lg.jp/"<!-- 47都道府県すべて設定するつもりですが、ここでは省略 -->
};

    $('#jmap').jmap({
        height: '450px',
        lineColor: '#bfbfbf',
        lineWidth: 1,
        showInfobox: true,
        backgroundRadius: '0.3rem',
        backgroundPadding: '1rem',
        backgroundColor: '#ff000000',
        prefectureClass: 'prefecture',
        prefectureLineColor: '#ffffff',
        prefectureLineWidth: 1,
        prefectureLineHoverColor : '#fff',
        fontSize: '0.8rem',
        fontColor: '#000',
        font: 'serif',
        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" }
        ],
        onLoad: function(e, data) {
            $(this).html('<strong>' + data.name + '</strong>');
        },
        onSelect: function(e, data) {
          location.href = areaLinks[data.area.code];
         },
       onHover: function(e, data) {
         console.log(data);
        },

    });
});

発生している問題・エラーメッセージ

地図は表示されているので、jmap jquery plugin自体は読みこめているもようです。
google chromeのconsoleでは、次のようにエラー表示され「code」に関する記述に誤りがあるようです…。

Uncaught TypeError: Cannot read property 'code' of undefined

おそらく、以下の書き方か、リンク先の書き方に問題があると考えています。

該当のソースコード

onSelect: function(e, data) {
          location.href = areaLinks[data.area.code];

元々、こちらは類似プログラムで当サイトの「Japan Map」の質疑応答などを参考に設定したもので、そもそもの書き方自体を変えないとならないのだと想像しています。
ですが、javaなどは全くの素人なので行き詰ってしまった状況です。

不躾なお長いで申し訳ないですが、他にお伺いできる相手も場所もなかったため、恥を忍んでお伺いいたします。
どなたかわかる方がおられましたら、ご教授いただけますと幸いです。

Lhankor_Mhy

2021/03/15 08:12

ご提示のこの質問は Jmap ではない別のプラグインの質問なので、参考にしてはいけないと思うのです。 https://teratail.com/questions/110124

行動規範の内容に同意します

回答1件

ベストアンサー

全く試していませんが、こうするとどうなりますか？

js
1        onSelect: function(e, data) {
2          location.href = areaLinks[data.code];
3         },

投稿2021/03/15 08:15

Lhankor_Mhy

総合スコア36928

hourou_tarou

2021/03/15 08:54

ありがとうございます。上記で見事に希望の形が実現しました！エラーも何も表示されていません。もう感謝しかございません。この度は面倒な初心者のお相手をいただきありがとうございました。 Jmap ではない別のプラグインを参考にしていた点も含め、ご面倒をお掛けしたこと、深くお詫びいたします。本当にありがとうございました！