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

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 のソースコードをテキストエディタにコピーして、

とあったところを

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

あとは、

とあったところを、

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

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

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

Image [2]

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

Image [3]

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

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

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

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

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

Image [4]

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

Image [5]

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

Image [6]

さすがにここは

Image [7]

正解でした。

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

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

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

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

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

Image [8]

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

Image [9]

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

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

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

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

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

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

  1. kondou0805 より:

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

    • 兎本美佳 兎本美佳 より:

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

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

トップへ戻る