GoogleMapAPIでピンを表示範囲のみ表示

前の質問でデータベースから絞り込んで、マップにピンを表示するところまではできました。
ただ、ループが拾えていないようです。どこが間違っているのでしょうか？

javascript
1///////////////////////////////////////////////////////////////////////
2// 変数設定
3///////////////////////////////////////////////////////////////////////
4var Yucho = {
5    map:{},
6    markerArr:[],
7    rectangleArrLatLng:[],
8    rectangleArrObj:[],
9    rectangleArrData:[],
10    gridRow:10,
11    gridCol:10,
12    defLat:35.685842,
13    defLng:139.757850,
14    defZoom:10,
15    bounds:{},
16    jsonUrl:'ajaxtestmaps/testsearch.json',
17    jsonData:[],
18    boundsData:{},
19};
20 
21///////////////////////////////////////////////////////////////////////
22// 初期化
23///////////////////////////////////////////////////////////////////////
24Yucho.initMap = function(){
25     
26    // googleMaps 初期設定
27    Yucho.gMapInit();
28	
29	// googleMaps アイドル設定
30	Yucho.gMapSetIdle();
31
32};
33 
34///////////////////////////////////////////////////////////////////////
35// googleMaps 初期設定
36///////////////////////////////////////////////////////////////////////
37Yucho.gMapInit = function(){
38    Yucho.map = new google.maps.Map(document.getElementById('map'), {
39        center: {
40			lat: Yucho.defLat, 
41			lng: Yucho.defLng
42		},
43        zoom: Yucho.defZoom
44    });
45};
46 
47///////////////////////////////////////////////////////////////////////
48// JSON読み込み
49///////////////////////////////////////////////////////////////////////
50Yucho.getJson = function(){
51	
52    $.ajax({
53        type: "GET",
54        url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
55        dataType: "json",
56    }).done(function(jsonDataList){
57		Yucho.jsonData = jsonDataList;
58        $('#status_all').html(Yucho.jsonData.jsonDataList.length);
59    });
60	
61	// マーカー削除
62    Yucho.markerArr.forEach(function(marker, idx) {
63        marker.setMap(null);
64    });
65	
66	// マーカー作成
67    Yucho.createMarker();
68	
69};
70 
71///////////////////////////////////////////////////////////////////////
72// googleMaps アイドル設定
73///////////////////////////////////////////////////////////////////////
74
75Yucho.gMapSetIdle = function(){
76    google.maps.event.addListener(Yucho.map, 'idle', function(){
77        Yucho.refleshMap();
78    });
79};
80 
81///////////////////////////////////////////////////////////////////////
82// MAPリフレッシュ
83//アイドルされた時、Jsonを再読み込み
84///////////////////////////////////////////////////////////////////////
85Yucho.refleshMap = function() {
86	     
87	// マップサイズ取得
88    Yucho.getMapSize();
89	
90	// json読み込み
91    Yucho.getJson();
92          
93};
94
95///////////////////////////////////////////////////////////////////////
96// マップサイズ取得
97//getSouthWest()：表示領域の南西（左下）の頂点の地理座標を返す
98//getNorthEast()：領域の北東（右上）の頂点の地理座標を返す
99///////////////////////////////////////////////////////////////////////
100Yucho.getMapSize = function() {
101    Yucho.bounds = Yucho.map.getBounds();
102    Yucho.neLatLng = Yucho.bounds.getNorthEast();
103    Yucho.neLat = Yucho.neLatLng.lat();
104    Yucho.neLng = Yucho.neLatLng.lng();
105    Yucho.swLatLng = Yucho.bounds.getSouthWest();
106    Yucho.swLat = Yucho.swLatLng.lat();
107    Yucho.swLng = Yucho.swLatLng.lng();
108};
109 
110///////////////////////////////////////////////////////////////////////
111// マーカー作成
112///////////////////////////////////////////////////////////////////////
113Yucho.createMarker = function() {
114	var infoWindow;
115	if(Array.isArray(Yucho.jsonData.jsonDataList)){
116		console.log(Yucho.jsonData.jsonDataList.length);
117		Yucho.jsonData.jsonDataList.forEach(function (place) {
118					var latlng = new google.maps.LatLng(place.lat,place.lng);
119					var marker = new google.maps.Marker({
120						position: latlng,
121						map: Yucho.map,
122						flat: true,
123					});
124					Yucho.markerArr.push(marker);
125			google.maps.event.addListener(marker, 'click', function () {//情報ウィンドウ
126						if (!infoWindow) {
127							infoWindow  = new google.maps.InfoWindow();
128						}
129						infoWindow.setContent('会社名' + '<br />' + '住所' + '<br />' + '緯度：' + place.lat + '<br />' + '軽度：' + place.lng);
130						infoWindow.open(map, marker);
131					});
132		});
133	}
134};
135 
136///////////////////////////////////////////////////////////////////////
137// event
138// window.onload HTML読み込みが完了してからから実行される
139///////////////////////////////////////////////////////////////////////
140 
141window.onload = Yucho.initMap;

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

回答1件

ベストアンサー

Yucho.gMapInit()の直後に地図範囲を取得しようとしてますから、地図の読み込みが終わっていないのではないでしょうか。idleイベントを待ってからJSONを取得するといいと思います。

コメントを受けて追記

javascript
1///////////////////////////////////////////////////////////////////////
2// MAPリフレッシュ
3//アイドルされた時、Jsonを再読み込み
4///////////////////////////////////////////////////////////////////////
5Yucho.refleshMap = function() {
6
7    // マップサイズ取得
8    Yucho.getMapSize();
9
10    // json読み込み
11    Yucho.getJson();
12
13
14};

javascript
1///////////////////////////////////////////////////////////////////////
2// JSON読み込み
3///////////////////////////////////////////////////////////////////////
4Yucho.getJson = function(){
5    $.ajax({
6        type: "GET",
7        url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
8        dataType: "json",
9    }).done(function(jsonDataList){
10        Yucho.jsonData = jsonDataList;
11        $('#status_all').html(Yucho.jsonData.jsonDataList.length);
12
13        // マーカー削除
14        Yucho.markerArr.forEach(function(marker, idx) {
15            marker.setMap(null);
16        });
17    
18        // マーカー作成
19        Yucho.createMarker();
20
21        //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
22    });
23
24};

投稿2017/03/18 03:28

編集2017/03/18 10:28

Lhankor_Mhy

総合スコア36104

ssk

2017/03/18 06:56 編集

ありがとうございます。 Yucho.gMapSetIdle();の位置を変更しました。一応、動的に動かせるようにはなりました。ただ、うまくピンが取得できていません。。何が原因でしょう、、、 Yucho.jsonData.jsonDataList の数とピンの数が合わないです。

ssk

2017/03/18 09:49

>>>idleイベントを待ってからとは、どのように記述したらよいでしょうか＞＜今だ解決されず。。

Lhankor_Mhy

2017/03/18 09:56

「ピンの数が合わない」とは具体的にはどのようなことが起きていますか？

ssk

2017/03/18 10:03

返信ありがとうございます。コードを最新の状態に修正いたしました。実行するタイミングが合っていないのが原因かと思いますが、どこをどうしたらいいかわからず、、具体的には以下の数が合いません。 JSON読み込み Yucho.jsonData.jsonDataList.length マーカー作成 console.log(Yucho.jsonData.jsonDataList.length);

Lhankor_Mhy

2017/03/18 10:09

その二つは同じもののように見えるのですが…… どのようにして数が合わないことを確認されましたか？

Lhankor_Mhy

2017/03/18 10:15

ああ、なるほど、.getJson()内と、.createMarker()内とで数が合わないのですね？ .getJson()内でマーカーのデータが読み込まれるのは、非同期通信のため、.createMarker()が実行された後です。.createMarker()を.getJson()のコールバックから呼んでみてください。

ssk

2017/03/18 10:15

□初回表示 JSON読み込み Yucho.jsonData.jsonDataList.length：80 マーカー作成：Yucho.jsonData.jsonDataList.length：０ □マップを動かした時 Yucho.jsonData.jsonDataList.length：92 マーカー作成：Yucho.jsonData.jsonDataList.length：80 と、マーカー作成：Yucho.jsonData.jsonDataList.lengthが1つ前の情報を読み込んでいるようでして、、

ssk

2017/03/18 10:16

>>>ああ、なるほど、.getJson()内と、.createMarker()内とで数が合わないのですね？はい。おっしゃる通りです。

ssk

2017/03/18 10:21 編集

申し訳ございません。 javascriptの習得レベルが低いので、以下の実装方法がわかりませんでした。。「.createMarker()を.getJson()のコールバックから呼ぶ」を具体的に教えていただけますか？＞＜

ssk

2017/03/18 10:40 編集

参考コード非常に助かります＞＜質問内容のコードを変更しました。しかし、.「getJson()内と、.createMarker()内とで数が合わない」は解決できませんでした。私の書き方が悪いと思います。。もう一度、助言いただけないでしょうか？よろしくお願いいたします。

ssk

2017/03/18 10:49

Lhankor_Mhy様本当にありがとうございます。 Yucho.getJsonの内容をLhankor_Mhy様の通り行ったところ、実装することができました。 1日悩んでいたので、助かりました、、ありがとうございます。