ワードプレスやホームページで日本地図を簡単に表示させる！

今回はクライアントのご要望でワードプレスのサイトに日本地図を作成（描画）し、クリック出来るようにしたいと言うご要望でした。
するとjQuery プラグイン Japan Mapと言う素晴らしいプラグインがありました。

それでは早速手順のご紹介です。

①プラグインをダウンロードしてくる
http://takemaru-hirai.github.io/japan-map/
Takemaru Hiraiさんが作られて公開しているjQueryプラグインです。

②上記サイトから私はzipファイルをクリックしてダウンロードします。
zipファイルを解凍するとこのようなフォルダができます。
私は子テーマにmapjsと言うフォルダを作成して、jquery.japan-map.min.jsをアップロードしました。

header.phpのの直前に以下のコードを追記します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/mapjs/jquery.japan-map.min.js"></script>
<script>
        $(function(){
            $("#map-container").japanMap({
                width: 600,
                onSelect : function(data){
                window.location.href = 'pref' + data.code + '.html';
                }
            });
        });
    </script>

次に表示したい記事や固定ページにテキストモードにて

を入れるだけで表示されます。
う~ん簡単だ。
これから色を付けたり楽しんでみます。
http://takemaru-hirai.github.io/japan-map/example/index.html