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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はクライアントのご要望でワードプレスのサイトに日本地図を作成(描画)し、クリック出来るようにしたいと言うご要望でした。
すると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

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*