Japan_Mapのデモ

【jQuery】クリッカブルな日本地図を簡単に作成出来る!Japan Mapプラグイン

2014.10.27   5940


日本地図で都道府県をクリックしてリンクさせる。
グルメ系や住宅系のWEBサイトでは定番のUIですね。
ただいざ作ろうとなるとなかなか大変なものだと思います。
今日はそんなクリッカブルな日本地図を簡単に作成できるJapan Mapプラグインを紹介します。


 

Japan Mapプラグインのオススメ/ポイント

  •   クリック可能な日本地図をWEB上に簡単に作成出来る
  •   都道府県だけでなく地方でもクリック可能
  •   色味も自由自在

Japan Mapプラグインのデモ


Japan Mapプラグインのページ


Japan Mapプラグインの使い方

それではJapan Mapプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="map"></div>

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Japan Map js本体 -->
<script src="jquery.japan-map.min.js"></script>
$(function(){
    $("#map-3").japanMap({
        areas  : areas,
        selection : "prefecture",
        borderLineWidth: 0.25,
        drawsBoxLine : false,
        movesIslands : true,
        showsAreaName : true,
        width: 800,
        font : "MS Mincho",
        fontSize : 12,
        fontColor : "areaColor",
        fontShadowColor : "black",
        onSelect:function(data){
            alert(data.name);
        },
    });
});

チェックポイント

上記コードとデモは都道府県をクリック出来るようになっていますが、デモのフルページでは地方別にクリック出来るデモも用意しています。

フルページデモ

色々試して自分なりの日本地図を作成しちゃいましょう。 ちなみにレスポンシブに対応しておりませんので、ご注意下さい。

プラグインへ一言

ただただ制作者に感謝。

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております