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

PHP
1//Element/footer.ctp
2<script type="text/javascript">
3$(function() {
4    $('#MapSearch').submit(function(event) {
5		event.preventDefault();//送信をキャンセル
6		var $form = $(this);//対象のフォーム要素を取得
7		// 送信ボタンを取得
8        // （後で使う: 二重送信を防止する。）
9        var $button = $form.find('button');
10		
11        $.ajax({
12            url: "/test/ajax/hogessearch.json",
13            type: "get",
14			data: $form.serialize(),
15            dataType: "json",
16			timeout: 10000,
17			// 送信前
18            beforeSend: function(xhr, settings) {
19                // ボタンを無効化し、二重送信を防止
20                $button.attr('disabled', true);
21            },
22			// 応答後
23            complete: function(xhr, textStatus) {
24                // ボタンを有効化し、再送信を許可
25                $button.attr('disabled', false);
26            },
27        }).done(function (response) {
28    		alert("サクセス");
29    	}).fail(function (response) {
30    		alert("error");
31        });
32    });
33});
34</script>

JSON
1//submitで返ってくるJSON
2{
3    "jsonDataList": [
4			{
5				"id": 1,
6                "column01": "東京",
7				"column02": "35.681391",
8				"column03": "139.766103",
9        	},
10         	{
11				"id": 2,
12				"column01": "新宿",
13				"column02": "35.689729",
14				"column03": "139.700464",
15        	},
16        ]
17 }

Javascript
1//現状
2places = new ns.MVCArray($.parseJSON(ここにJSON?)),

Javascript
1//最終的にしたい形
2places = new google.maps.MVCArray([
3			["1","東京", 35.681391, 139.766103],
4			["2","新宿", 35.689729, 139.700464],
5			["3","品川", 35.62876, 139.738999]
6		]);

######補足

Javascript
1//GoogleMapのjavascript全文
2<script type="text/javascript">
3function initMap() {
4 var map,
5  var infoWindow,
6		ns = google.maps,
7		mapOptions = {
8			zoom: 12,
9			center: new ns.LatLng(35.665595, 139.739)
10		},
11		map = new ns.Map($("#map")[0], mapOptions),
12	 
13		places = new ns.MVCArray($.parseJSON()),
14	  	
15		places.forEach(function (place) {
16		var marker = new ns.Marker({
17				position: new ns.LatLng(place[1], place[2]),
18				map: map
19			});
20
21		ns.event.addListener(marker, 'click', function () {//情報ウィンドウ
22			if (!infoWindow) {
23				infoWindow  = new ns.InfoWindow();
24			}
25			infoWindow.setContent(place[0]);//place
26			infoWindow.open(map, marker);
27		});
28	});
29}
30 </script>

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

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

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

popobot

2017/02/01 21:08

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

ssk

2017/02/02 03:20

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

行動規範の内容に同意します

回答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 04:02

popobot

総合スコア6586