MENU
WordPressを中心にITネタを画像付きでわかりやすく丁寧に解説(旧:ゆうそうとITブログ)
当サイトには広告が含まれております

日本地図を表示するjQuery プラグイン Japan Mapは簡単便利

広告
インターネット JQuery オープンソース
日本地図
この記事は最終更新日から10年経過しています。内容が古い可能性があります。

Image [10]

jQueryについてちょっと別の事で検索をしていたのですが、偶然「日本地図を表示するjQuery プラグイン Japan Map」を見つけました。日本地図を表示したりクリックしてページに遷移したりできそうな面白いものだったので、どんな風に使えるかを試してみました。

記事をざっと見る

日本地図を表示するjQuery プラグイン Japan Map とは？

Image

http://takemaru-hirai.github.io/japan-map/

Takemaru Hiraiさんが作られて公開しているjQueryプラグインです。このページにこのプラグインの使い方やサンプルコードが載っています。このjQueryを使うだけで日本地図が表示出来ちゃう！というのはとても簡単で楽しそうです。

ライセンスも　MITライセンス　なので色々なことに使えそうです。

ファイルをダウンロードして動かしてみる

http://takemaru-hirai.github.io/japan-map/example/index.html

と同じことができるように試してみます。

Image

上記サイトから　zip　ファイルをクリックしてダウンロードします。

Image [1]

zipファイルを解凍するとこのようなフォルダができます。

このフォルダを　japanmap　という名前にします。

テスト用のhtmlを置くディレクトリに　js　というフォルダを作ってその中に　japanmap　フォルダを入れます。

EXAMPLE 1　のソースコードをテキストエディタにコピーして、

    <script src="/path/to/jquery.min.js"></script>

とあったところを

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

としました。ファイルをダウンロードするのが面倒なので、このようにしました。jqueryファイルをダウンロードして使う場合はそのファイルが置いてある場所に書き換えてください。

あとは、

    <script src="/path/to/jquery.japan-map.min.js"></script>

とあったところを、

    <script src="js/japanmap/jquery.japan-map.min.js"></script>

と書き換えました。書き換えた結果のソースは

<!DOCTYPE html>
<html>
<head>
    <title>Japan Map - EXAMPLE 1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/japanmap/jquery.japan-map.min.js"></script>
    <script>
        $(function(){
            $("#map-container").japanMap({
                onSelect : function(data){
                    alert(data.name);
                }
            });
        });
    </script>
</head>
<body>
<div id="map-container"></div>
</body>
</html>

こんな感じです。この　example1.html　という名前で以下のファイルを保存します。

ブラウザでこのこのhtmlを実行すると

Image [2]

このように日本地図が表示されました(^^)/。とても簡単ですね

Image [3]

クリックすると　県の名前　が表示されます。

サーバにも置いてみましたので良かったら試してください　example1.html

県名当てにカスタマイズしてみる

私は地理が苦手で、県名がなかなかおぼえられません。ということでこのプラグインを使って県名当てにカスタマイズしてみました。

ソースはこんな感じです。

<!DOCTYPE html>
<html>
<head>
    <title>Japan Map - 県名当て</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/japanmap/jquery.japan-map.min.js"></script>
    <script>
        $(function(){
            $("#map-container").japanMap({
                width: 830,
                onSelect : function(data){
                seikai = '\nこの県は ' + data.name + ' です。';
                kenmei = window.prompt('県名を入力してください\n(○○県、とかまで入れてね)', '');
                if (kenmei == data.name) {
                    alert('正解！' + seikai);
                } else {
                    alert('はずれ。。。orz ' + kenmei + ' ではなくて、' + seikai);
                }
                }
            });
        });
    </script>
</head>
<body>
<div id="map-container" style="width:1200px;"></div>
</body>
</html>

Image [4]

このように適当な県をクリックして、県名を入力

Image [5]

間違ってると、こんな感じになります（本当に間違えました(^_^;）。

Image [6]

さすがにここは

Image [7]

正解でした。

という感じのモノです。。これもサーバにも置いてみましたので良かったら試してください　map.html

日本地図を使ってリンクページを表示する

より具体的な使い方としてはホームページなどで県をクリックしたらその県についてのページにジャンプする、というようなことがあるかと思います。

県をクリックしたら県のページに飛ぶコードを書いてみました。

<!DOCTYPE html>
<html>
<head>
    <title>Japan Map - 県名別のページを表示する</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/japanmap/jquery.japan-map.min.js"></script>
    <script>
        $(function(){
            $("#map-container").japanMap({
                width: 830,
                onSelect : function(data){
                window.location.href = 'pref' + data.code + '.html';
                }
            });
        });
    </script>
</head>
<body>
<div id="map-container" style="width:1200px;"></div>
</body>
</html>

ソースはこんな感じです。県をクリックしたときに　data.code　というところに　1～47の県コードが入っています。それを利用して県別のhtmlページを作っておいてそこにジャンプする感じのものです。

Image [8]

このように北海道をクリックしたときに

Image [9]

北海道のページにジャンプする感じです。

これもサーバにも置いてみましたので良かったら試してください　maplink.html

全部作るのは面倒だったので　北海道と沖縄だけページを作りました。

まとめ：日本地図が使えると色々応用できそうですね

このように日本地図が簡単に使えると色々応用ができそうです。このblogに書いたように導入も簡単で、ライセンスもMITライセンスなのでほぼ自由に使うことができそうです。

是非試してみてください(^^)/

インターネット JQuery オープンソース
日本地図

この記事が気に入ったら
いいね または フォローしてね！

あなたのシェアが励みになります！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （4件）

  • いつも拝見し、勉強させて頂いております。
    今回も、おかげさまで日本地図を表示させることが出来ました。
    有難うございます。
    が、目的の「日本地図を使ってリンクページを表示する」がどのようにすれば良いのか分からず、不躾ながらコメントさせて頂きました。
    リンク先を見てみたのですが、残念ながら私のパソコンでは開けず・・・。
    お忙しいとは存じ上げますが、もし宜しければご教授願えませんでしょうか。
    よろしくお願い申し上げます。

    返信

    • kondou0805さん、こんにちは。記事をご利用いただきありがとうございます。
      「日本地図を使ってリンクページを表示する」が表示できないということをお聞きして確認したところEdgeとie11で、確かに表示できていませんでした！
      chromeとFirefoxでは表示されていたのですが文字コードの指定をHTMLに入れてなかったせいでEdgeとie11では表示されないようでした。
      ソースのhead内に　＜meta charset=”UTF-8″＞　を追加したところ表示できることを確認しました。自分ではなかなか気づけないことにお知らせいただき、気がつくことができました。ありがとうございます。

      今一度表示させてみていただけますか？よろしくお願いします。

      返信

コメントを残す

記事をざっと見る