日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)
JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分(関東、関西等)をクリックすると対応したページに遷移させたい。方法を調べたところJapan MapというjQueryプラグインを利用することで簡単に実装できそう。以下に実装方法をメモ。
目次
公式サイト
リファレンスの確認とプラグインのダウンロードは以下ページから行う。
http://takemaru-hirai.github.io/japan-map/
サンプル
都道府県版
https://taitan916.info/sample/japan-map/
八地方区分版
https://taitan916.info/sample/japan-map/index2.html
都道府県&レスポンシブ対応版
https://taitan916.info/sample/japan-map/index3.html
※レスポンシブはこれで正解なのかどうかは不明なので利用の際は自己責任で。
ソースコード
都道府県版
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Japan Mapサンプル1</title>
</head>
<body>
<div id="japan-map"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./jquery.japan-map.min.js"></script>
<script>
$(function(){
const areas = [
{code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
{code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2], link: "https://google.com/"},
{code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3], link: "https://google.com/"},
{code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4], link: "https://google.com/"},
{code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5], link: "https://google.com/"},
{code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6], link: "https://google.com/"},
{code : 7, name: "福島", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7], link: "https://google.com/"},
{code : 8, name: "茨城", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8], link: "https://google.com/"},
{code : 9, name: "栃木", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [9], link: "https://google.com/"},
{code : 10, name: "群馬", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [10], link: "https://google.com/"},
{code : 11, name: "埼玉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [11], link: "https://google.com/"},
{code : 12, name: "千葉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [12], link: "https://google.com/"},
{code : 13, name: "東京", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [13], link: "https://google.com/"},
{code : 14, name: "神奈川", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [14], link: "https://google.com/"},
{code : 15, name: "新潟", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15], link: "https://google.com/"},
{code : 16, name: "富山", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [16], link: "https://google.com/"},
{code : 17, name: "石川", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [17], link: "https://google.com/"},
{code : 18, name: "福井", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [18], link: "https://google.com/"},
{code : 19, name: "山梨", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [19], link: "https://google.com/"},
{code : 20, name: "長野", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [20], link: "https://google.com/"},
{code : 21, name: "岐阜", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [21], link: "https://google.com/"},
{code : 22, name: "静岡", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [22], link: "https://google.com/"},
{code : 23, name: "愛知", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [23], link: "https://google.com/"},
{code : 24, name: "三重", color: "#ffe966", hoverColor: "#fff19c", prefectures: [24], link: "https://google.com/"},
{code : 25, name: "滋賀", color: "#ffe966", hoverColor: "#fff19c", prefectures: [25], link: "https://google.com/"},
{code : 26, name: "京都", color: "#ffe966", hoverColor: "#fff19c", prefectures: [26], link: "https://google.com/"},
{code : 27, name: "大阪", color: "#ffe966", hoverColor: "#fff19c", prefectures: [27], link: "https://google.com/"},
{code : 28, name: "兵庫", color: "#ffe966", hoverColor: "#fff19c", prefectures: [28], link: "https://google.com/"},
{code : 29, name: "奈良", color: "#ffe966", hoverColor: "#fff19c", prefectures: [29], link: "https://google.com/"},
{code : 30, name: "和歌山", color: "#ffe966", hoverColor: "#fff19c", prefectures: [30], link: "https://google.com/"},
{code : 31, name: "鳥取", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31], link: "https://google.com/"},
{code : 32, name: "島根", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [32], link: "https://google.com/"},
{code : 33, name: "岡山", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [33], link: "https://google.com/"},
{code : 34, name: "広島", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [34], link: "https://google.com/"},
{code : 35, name: "山口", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [35], link: "https://google.com/"},
{code : 36, name: "徳島", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36], link: "https://google.com/"},
{code : 37, name: "香川", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [37], link: "https://google.com/"},
{code : 38, name: "愛媛", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [38], link: "https://google.com/"},
{code : 39, name: "高知", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [39], link: "https://google.com/"},
{code : 40, name: "福岡", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40], link: "https://google.com/"},
{code : 41, name: "佐賀", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [41], link: "https://google.com/"},
{code : 42, name: "長崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [42], link: "https://google.com/"},
{code : 43, name: "熊本", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [43], link: "https://google.com/"},
{code : 44, name: "大分", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [44], link: "https://google.com/"},
{code : 45, name: "宮崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [45], link: "https://google.com/"},
{code : 46, name: "鹿児島", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [46], link: "https://google.com/"},
{code : 47, name: "沖縄", color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
];
$("#japan-map").japanMap({
width: window.outerWidth * 0.95,
selection: "area",
areas: areas,
backgroundColor : "#f2fcff",
borderLineColor: "#f2fcff",
borderLineWidth : 0.25,
lineColor : "#a0a0a0",
lineWidth: 1,
drawsBoxLine: true,
showsPrefectureName: true,
prefectureNameType: "short",
movesIslands : true,
fontSize : 11,
onSelect : function(data){
location.href = data.area.link;
}
});
});
</script>
</body>
</html>「link:"xxxxxxxxx"」の部分を変更することで都道府県に対応したページに遷移させられる。
八地方区分版
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Japan Mapサンプル2</title>
</head>
<body>
<div id="japan-map"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./jquery.japan-map.min.js"></script>
<script>
$(function(){
const areas = [
{code : 1, name: "北海道地方", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
{code : 2, name: "東北地方", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2,3,4,5,6,7], link: "https://google.com/"},
{code : 3, name: "関東地方", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8,9,10,11,12,13,14], link: "https://google.com/"},
{code : 4, name: "中部地方", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15,16,17,18,19,20,21,22,23], link: "https://google.com/"},
{code : 5, name: "近畿地方", color: "#ffe966", hoverColor: "#fff19c", prefectures: [24,25,26,27,28,29,30], link: "https://google.com/"},
{code : 6, name: "中国地方", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31,32,33,34,35], link: "https://google.com/"},
{code : 7, name: "四国地方", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36,37,38,39], link: "https://google.com/"},
{code : 8, name: "九州地方", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40,41,42,43,44,45,46], link: "https://google.com/"},
{code : 9, name: "沖縄地方", color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
];
$("#japan-map").japanMap({
width: window.outerWidth * 0.95,
selection: "area",
areas: areas,
backgroundColor : "#f2fcff",
borderLineColor: "#f2fcff",
borderLineWidth : 0.25,
lineColor : "#a0a0a0",
lineWidth: 1,
drawsBoxLine: true,
showsPrefectureName: true,
prefectureNameType: "short",
movesIslands : true,
fontSize : 11,
onSelect : function(data){
location.href = data.area.link;
}
});
});
</script>
</body>
</html>こちらも「link:"xxxxxxxxx"」の部分を変更することで地方に対応したページに遷移させられる。
都道府県&レスポンシブ対応版
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Japan Mapサンプル3</title>
</head>
<body>
<div id="japan-map"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./jquery.japan-map.min.js"></script>
<script>
$(function(){
const areas = [
{code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1], link: "https://google.com/"},
{code : 2, name: "青森", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2], link: "https://google.com/"},
{code : 3, name: "岩手", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3], link: "https://google.com/"},
{code : 4, name: "宮城", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4], link: "https://google.com/"},
{code : 5, name: "秋田", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5], link: "https://google.com/"},
{code : 6, name: "山形", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6], link: "https://google.com/"},
{code : 7, name: "福島", color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7], link: "https://google.com/"},
{code : 8, name: "茨城", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8], link: "https://google.com/"},
{code : 9, name: "栃木", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [9], link: "https://google.com/"},
{code : 10, name: "群馬", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [10], link: "https://google.com/"},
{code : 11, name: "埼玉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [11], link: "https://google.com/"},
{code : 12, name: "千葉", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [12], link: "https://google.com/"},
{code : 13, name: "東京", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [13], link: "https://google.com/"},
{code : 14, name: "神奈川", color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [14], link: "https://google.com/"},
{code : 15, name: "新潟", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15], link: "https://google.com/"},
{code : 16, name: "富山", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [16], link: "https://google.com/"},
{code : 17, name: "石川", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [17], link: "https://google.com/"},
{code : 18, name: "福井", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [18], link: "https://google.com/"},
{code : 19, name: "山梨", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [19], link: "https://google.com/"},
{code : 20, name: "長野", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [20], link: "https://google.com/"},
{code : 21, name: "岐阜", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [21], link: "https://google.com/"},
{code : 22, name: "静岡", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [22], link: "https://google.com/"},
{code : 23, name: "愛知", color: "#7cdc92", hoverColor: "#aceebb", prefectures: [23], link: "https://google.com/"},
{code : 24, name: "三重", color: "#ffe966", hoverColor: "#fff19c", prefectures: [24], link: "https://google.com/"},
{code : 25, name: "滋賀", color: "#ffe966", hoverColor: "#fff19c", prefectures: [25], link: "https://google.com/"},
{code : 26, name: "京都", color: "#ffe966", hoverColor: "#fff19c", prefectures: [26], link: "https://google.com/"},
{code : 27, name: "大阪", color: "#ffe966", hoverColor: "#fff19c", prefectures: [27], link: "https://google.com/"},
{code : 28, name: "兵庫", color: "#ffe966", hoverColor: "#fff19c", prefectures: [28], link: "https://google.com/"},
{code : 29, name: "奈良", color: "#ffe966", hoverColor: "#fff19c", prefectures: [29], link: "https://google.com/"},
{code : 30, name: "和歌山", color: "#ffe966", hoverColor: "#fff19c", prefectures: [30], link: "https://google.com/"},
{code : 31, name: "鳥取", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31], link: "https://google.com/"},
{code : 32, name: "島根", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [32], link: "https://google.com/"},
{code : 33, name: "岡山", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [33], link: "https://google.com/"},
{code : 34, name: "広島", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [34], link: "https://google.com/"},
{code : 35, name: "山口", color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [35], link: "https://google.com/"},
{code : 36, name: "徳島", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36], link: "https://google.com/"},
{code : 37, name: "香川", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [37], link: "https://google.com/"},
{code : 38, name: "愛媛", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [38], link: "https://google.com/"},
{code : 39, name: "高知", color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [39], link: "https://google.com/"},
{code : 40, name: "福岡", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40], link: "https://google.com/"},
{code : 41, name: "佐賀", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [41], link: "https://google.com/"},
{code : 42, name: "長崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [42], link: "https://google.com/"},
{code : 43, name: "熊本", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [43], link: "https://google.com/"},
{code : 44, name: "大分", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [44], link: "https://google.com/"},
{code : 45, name: "宮崎", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [45], link: "https://google.com/"},
{code : 46, name: "鹿児島", color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [46], link: "https://google.com/"},
{code : 47, name: "沖縄", color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47], link: "https://google.com/"},
];
$("#japan-map").japanMap({
width: window.outerWidth * 0.95,
selection: "area",
areas: areas,
backgroundColor : "#f2fcff",
borderLineColor: "#f2fcff",
borderLineWidth : 0.25,
lineColor : "#a0a0a0",
lineWidth: 1,
drawsBoxLine: true,
showsPrefectureName: true,
prefectureNameType: "short",
movesIslands : true,
fontSize : 11,
onSelect : function(data){
location.href = data.area.link;
}
});
$(window).resize(function(event){
$("#japan-map canvas").remove();
$("#japan-map").japanMap({
width: window.outerWidth * 0.95,
selection: "area",
areas: areas,
backgroundColor : "#f2fcff",
borderLineColor: "#f2fcff",
borderLineWidth : 0.25,
lineColor : "#a0a0a0",
lineWidth: 1,
drawsBoxLine: true,
showsPrefectureName: true,
prefectureNameType: "short",
movesIslands : true,
fontSize : 11,
onSelect : function(data){
location.href = data.area.link;
}
});
});
});
</script>
</body>
</html>ウィンドウ幅を変更した場合にcanvasを再描写する形にしたがこれが正解なのかは不明。一応PCやスマホで見た限りでは正常に動作した。
所感
PCで見る分には問題無いがスマホで見るとゴチャゴチャっと表示され、実用するのは難しいように感じた。スマホのことを考えると「レスポンシブ対応の日本地図」や「都道府県選択UI」の方が良さそう。
関連記事
-
jQuery Nice Selectを特定ページのみ無効にする方法
bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
-
jQuery UI Datepickerで日本の祝祭日を表示
やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...
-
さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法
さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...