teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問GoogleMapAPIでピンを表示範囲のみ表示

編集履歴

質問編集履歴

4

編集

2017/03/18 10:37

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  [前の質問](https://teratail.com/questions/69450)でデータベースから絞り込んで、マップにピンを表示するところまではできました。
2
2
 
3
- ただ、動的にしようとするとエラーが出てしまい、ピンを取得することができません。
3
+ ただ、ループが拾えていないようです。どこが間違っているのでしょうか？
4
4
 
5
5
 
6
6
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  Yucho.gMapSetIdle();
72
72
 
73
-
73
+
74
74
 
75
75
  };
76
76
 
@@ -110,6 +110,8 @@
110
110
 
111
111
  Yucho.getJson = function(){
112
112
 
113
+
114
+
113
115
  $.ajax({
114
116
 
115
117
  type: "GET",
@@ -124,9 +126,23 @@
124
126
 
125
127
  $('#status_all').html(Yucho.jsonData.jsonDataList.length);
126
128
 
127
- //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
128
-
129
- });
129
+ });
130
+
131
+
132
+
133
+ // マーカー削除
134
+
135
+ Yucho.markerArr.forEach(function(marker, idx) {
136
+
137
+ marker.setMap(null);
138
+
139
+ });
140
+
141
+
142
+
143
+ // マーカー作成
144
+
145
+ Yucho.createMarker();
130
146
 
131
147
 
132
148
 
@@ -166,7 +182,7 @@
166
182
 
167
183
 
168
184
 
169
- // マップサイズ取得
185
+ // マップサイズ取得
170
186
 
171
187
  Yucho.getMapSize();
172
188
 
@@ -176,22 +192,6 @@
176
192
 
177
193
  Yucho.getJson();
178
194
 
179
-
180
-
181
- // マーカー削除
182
-
183
- Yucho.markerArr.forEach(function(marker, idx) {
184
-
185
- marker.setMap(null);
186
-
187
- });
188
-
189
-
190
-
191
- // マーカー作成
192
-
193
- Yucho.createMarker();
194
-
195
195
 
196
196
 
197
197
  };
@@ -293,35 +293,3 @@
293
293
  window.onload = Yucho.initMap;
294
294
 
295
295
  ```
296
-
297
-
298
-
299
- #####エラー
300
-
301
- ```エラー
302
-
303
- Uncaught TypeError: Cannot read property 'getNorthEast' of undefined
304
-
305
- ```
306
-
307
-
308
-
309
- ``getNorthEast``がないと言われるのですが
310
-
311
- ```javascript
312
-
313
- url: Yucho.jsonUrl + '?min_lat=' + Yucho.neLat + '&max_lat=' + Yucho.swLat + '&min_lng=' + Yucho.neLng + '&max_lng=' + Yucho.swLng,
314
-
315
- ↓
316
-
317
- ↓このように静的にするとエラーもでません。
318
-
319
- ↓
320
-
321
- url: Yucho.jsonUrl + '?min_lat=35.622234&max_lat=44.0034115&min_lan=139.6247878&max_lan=139.6247878',
322
-
323
- ```
324
-
325
-
326
-
327
- どのように書けば``Yucho.neLat``などの内容をとってこれますか？

3

修正

2017/03/18 10:37

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
  $('#status_all').html(Yucho.jsonData.jsonDataList.length);
126
126
 
127
- //console.log('/azmap/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
127
+ //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
128
128
 
129
129
  });
130
130
 

2

修正

2017/03/18 10:00

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  defLng:139.757850,
38
38
 
39
- defZoom:15,
39
+ defZoom:10,
40
40
 
41
41
  bounds:{},
42
42
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  // googleMaps アイドル設定
70
70
 
71
- Yucho.gMapSetIdle();
71
+ Yucho.gMapSetIdle();
72
72
 
73
73
 
74
74
 
@@ -120,14 +120,16 @@
120
120
 
121
121
  }).done(function(jsonDataList){
122
122
 
123
- //console.log(jsonDataList);
124
-
125
123
  Yucho.jsonData = jsonDataList;
126
124
 
127
- $('#status_all').html(Yucho.jsonData.length);
125
+ $('#status_all').html(Yucho.jsonData.jsonDataList.length);
126
+
127
+ //console.log('/azmap/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
128
128
 
129
129
  });
130
130
 
131
+
132
+
131
133
  };
132
134
 
133
135
 
@@ -138,6 +140,8 @@
138
140
 
139
141
  ///////////////////////////////////////////////////////////////////////
140
142
 
143
+
144
+
141
145
  Yucho.gMapSetIdle = function(){
142
146
 
143
147
  google.maps.event.addListener(Yucho.map, 'idle', function(){
@@ -220,10 +224,6 @@
220
224
 
221
225
  Yucho.swLng = Yucho.swLatLng.lng();
222
226
 
223
- Yucho.latDiff = (Yucho.neLat-Yucho.swLat)/Yucho.gridRow;
224
-
225
- Yucho.lngDiff = (Yucho.neLng-Yucho.swLng)/Yucho.gridCol;
226
-
227
227
  };
228
228
 
229
229
 
@@ -236,11 +236,15 @@
236
236
 
237
237
  Yucho.createMarker = function() {
238
238
 
239
+ var infoWindow;
240
+
239
241
  if(Array.isArray(Yucho.jsonData.jsonDataList)){
240
242
 
243
+ console.log(Yucho.jsonData.jsonDataList.length);
244
+
241
245
  Yucho.jsonData.jsonDataList.forEach(function (place) {
242
246
 
243
- var latlng = new google.maps.LatLng(place.lat,place.lan);
247
+ var latlng = new google.maps.LatLng(place.lat,place.lng);
244
248
 
245
249
  var marker = new google.maps.Marker({
246
250
 
@@ -254,6 +258,20 @@
254
258
 
255
259
  Yucho.markerArr.push(marker);
256
260
 
261
+ google.maps.event.addListener(marker, 'click', function () {//情報ウィンドウ
262
+
263
+ if (!infoWindow) {
264
+
265
+ infoWindow = new google.maps.InfoWindow();
266
+
267
+ }
268
+
269
+ infoWindow.setContent('会社名' + '<br />' + '住所' + '<br />' + '緯度：' + place.lat + '<br />' + '軽度：' + place.lng);
270
+
271
+ infoWindow.open(map, marker);
272
+
273
+ });
274
+
257
275
  });
258
276
 
259
277
  }
@@ -266,6 +284,8 @@
266
284
 
267
285
  // event
268
286
 
287
+ // window.onload HTML読み込みが完了してからから実行される
288
+
269
289
  ///////////////////////////////////////////////////////////////////////
270
290
 
271
291
 

1

編集

2017/03/18 09:59

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -32,29 +32,17 @@
32
32
 
33
33
  gridCol:10,
34
34
 
35
- defLat:43.0686606,
35
+ defLat:35.685842,
36
-
36
+
37
- defLng:141.3507552,
37
+ defLng:139.757850,
38
38
 
39
39
  defZoom:15,
40
40
 
41
41
  bounds:{},
42
42
 
43
- neLatLng:{},
44
-
45
- neLat:{},
46
-
47
- neLng:{},
48
-
49
- swLatLng:{},
50
-
51
- swLat:{},
52
-
53
- swLng:{},
54
-
55
43
  jsonUrl:'ajaxtestmaps/testsearch.json',
56
44
 
57
- jsonData:{},
45
+ jsonData:[],
58
46
 
59
47
  boundsData:{},
60
48
 
@@ -78,124 +66,124 @@
78
66
 
79
67
 
80
68
 
69
+ // googleMaps アイドル設定
70
+
71
+ Yucho.gMapSetIdle();
72
+
73
+
74
+
75
+ };
76
+
77
+
78
+
79
+ ///////////////////////////////////////////////////////////////////////
80
+
81
+ // googleMaps 初期設定
82
+
83
+ ///////////////////////////////////////////////////////////////////////
84
+
85
+ Yucho.gMapInit = function(){
86
+
87
+ Yucho.map = new google.maps.Map(document.getElementById('map'), {
88
+
89
+ center: {
90
+
91
+ lat: Yucho.defLat,
92
+
93
+ lng: Yucho.defLng
94
+
95
+ },
96
+
97
+ zoom: Yucho.defZoom
98
+
99
+ });
100
+
101
+ };
102
+
103
+
104
+
105
+ ///////////////////////////////////////////////////////////////////////
106
+
107
+ // JSON読み込み
108
+
109
+ ///////////////////////////////////////////////////////////////////////
110
+
111
+ Yucho.getJson = function(){
112
+
113
+ $.ajax({
114
+
115
+ type: "GET",
116
+
117
+ url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
118
+
119
+ dataType: "json",
120
+
121
+ }).done(function(jsonDataList){
122
+
123
+ //console.log(jsonDataList);
124
+
125
+ Yucho.jsonData = jsonDataList;
126
+
127
+ $('#status_all').html(Yucho.jsonData.length);
128
+
129
+ });
130
+
131
+ };
132
+
133
+
134
+
135
+ ///////////////////////////////////////////////////////////////////////
136
+
137
+ // googleMaps アイドル設定
138
+
139
+ ///////////////////////////////////////////////////////////////////////
140
+
141
+ Yucho.gMapSetIdle = function(){
142
+
143
+ google.maps.event.addListener(Yucho.map, 'idle', function(){
144
+
145
+ Yucho.refleshMap();
146
+
147
+ });
148
+
149
+ };
150
+
151
+
152
+
153
+ ///////////////////////////////////////////////////////////////////////
154
+
155
+ // MAPリフレッシュ
156
+
157
+ //アイドルされた時、Jsonを再読み込み
158
+
159
+ ///////////////////////////////////////////////////////////////////////
160
+
161
+ Yucho.refleshMap = function() {
162
+
163
+
164
+
165
+ // マップサイズ取得
166
+
167
+ Yucho.getMapSize();
168
+
169
+
170
+
81
171
  // json読み込み
82
172
 
83
173
  Yucho.getJson();
84
174
 
85
-
86
-
87
- };
175
+
88
-
89
-
90
-
91
- ///////////////////////////////////////////////////////////////////////
176
+
92
-
93
- // googleMaps 初期設定
177
+ // マーカー削除
94
-
95
- ///////////////////////////////////////////////////////////////////////
178
+
96
-
97
- Yucho.gMapInit = function(){
179
+ Yucho.markerArr.forEach(function(marker, idx) {
98
-
99
- Yucho.map = new google.maps.Map(document.getElementById('map'), {
180
+
100
-
101
- center: {lat: Yucho.defLat, lng: Yucho.defLng},
102
-
103
- zoom: Yucho.defZoom
181
+ marker.setMap(null);
104
182
 
105
183
  });
106
184
 
107
- };
108
-
109
-
110
-
111
- ///////////////////////////////////////////////////////////////////////
112
-
113
- // JSON読み込み
114
-
115
- ///////////////////////////////////////////////////////////////////////
116
-
117
- Yucho.getJson = function(){
118
-
119
- // マップサイズ取得
120
-
121
- Yucho.getMapSize();
122
-
123
-
124
-
125
- $.ajax({
126
-
127
- type: "GET",
128
-
129
- url: Yucho.jsonUrl + '?min_lat=' + Yucho.neLat + '&max_lat=' + Yucho.swLat + '&min_lng=' + Yucho.neLng + '&max_lng=' + Yucho.swLng,
130
-
131
- //url: Yucho.jsonUrl + '?min_lat=35.622234&max_lat=44.0034115&min_lan=139.6247878&max_lan=139.6247878',
132
-
133
- dataType: "json",
134
-
135
- }).done(function(jsonDataList){
136
-
137
- Yucho.jsonData = jsonDataList;
138
-
139
- //$('#status_all').html(Yucho.jsonData.length);
140
-
141
-
142
-
143
- // googleMaps アイドル設定
144
-
145
- Yucho.gMapSetIdle();
146
-
147
- });
148
-
149
- };
150
-
151
-
152
-
153
- ///////////////////////////////////////////////////////////////////////
154
-
155
- // googleMaps アイドル設定
156
-
157
- ///////////////////////////////////////////////////////////////////////
158
-
159
- Yucho.gMapSetIdle = function(){
160
-
161
- google.maps.event.addListener(Yucho.map, 'idle', function(){
162
-
163
- Yucho.refleshMap();
164
-
165
- });
166
-
167
- };
168
-
169
-
170
-
171
- ///////////////////////////////////////////////////////////////////////
172
-
173
- // MAPリフレッシュ
174
-
175
- //アイドルされた時、Jsonを再読み込み
176
-
177
- ///////////////////////////////////////////////////////////////////////
178
-
179
- Yucho.refleshMap = function() {
180
-
181
-
182
-
183
- // マップサイズ取得
184
-
185
- Yucho.getMapSize();
186
-
187
185
 
188
186
 
189
- // マーカー削除
190
-
191
- Yucho.markerArr.forEach(function(marker, idx) {
192
-
193
- marker.setMap(null);
194
-
195
- });
196
-
197
-
198
-
199
187
  // マーカー作成
200
188
 
201
189
  Yucho.createMarker();
@@ -204,7 +192,7 @@
204
192
 
205
193
  };
206
194
 
207
-
195
+
208
196
 
209
197
  ///////////////////////////////////////////////////////////////////////
210
198
 
@@ -248,25 +236,27 @@
248
236
 
249
237
  Yucho.createMarker = function() {
250
238
 
251
- console.log(Yucho.jsonData.jsonDataList);
239
+ if(Array.isArray(Yucho.jsonData.jsonDataList)){
252
-
240
+
253
- Yucho.jsonData.jsonDataList.forEach(function (place) {
241
+ Yucho.jsonData.jsonDataList.forEach(function (place) {
254
-
242
+
255
- var latlng = new google.maps.LatLng(place.lat,place.lan);
243
+ var latlng = new google.maps.LatLng(place.lat,place.lan);
256
-
244
+
257
- var marker = new google.maps.Marker({
245
+ var marker = new google.maps.Marker({
258
-
246
+
259
- position: latlng,
247
+ position: latlng,
260
-
248
+
261
- map: Yucho.map,
249
+ map: Yucho.map,
262
-
250
+
263
- flat: true,
251
+ flat: true,
264
-
252
+
265
- });
253
+ });
266
-
254
+
267
- Yucho.markerArr.push(marker);
255
+ Yucho.markerArr.push(marker);
268
-
256
+
269
- });
257
+ });
258
+
259
+ }
270
260
 
271
261
  };
272
262