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

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

ただいまの
回答率

88.92%

CakePHP3で返ってきたJSONをもとにGoogleMapのマーカーを生成

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,317

ssk

score 288

//Element/footer.ctp
<script type="text/javascript">
$(function() {
    $('#MapSearch').submit(function(event) {
        event.preventDefault();//送信をキャンセル
        var $form = $(this);//対象のフォーム要素を取得
        // 送信ボタンを取得
        // (後で使う: 二重送信を防止する。)
        var $button = $form.find('button');

        $.ajax({
            url: "/test/ajax/hogessearch.json",
            type: "get",
            data: $form.serialize(),
            dataType: "json",
            timeout: 10000,
            // 送信前
            beforeSend: function(xhr, settings) {
                // ボタンを無効化し、二重送信を防止
                $button.attr('disabled', true);
            },
            // 応答後
            complete: function(xhr, textStatus) {
                // ボタンを有効化し、再送信を許可
                $button.attr('disabled', false);
            },
        }).done(function (response) {
            alert("サクセス");
        }).fail(function (response) {
            alert("error");
        });
    });
});
</script>
//submitで返ってくるJSON
{
    "jsonDataList": [
            {
                "id": 1,
                "column01": "東京",
                "column02": "35.681391",
                "column03": "139.766103",
            },
             {
                "id": 2,
                "column01": "新宿",
                "column02": "35.689729",
                "column03": "139.700464",
            },
        ]
 }
//現状
places = new ns.MVCArray($.parseJSON(ここにJSON?)),
//最終的にしたい形
places = new google.maps.MVCArray([
            ["1","東京", 35.681391, 139.766103],
            ["2","新宿", 35.689729, 139.700464],
            ["3","品川", 35.62876, 139.738999]
        ]);
補足
//GoogleMapのjavascript全文
<script type="text/javascript">
function initMap() {
 var map,
  var infoWindow,
        ns = google.maps,
        mapOptions = {
            zoom: 12,
            center: new ns.LatLng(35.665595, 139.739)
        },
        map = new ns.Map($("#map")[0], mapOptions),

        places = new ns.MVCArray($.parseJSON()),

        places.forEach(function (place) {
        var marker = new ns.Marker({
                position: new ns.LatLng(place[1], place[2]),
                map: map
            });

        ns.event.addListener(marker, 'click', function () {//情報ウィンドウ
            if (!infoWindow) {
                infoWindow  = new ns.InfoWindow();
            }
            infoWindow.setContent(place[0]);//place
            infoWindow.open(map, marker);
        });
    });
}
 </script>
流れ

1.トップページから条件を指定して検索
2.コントローラーで値を受け取り、JSONを返す
3.返ってきたJSONを元にGoogleMapのマーカーを生成

以上です。
3の部分でつまずいています、、、

よろしくお願い致します。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • popobot

    2017/02/02 06:08

    submitして返ってくるjsonに合わせて処理を書けばいいと思うのですが... 返ってくるjsonに緯度経度があるのかもよくわかりません。

    キャンセル

  • ssk

    2017/02/02 12:20

    追記・修正を行いました。返ってくるjsonに緯度経度の情報はございます。

    キャンセル

回答 1

checkベストアンサー

+1

以下のような感じでしょうか。後は/test/ajax/hogessearch.jsonからデータを取得する処理を組み合わせればできるかと

<script type="text/javascript">
function initMap() {
    var map;
    var infoWindow;
    ns = google.maps;
    mapOptions = {
        zoom: 12,
        center: new ns.LatLng(35.665595, 139.739),
    };
    map = new ns.Map($("#map")[0], mapOptions);
    json = {
        "jsonDataList": [
            {
                "id": 1,
                "column01": "東京",
                "column02": "35.681391",
                "column03": "139.766103",
            },
             {
                "id": 2,
                "column01": "新宿",
                "column02": "35.689729",
                "column03": "139.700464",
            },
        ]
    };
    json.jsonDataList.forEach(function (place) {
        console.log(place);
        var marker = new ns.Marker({
            position: new ns.LatLng(place.column02, place.column03),
            map: map
        });
        ns.event.addListener(marker, 'click', function () {//情報ウィンドウ
            if (!infoWindow) {
                infoWindow  = new ns.InfoWindow();
            }
            infoWindow.setContent(place.column01);//place
            infoWindow.open(map, marker);
        });
    });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/02 13:10

    ありがとうございます><
    こちらで試してみます。

    /test/ajax/hogessearch.jsonからデータを取得する処理
    ↑どのように書けばよいでしょうか?現状、データの取得ができていないです。公式ドキュメントも見たんですが、取得できませんでした、、

    キャンセル

  • 2017/02/02 13:14

    あれ、一つ前の質問でjson取得するできてませんでしたっけ??
    alert("サクセス");出力しているところでinitMap()を実行したらいいのではないかと。引数にjsonを渡してあげて

    キャンセル

  • 2017/02/03 18:11

    お返事、遅くなってしまい申し訳ございません。
    initMap(jsonDataList)とし、json = jsonDataList;にすることで意図した動作ができるようになりました。

    助かりました。
    ありがとうございます。

    キャンセル

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

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

関連した質問

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