質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

jQueryプラグインJapan Mapを使用したマップのカスタマイズ

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,499
退会済みユーザー

退会済みユーザー

https://blog.imo-tikuwa.com/draw-japanmap/

上記サイトのような2段階選択式の地図を埋め込まない形で、
行いたいのですが、方法が分からなかったので、
htmlのscript箇所をどのように変更すればよいか教えていただければ幸いです。 

■カスタマイズしたい項目
埋め込まない形で
①日本地図から地方を選択
②地方の各都道府県をクリック
③指定したページに飛ぶ(各県ごとに別ページ)

のような仕様にしたいと考えています。

下記コードで上記URLと同じようなページ作成をまず行ったのですが、
作成した両ページとも白紙のページに戻るボタンだけ表示されている状態です。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>japanmapを使用した日本地図選択</title>
    <link rel="stylesheet" href="japanmap.css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
 <script type="text/javascript" src="jquery.japan-map.min.js"></script>

</head>
<body>
<iframe id="map" src="map.html?canvasWidth=800" frameborder="0" scrolling="no"></iframe>
<script>
    $(function(){

        var $mapObj = $("#map");
        $mapObj.on("load", function(){
            // iframe読み込み後、iframe内のcanvasのサイズを取得し、iframeのサイズを設定する
            var $iframeCanvas = $('iframe:first').contents().find("#japan-map-container > canvas");
            $mapObj.attr({
                width : $iframeCanvas.attr("width"),
                height : $iframeCanvas.attr("height")
            });
        });
    });
</script>
</body>
</html>

map.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>2段階選択式の日本地図</title>
    <link rel="stylesheet" href="japanmap.css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
 <script type="text/javascript" src="jquery.japan-map.min.js"></script>
    <script>
        $(function(){

            var $mapContainer = $(document).find("#japan-map-container");
            var canvasWidth = _getUrlParams()['canvasWidth'] && $.isNumeric(_getUrlParams()['canvasWidth']) ? _getUrlParams()['canvasWidth'] : 800;
            var mapWidth = null;
            var mapHeight = null;
            var backgroundPrefColor = "#ababab";

            /*
             * 2段階選択式の日本地図を表示する
             */
            _initJapanMap();
            function _initJapanMap() {
                $("#japan-map-back-btn").hide();
                $mapContainer.empty().japanMap({
                    areas: [
                        {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
                        {code : 2, name: "東北地方",   color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2,3,4,5,6,7]},
                        {code : 3, name: "関東地方",   color: "#7ecfea", hoverColor: "#b7e5f4", prefectures: [8,9,10,11,12,13,14]},
                        {code : 4, name: "中部地方",   color: "#7cdc92", hoverColor: "#aceebb", prefectures: [15,16,17,18,19,20,21,22,23]},
                        {code : 5, name: "関西地方",   color: "#ffe966", hoverColor: "#fff19c", prefectures: [24,25,26,27,28,29,30]},
                        {code : 6, name: "中国地方",   color: "#ffcc66", hoverColor: "#ffe0a3", prefectures: [31,32,33,34,35]},
                        {code : 7, name: "四国地方",   color: "#fb9466", hoverColor: "#ffbb9c", prefectures: [36,37,38,39]},
                        {code : 8, name: "九州地方",   color: "#ff9999", hoverColor: "#ffbdbd", prefectures: [40,41,42,43,44,45,46]},
                        {code : 9, name: "沖縄",   color: "#eb98ff", hoverColor: "#f5c9ff", prefectures: [47]},
                    ],
                    movesIslands : true,
                    borderLineWidth: 0,
                    width: canvasWidth,
                    onSelect:function(data){
                        switch (data.code){

                            // 北海道
                            case 1:
                                $mapContainer.empty().japanMap({
                                    areas: [
                                        {code : 1, name: "北海道", color: "#7f7eda", hoverColor: "#b3b2ee", prefectures: [1]},
                                        {name: "", color: backgroundPrefColor, hoverColor: backgroundPrefColor, prefectures: [2,3,5]},
                                    ],
                                    width: canvasWidth * 2.5,
                                    onSelect:function(data){
                                        _sendData(data);
                                    }
                                });
                                $mapContainer.find("canvas").css({"top": mapHeight * 0.15, "left": 0 - (mapWidth * 1.55)});
                                $("#japan-map-back-btn").show();
                                break;

                            // 東北
                            case 2:
                                $mapContainer.empty().japanMap({
                                    areas: [
                                        {code : 2, name: "青森県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [2]},
                                        {code : 3, name: "岩手県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [3]},
                                        {code : 4, name: "宮城県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [4]},
                                        {code : 5, name: "秋田県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [5]},
                                        {code : 6, name: "山形県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [6]},
                                        {code : 7, name: "福島県",    color: "#759ef4", hoverColor: "#98b9ff", prefectures: [7]},
                                        {name: "", color: backgroundPrefColor, hoverColor: backgroundPrefColor, prefectures: [1,8,9,10,11,15,16,17,18,20,21]},
                                    ],
                                    width: canvasWidth * 2.8,
                                    onSelect:function(data){
                                        _sendData(data);
                                    }
                                });
                                $mapContainer.find("canvas").css({"top": 0 - mapHeight * 0.55, "left": 0 - (mapWidth * 1.65)});
                                $("#japan-map-back-btn").show();
                                break;



                    },
                });

                // 初回のみ実施
                if (mapWidth == null && mapHeight == null) {
                    mapWidth = $mapContainer.find("canvas").attr("width");
                    mapHeight = $mapContainer.find("canvas").attr("height");
                    $mapContainer.css({"width": mapWidth, "max-width": mapWidth, "height": mapHeight, "max-height": mapHeight});
                }
            }

            /*
             * 都道府県選択時のデータ送信処理
             */
            function _sendData(data) {
                if (data.code) {
                    window.parent.location.href = "/pref/" + data.code + "/";
                }
            }

            /*
             * getパラメータを取得
             */
            function _getUrlParams() {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

            /*
             * 戻るボタンクリック時の全国マップ表示処理
             */
            $("#japan-map-back-btn").on("click", function(){
                _initJapanMap();
            });
        });
    </script>
</head>
<body>
<div id="japan-map-container"></div>
<input type="button" value="&lt;&lt;戻る" id="japan-map-back-btn"/>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/05/17 15:36

    ご提示のページの通り作成したら上手くいかなかった、ということですよね? その際に「どのように上手くいかなかった」のか「どのようなことが起きたのか」のか「どのようなエラーメッセージが出た」のかをご提示いただけますか?

    キャンセル

  • 退会済みユーザー

    2017/05/17 17:53

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

ただの文法エラーです。(map.html 内の switch 文が閉じられていません)
「思うように動きませんでした」ではなく、まずログを見てエラーの意味を調べ理解する習慣をつけましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る