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

編集履歴

質問編集履歴

4

編集

2017/03/18 10:37

投稿

ssk
ssk

スコア332

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  [前の質問](https://teratail.com/questions/69450)でデータベースから絞り込んで、マップにピンを表示するところまではできました。
2
- ただ、動的にしようとするとエラーが出てしまい、ピンを取得することができません。
2
+ ただ、ループが拾えていないようです。どこが間違っているのでしょうか？
3
3
 
4
4
  ######コード
5
5
  [参考サイト](http://blog.aquaring.co.jp/1328)
@@ -34,7 +34,7 @@
34
34
 
35
35
  // googleMaps アイドル設定
36
36
  Yucho.gMapSetIdle();
37
-
37
+
38
38
  };
39
39
 
40
40
  ///////////////////////////////////////////////////////////////////////
@@ -54,6 +54,7 @@
54
54
  // JSON読み込み
55
55
  ///////////////////////////////////////////////////////////////////////
56
56
  Yucho.getJson = function(){
57
+
57
58
  $.ajax({
58
59
  type: "GET",
59
60
  url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
@@ -61,9 +62,16 @@
61
62
  }).done(function(jsonDataList){
62
63
  Yucho.jsonData = jsonDataList;
63
64
  $('#status_all').html(Yucho.jsonData.jsonDataList.length);
64
- //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
65
65
  });
66
66
 
67
+ // マーカー削除
68
+ Yucho.markerArr.forEach(function(marker, idx) {
69
+ marker.setMap(null);
70
+ });
71
+
72
+ // マーカー作成
73
+ Yucho.createMarker();
74
+
67
75
  };
68
76
 
69
77
  ///////////////////////////////////////////////////////////////////////
@@ -82,19 +90,11 @@
82
90
  ///////////////////////////////////////////////////////////////////////
83
91
  Yucho.refleshMap = function() {
84
92
 
85
- // マップサイズ取得
93
+ // マップサイズ取得
86
94
  Yucho.getMapSize();
87
95
 
88
96
  // json読み込み
89
97
  Yucho.getJson();
90
-
91
- // マーカー削除
92
- Yucho.markerArr.forEach(function(marker, idx) {
93
- marker.setMap(null);
94
- });
95
-
96
- // マーカー作成
97
- Yucho.createMarker();
98
98
 
99
99
  };
100
100
 
@@ -145,20 +145,4 @@
145
145
  ///////////////////////////////////////////////////////////////////////
146
146
 
147
147
  window.onload = Yucho.initMap;
148
- ```
148
+ ```
149
-
150
- #####エラー
151
- ```エラー
152
- Uncaught TypeError: Cannot read property 'getNorthEast' of undefined
153
- ```
154
-
155
- ``getNorthEast``がないと言われるのですが
156
- ```javascript
157
- url: Yucho.jsonUrl + '?min_lat=' + Yucho.neLat + '&max_lat=' + Yucho.swLat + '&min_lng=' + Yucho.neLng + '&max_lng=' + Yucho.swLng,
158
- ↓
159
- ↓このように静的にするとエラーもでません。
160
- ↓
161
- url: Yucho.jsonUrl + '?min_lat=35.622234&max_lat=44.0034115&min_lan=139.6247878&max_lan=139.6247878',
162
- ```
163
-
164
- どのように書けば``Yucho.neLat``などの内容をとってこれますか？

3

修正

2017/03/18 10:37

投稿

ssk
ssk

スコア332

title CHANGED
File without changes
body CHANGED
@@ -61,7 +61,7 @@
61
61
  }).done(function(jsonDataList){
62
62
  Yucho.jsonData = jsonDataList;
63
63
  $('#status_all').html(Yucho.jsonData.jsonDataList.length);
64
- //console.log('/azmap/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
64
+ //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
65
65
  });
66
66
 
67
67
  };

2

修正

2017/03/18 10:00

投稿

ssk
ssk

スコア332

title CHANGED
File without changes
body CHANGED
@@ -17,7 +17,7 @@
17
17
  gridCol:10,
18
18
  defLat:35.685842,
19
19
  defLng:139.757850,
20
- defZoom:15,
20
+ defZoom:10,
21
21
  bounds:{},
22
22
  jsonUrl:'ajaxtestmaps/testsearch.json',
23
23
  jsonData:[],
@@ -33,7 +33,7 @@
33
33
  Yucho.gMapInit();
34
34
 
35
35
  // googleMaps アイドル設定
36
- Yucho.gMapSetIdle();
36
+ Yucho.gMapSetIdle();
37
37
 
38
38
  };
39
39
 
@@ -59,15 +59,17 @@
59
59
  url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
60
60
  dataType: "json",
61
61
  }).done(function(jsonDataList){
62
- //console.log(jsonDataList);
63
62
  Yucho.jsonData = jsonDataList;
64
- $('#status_all').html(Yucho.jsonData.length);
63
+ $('#status_all').html(Yucho.jsonData.jsonDataList.length);
64
+ //console.log('/azmap/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
65
65
  });
66
+
66
67
  };
67
68
 
68
69
  ///////////////////////////////////////////////////////////////////////
69
70
  // googleMaps アイドル設定
70
71
  ///////////////////////////////////////////////////////////////////////
72
+
71
73
  Yucho.gMapSetIdle = function(){
72
74
  google.maps.event.addListener(Yucho.map, 'idle', function(){
73
75
  Yucho.refleshMap();
@@ -109,29 +111,37 @@
109
111
  Yucho.swLatLng = Yucho.bounds.getSouthWest();
110
112
  Yucho.swLat = Yucho.swLatLng.lat();
111
113
  Yucho.swLng = Yucho.swLatLng.lng();
112
- Yucho.latDiff = (Yucho.neLat-Yucho.swLat)/Yucho.gridRow;
113
- Yucho.lngDiff = (Yucho.neLng-Yucho.swLng)/Yucho.gridCol;
114
114
  };
115
115
 
116
116
  ///////////////////////////////////////////////////////////////////////
117
117
  // マーカー作成
118
118
  ///////////////////////////////////////////////////////////////////////
119
119
  Yucho.createMarker = function() {
120
+ var infoWindow;
120
121
  if(Array.isArray(Yucho.jsonData.jsonDataList)){
122
+ console.log(Yucho.jsonData.jsonDataList.length);
121
123
  Yucho.jsonData.jsonDataList.forEach(function (place) {
122
- var latlng = new google.maps.LatLng(place.lat,place.lan);
124
+ var latlng = new google.maps.LatLng(place.lat,place.lng);
123
125
  var marker = new google.maps.Marker({
124
126
  position: latlng,
125
127
  map: Yucho.map,
126
128
  flat: true,
127
129
  });
128
130
  Yucho.markerArr.push(marker);
131
+ google.maps.event.addListener(marker, 'click', function () {//情報ウィンドウ
132
+ if (!infoWindow) {
133
+ infoWindow = new google.maps.InfoWindow();
134
+ }
135
+ infoWindow.setContent('会社名' + '<br />' + '住所' + '<br />' + '緯度：' + place.lat + '<br />' + '軽度：' + place.lng);
136
+ infoWindow.open(map, marker);
137
+ });
129
138
  });
130
139
  }
131
140
  };
132
141
 
133
142
  ///////////////////////////////////////////////////////////////////////
134
143
  // event
144
+ // window.onload HTML読み込みが完了してからから実行される
135
145
  ///////////////////////////////////////////////////////////////////////
136
146
 
137
147
  window.onload = Yucho.initMap;

1

編集

2017/03/18 09:59

投稿

ssk
ssk

スコア332

title CHANGED
File without changes
body CHANGED
@@ -15,18 +15,12 @@
15
15
  rectangleArrData:[],
16
16
  gridRow:10,
17
17
  gridCol:10,
18
- defLat:43.0686606,
18
+ defLat:35.685842,
19
- defLng:141.3507552,
19
+ defLng:139.757850,
20
20
  defZoom:15,
21
21
  bounds:{},
22
- neLatLng:{},
23
- neLat:{},
24
- neLng:{},
25
- swLatLng:{},
26
- swLat:{},
27
- swLng:{},
28
22
  jsonUrl:'ajaxtestmaps/testsearch.json',
29
- jsonData:{},
23
+ jsonData:[],
30
24
  boundsData:{},
31
25
  };
32
26
 
@@ -38,8 +32,8 @@
38
32
  // googleMaps 初期設定
39
33
  Yucho.gMapInit();
40
34
 
41
- // json読み込み
35
+ // googleMaps アイドル設定
42
- Yucho.getJson();
36
+ Yucho.gMapSetIdle();
43
37
 
44
38
  };
45
39
 
@@ -48,7 +42,10 @@
48
42
  ///////////////////////////////////////////////////////////////////////
49
43
  Yucho.gMapInit = function(){
50
44
  Yucho.map = new google.maps.Map(document.getElementById('map'), {
45
+ center: {
51
- center: {lat: Yucho.defLat, lng: Yucho.defLng},
46
+ lat: Yucho.defLat,
47
+ lng: Yucho.defLng
48
+ },
52
49
  zoom: Yucho.defZoom
53
50
  });
54
51
  };
@@ -57,20 +54,14 @@
57
54
  // JSON読み込み
58
55
  ///////////////////////////////////////////////////////////////////////
59
56
  Yucho.getJson = function(){
60
- // マップサイズ取得
61
- Yucho.getMapSize();
62
-
63
57
  $.ajax({
64
58
  type: "GET",
65
- url: Yucho.jsonUrl + '?min_lat=' + Yucho.neLat + '&max_lat=' + Yucho.swLat + '&min_lng=' + Yucho.neLng + '&max_lng=' + Yucho.swLng,
59
+ url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
66
- //url: Yucho.jsonUrl + '?min_lat=35.622234&max_lat=44.0034115&min_lan=139.6247878&max_lan=139.6247878',
67
60
  dataType: "json",
68
61
  }).done(function(jsonDataList){
62
+ //console.log(jsonDataList);
69
- Yucho.jsonData = jsonDataList;
63
+ Yucho.jsonData = jsonDataList;
70
- //$('#status_all').html(Yucho.jsonData.length);
64
+ $('#status_all').html(Yucho.jsonData.length);
71
-
72
- // googleMaps アイドル設定
73
- Yucho.gMapSetIdle();
74
65
  });
75
66
  };
76
67
 
@@ -91,7 +82,10 @@
91
82
 
92
83
  // マップサイズ取得
93
84
  Yucho.getMapSize();
85
+
94
-
86
+ // json読み込み
87
+ Yucho.getJson();
88
+
95
89
  // マーカー削除
96
90
  Yucho.markerArr.forEach(function(marker, idx) {
97
91
  marker.setMap(null);
@@ -101,7 +95,7 @@
101
95
  Yucho.createMarker();
102
96
 
103
97
  };
104
-
98
+
105
99
  ///////////////////////////////////////////////////////////////////////
106
100
  // マップサイズ取得
107
101
  //getSouthWest()：表示領域の南西（左下）の頂点の地理座標を返す
@@ -123,16 +117,17 @@
123
117
  // マーカー作成
124
118
  ///////////////////////////////////////////////////////////////////////
125
119
  Yucho.createMarker = function() {
126
- console.log(Yucho.jsonData.jsonDataList);
120
+ if(Array.isArray(Yucho.jsonData.jsonDataList)){
127
- Yucho.jsonData.jsonDataList.forEach(function (place) {
121
+ Yucho.jsonData.jsonDataList.forEach(function (place) {
128
- var latlng = new google.maps.LatLng(place.lat,place.lan);
122
+ var latlng = new google.maps.LatLng(place.lat,place.lan);
129
- var marker = new google.maps.Marker({
123
+ var marker = new google.maps.Marker({
130
- position: latlng,
124
+ position: latlng,
131
- map: Yucho.map,
125
+ map: Yucho.map,
132
- flat: true,
126
+ flat: true,
133
- });
127
+ });
134
- Yucho.markerArr.push(marker);
128
+ Yucho.markerArr.push(marker);
135
- });
129
+ });
130
+ }
136
131
  };
137
132
 
138
133
  ///////////////////////////////////////////////////////////////////////