都道府県の選択ができるマップの種類と使い方（Japan Map、amCharts）

地図ベースで都道府県を選択して、なにかしらの処理をさせたいといったことがあり、簡単に調査したのでメモとして残しておきます。

jQueryのプラグインとして提供されている「Japan Map」。GitHubの更新は止まっていますが、コードは直感的で分かりやすくUIも洗練されています。とりあえずjQueryを使っていいならこちらのプラグインを選択してよさそうです。

Japan Map (jQuery plugin)

CDNで提供はされていないようなので、実装する場合は自サイトに配置する必要があります。

jQueryを使用しないライブラリに「amCharts」というのがありました。

JavaScript Charts & Maps - amCharts

世界中のエリアを表示することができるライブラリでマップの拡大や縮小といったこともできますが、日本だけのエリアを表示して、都道府県の選択だけをさせたいといった場合は、Japan Mapを使用した方が作りやすいです。

また、ドキュメントはすべて英語で、お世辞にも理解しやすいものではなく、地名の日本語化はできますが、できるのはあくまで国名までとなっていていて都道府県については、自分でデータを変換してやる必要があるので、作り込む場合はちょっと大変そうです。

用意されている日本のGEOデータ（am4geodata_japanLow）を使う場合、都道府県に対応するIDは以下のようになっています。

JP-01 北海道
JP-02 青森
JP-03 岩手
JP-04 宮城
JP-05 秋田
JP-06 山形
JP-07 福島
JP-08 茨城
JP-09 栃木
JP-10 群馬
JP-11 埼玉
JP-12 千葉
JP-13 東京
JP-14 神奈川
JP-15 新潟
JP-16 富山
JP-17 石川
JP-18 福井
JP-19 山梨
JP-20 長野
JP-21 岐阜
JP-22 静岡
JP-23 愛知
JP-24 三重
JP-25 滋賀
JP-26 京都
JP-27 大阪
JP-28 兵庫
JP-29 奈良
JP-30 和歌山
JP-31 鳥取
JP-32 島根
JP-33 岡山
JP-34 広島
JP-35 山口
JP-36 徳島
JP-37 香川
JP-38 愛媛
JP-39 高知
JP-40 福岡
JP-41 佐賀
JP-42 長崎
JP-43 熊本
JP-44 大分
JP-45 宮崎
JP-46 鹿児島
JP-47 沖縄

沖縄の位置を地図の左上に持っていくようなことができそうになかったので、日本の地図として使用する場合は、ちょっと微妙そうです。