#はじめに
jQueryのプラグインであるJapan Mapというものを使い日本地図を表示させます。
また、各都道府県をクリックすると指定のページ（都道府県のホームページ）に変遷するようにできたので、その方法も含めてご紹介します。
#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>
すると、下記の画像のような日本地図が表示されます。
#都道府県名を表示させる
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>
#各都道府県をクリックすると指定のページ（都道府県のホームページ）に遷移させる
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>
この場合、色も個別で設定することもできます！
#完成
#参考記事
・japan-map-js公式リファレンス
・JapanMapで描画した日本地図にページリンクを追加する方法
・JapanMapを使った県名付き日本地図の動的描画を行う方法（地図のカラーコードを参照）