teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Google Map API ズームレベルによってデザインを変更（水の色変更等）したい

編集履歴

質問編集履歴

10

ソースを修正

2018/09/07 06:33

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -182,6 +182,52 @@
182
182
 
183
183
  ```
184
184
 
185
+ var styles= [{
186
+
187
+ "featureType": "landscape",
188
+
189
+ "elementType": "labels",
190
+
191
+ "stylers": [{
192
+
193
+ "visibility": "off"
194
+
195
+ }],
196
+
197
+ }, {
198
+
199
+ "featureType": "poi",
200
+
201
+ "elementType": "all",
202
+
203
+ "stylers": [{
204
+
205
+ "visibility": "",
206
+
207
+ }]
208
+
209
+ }, {
210
+
211
+ "featureType": "water",
212
+
213
+ "elementType": "all",
214
+
215
+ "stylers": [{
216
+
217
+ color: ""
218
+
219
+ }, {
220
+
221
+ "visibility": "on"
222
+
223
+ }]
224
+
225
+ }]
226
+
227
+ });
228
+
229
+
230
+
185
231
  function initialize() {
186
232
 
187
233
  geocoder = new google.maps.Geocoder();
@@ -206,52 +252,6 @@
206
252
 
207
253
 
208
254
 
209
- var styles= [{
210
-
211
- "featureType": "landscape",
212
-
213
- "elementType": "labels",
214
-
215
- "stylers": [{
216
-
217
- "visibility": "off"
218
-
219
- }],
220
-
221
- }, {
222
-
223
- "featureType": "poi",
224
-
225
- "elementType": "all",
226
-
227
- "stylers": [{
228
-
229
- "visibility": "",
230
-
231
- }]
232
-
233
- }, {
234
-
235
- "featureType": "water",
236
-
237
- "elementType": "all",
238
-
239
- "stylers": [{
240
-
241
- color: ""
242
-
243
- }, {
244
-
245
- "visibility": "on"
246
-
247
- }]
248
-
249
- }]
250
-
251
- });
252
-
253
-
254
-
255
255
  map = new google.maps.Map(document.getElementById("map"), opts);
256
256
 
257
257
 

9

ソースを修正しました

2018/09/07 06:33

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,22 @@
34
34
 
35
35
 
36
36
 
37
+ function initialize() {
38
+
39
+ geocoder = new google.maps.Geocoder();
40
+
41
+ var center = new google.maps.LatLng(XXX,XXX);
42
+
43
+ map = new google.maps.Map(document.getElementById('map'), {
44
+
45
+ zoom: 12,
46
+
47
+ center: center,
48
+
49
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
50
+
51
+
52
+
37
53
  /* こちらのデザイン記述をズームレベルで変更したいです */
38
54
 
39
55
  styles: [{
@@ -82,212 +98,198 @@
82
98
 
83
99
 
84
100
 
101
+ markMultiple();
102
+
103
+ }
104
+
105
+ function markMultiple(){
106
+
107
+ $.getJSON('JSONファイル', function(data) {
108
+
109
+ $.each(data, function(i,obj) {
110
+
111
+ var latLng = new google.maps.LatLng( obj.map_latitude, obj.map_longitude );
112
+
113
+ var content = 吹き出しの内容;
114
+
115
+ markMap(latLng, content);
116
+
117
+ });
118
+
119
+ var markerCluster = new MarkerClusterer(map, markers);
120
+
121
+ });
122
+
123
+ }
124
+
125
+ function markMap(position, content){
126
+
127
+ var marker = new google.maps.Marker({
128
+
129
+ position: position,
130
+
131
+ icon: 'img/icon.png'
132
+
133
+ });
134
+
135
+ google.maps.event.addListener(marker, 'click', function() {
136
+
137
+ infowindow.setContent(content);
138
+
139
+ infowindow.open(map, marker);
140
+
141
+ });
142
+
143
+ markers.push(marker);
144
+
145
+
146
+
147
+ /* ズームレベルでデザインを変更 */
148
+
149
+ google.maps.event.addListener(map, "zoom_changed", function() {
150
+
151
+ if ( map.getZoom() < 15 ) {
152
+
153
+ point_of_interest = '"off"'
154
+
155
+ water_color = '';
156
+
157
+ }
158
+
159
+ else if ( map.getZoom() > 15 ){
160
+
161
+ point_of_interest = '"on"'
162
+
163
+ water_color = '"color": "#ggg"';
164
+
165
+ }
166
+
167
+ });
168
+
169
+ }
170
+
171
+ google.maps.event.addDomListener(window, 'load', initialize);
172
+
173
+ ```
174
+
175
+
176
+
177
+ いただいたアドバイスを参考に調整しましたが動きません。
178
+
179
+ ソースはこちらです。
180
+
181
+
182
+
183
+ ```
184
+
85
185
  function initialize() {
86
186
 
87
187
  geocoder = new google.maps.Geocoder();
88
188
 
89
189
  var center = new google.maps.LatLng(XXX,XXX);
90
190
 
91
- map = new google.maps.Map(document.getElementById('map'), {
191
+ var opts = {
92
-
192
+
93
- zoom: 12,
193
+ zoom: zoom,
94
194
 
95
195
  center: center,
96
196
 
197
+ mapTypeControl: false,
198
+
199
+ streetViewControl: false,
200
+
201
+ zoomControl: zoomControl,
202
+
97
- mapTypeId: google.maps.MapTypeId.ROADMAP,
203
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
204
+
205
+ };
206
+
207
+
208
+
209
+ var styles= [{
210
+
211
+ "featureType": "landscape",
212
+
213
+ "elementType": "labels",
214
+
215
+ "stylers": [{
216
+
217
+ "visibility": "off"
218
+
219
+ }],
220
+
221
+ }, {
222
+
223
+ "featureType": "poi",
224
+
225
+ "elementType": "all",
226
+
227
+ "stylers": [{
228
+
229
+ "visibility": "",
230
+
231
+ }]
232
+
233
+ }, {
234
+
235
+ "featureType": "water",
236
+
237
+ "elementType": "all",
238
+
239
+ "stylers": [{
240
+
241
+ color: ""
242
+
243
+ }, {
244
+
245
+ "visibility": "on"
246
+
247
+ }]
248
+
249
+ }]
250
+
251
+ });
252
+
253
+
254
+
255
+ map = new google.maps.Map(document.getElementById("map"), opts);
256
+
257
+
258
+
259
+ /* ズームレベルでデザインを変更 */
260
+
261
+ google.maps.event.addListener(map, "idle", function() {
262
+
263
+ if ( map.getZoom() < 15 ) {
264
+
265
+ styles[2].stylers[0].color = '#ff0000';
266
+
267
+ map.setOptions({styles: styles});
268
+
269
+ }
270
+
271
+ else if ( map.getZoom() > 15 ){
272
+
273
+ styles[2].stylers[0].color = '';
274
+
275
+ map.setOptions({styles: styles});
276
+
277
+ }
278
+
279
+ });
280
+
281
+
98
282
 
99
283
  markMultiple();
100
284
 
101
285
  }
102
286
 
103
- function markMultiple(){
287
+
104
-
105
- $.getJSON('JSONファイル', function(data) {
106
-
107
- $.each(data, function(i,obj) {
108
-
109
- var latLng = new google.maps.LatLng( obj.map_latitude, obj.map_longitude );
110
-
111
- var content = 吹き出しの内容;
112
-
113
- markMap(latLng, content);
114
-
115
- });
116
-
117
- var markerCluster = new MarkerClusterer(map, markers);
118
-
119
- });
120
-
121
- }
122
-
123
- function markMap(position, content){
124
-
125
- var marker = new google.maps.Marker({
126
-
127
- position: position,
128
-
129
- icon: 'img/icon.png'
130
-
131
- });
132
-
133
- google.maps.event.addListener(marker, 'click', function() {
134
-
135
- infowindow.setContent(content);
136
-
137
- infowindow.open(map, marker);
138
-
139
- });
140
-
141
- markers.push(marker);
142
-
143
-
144
-
145
- /* ズームレベルでデザインを変更 */
146
-
147
- google.maps.event.addListener(map, "zoom_changed", function() {
148
-
149
- if ( map.getZoom() < 15 ) {
150
-
151
- point_of_interest = '"off"'
152
-
153
- water_color = '';
154
-
155
- }
156
-
157
- else if ( map.getZoom() > 15 ){
158
-
159
- point_of_interest = '"on"'
160
-
161
- water_color = '"color": "#ggg"';
162
-
163
- }
164
-
165
- });
166
-
167
- }
168
-
169
- google.maps.event.addDomListener(window, 'load', initialize);
170
288
 
171
289
  ```
172
290
 
173
291
 
174
292
 
175
- いただいたアドバイスを参考に調整しましたが動きません。
176
-
177
- ソースはこちらです。
178
-
179
-
180
-
181
- ```
182
-
183
- function initialize() {
184
-
185
- geocoder = new google.maps.Geocoder();
186
-
187
- var center = new google.maps.LatLng(XXX,XXX);
188
-
189
- var opts = {
190
-
191
- zoom: zoom,
192
-
193
- center: center,
194
-
195
- mapTypeControl: false,
196
-
197
- streetViewControl: false,
198
-
199
- zoomControl: zoomControl,
200
-
201
- mapTypeId: google.maps.MapTypeId.ROADMAP,
202
-
203
- };
204
-
205
-
206
-
207
- var styles= [{
208
-
209
- "featureType": "landscape",
210
-
211
- "elementType": "labels",
212
-
213
- "stylers": [{
214
-
215
- "visibility": "off"
216
-
217
- }],
218
-
219
- }, {
220
-
221
- "featureType": "poi",
222
-
223
- "elementType": "all",
224
-
225
- "stylers": [{
226
-
227
- "visibility": "",
228
-
229
- }]
230
-
231
- }, {
232
-
233
- "featureType": "water",
234
-
235
- "elementType": "all",
236
-
237
- "stylers": [{
238
-
239
- color: ""
240
-
241
- }, {
242
-
243
- "visibility": "on"
244
-
245
- }]
246
-
247
- }]
248
-
249
- });
250
-
251
-
252
-
253
- map = new google.maps.Map(document.getElementById("map"), opts);
254
-
255
-
256
-
257
- /* ズームレベルでデザインを変更 */
258
-
259
- google.maps.event.addListener(map, "idle", function() {
260
-
261
- if ( map.getZoom() < 15 ) {
262
-
263
- styles[2].stylers[0].color = '#ff0000';
264
-
265
- map.setOptions({styles: styles});
266
-
267
- }
268
-
269
- else if ( map.getZoom() > 15 ){
270
-
271
- styles[2].stylers[0].color = '';
272
-
273
- map.setOptions({styles: styles});
274
-
275
- }
276
-
277
- });
278
-
279
-
280
-
281
- markMultiple();
282
-
283
- }
284
-
285
-
286
-
287
- ```
288
-
289
-
290
-
291
293
 
292
294
 
293
295
  ご教授いただけますと幸いです。よろしくお願いいたします。

8

ソースを修正しました

2018/09/07 06:32

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,54 @@
34
34
 
35
35
 
36
36
 
37
+ /* こちらのデザイン記述をズームレベルで変更したいです */
38
+
39
+ styles: [{
40
+
41
+ "featureType": "landscape",
42
+
43
+ "elementType": "labels",
44
+
45
+ "stylers": [{
46
+
47
+ "visibility": "off"
48
+
49
+ }],
50
+
51
+ }, {
52
+
53
+ "featureType": "poi",
54
+
55
+ "elementType": "all",
56
+
57
+ "stylers": [{
58
+
59
+ "visibility": point_of_interest,
60
+
61
+ }]
62
+
63
+ }, {
64
+
65
+ "featureType": water,
66
+
67
+ "elementType": "all",
68
+
69
+ "stylers": [{
70
+
71
+ water_color
72
+
73
+ }, {
74
+
75
+ "visibility": "on"
76
+
77
+ }]
78
+
79
+ }]
80
+
81
+ });
82
+
83
+
84
+
37
85
  function initialize() {
38
86
 
39
87
  geocoder = new google.maps.Geocoder();
@@ -48,52 +96,6 @@
48
96
 
49
97
  mapTypeId: google.maps.MapTypeId.ROADMAP,
50
98
 
51
- /* こちらのデザイン記述をズームレベルで変更したいです */
52
-
53
- styles: [{
54
-
55
- "featureType": "landscape",
56
-
57
- "elementType": "labels",
58
-
59
- "stylers": [{
60
-
61
- "visibility": "off"
62
-
63
- }],
64
-
65
- }, {
66
-
67
- "featureType": "poi",
68
-
69
- "elementType": "all",
70
-
71
- "stylers": [{
72
-
73
- "visibility": point_of_interest,
74
-
75
- }]
76
-
77
- }, {
78
-
79
- "featureType": water,
80
-
81
- "elementType": "all",
82
-
83
- "stylers": [{
84
-
85
- water_color
86
-
87
- }, {
88
-
89
- "visibility": "on"
90
-
91
- }]
92
-
93
- }]
94
-
95
- });
96
-
97
99
  markMultiple();
98
100
 
99
101
  }

7

ソースを修正しました

2018/09/07 06:31

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -178,7 +178,29 @@
178
178
 
179
179
  ```
180
180
 
181
+ function initialize() {
182
+
183
+ geocoder = new google.maps.Geocoder();
184
+
185
+ var center = new google.maps.LatLng(XXX,XXX);
186
+
187
+ var opts = {
188
+
189
+ zoom: zoom,
190
+
191
+ center: center,
192
+
181
- /* style部分 */
193
+ mapTypeControl: false,
194
+
195
+ streetViewControl: false,
196
+
197
+ zoomControl: zoomControl,
198
+
199
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
200
+
201
+ };
202
+
203
+
182
204
 
183
205
  var styles= [{
184
206
 
@@ -226,30 +248,6 @@
226
248
 
227
249
 
228
250
 
229
- function initialize() {
230
-
231
- geocoder = new google.maps.Geocoder();
232
-
233
- var center = new google.maps.LatLng(XXX,XXX);
234
-
235
- var opts = {
236
-
237
- zoom: zoom,
238
-
239
- center: center,
240
-
241
- mapTypeControl: false,
242
-
243
- streetViewControl: false,
244
-
245
- zoomControl: zoomControl,
246
-
247
- mapTypeId: google.maps.MapTypeId.ROADMAP,
248
-
249
- styles : styles
250
-
251
- };
252
-
253
251
  map = new google.maps.Map(document.getElementById("map"), opts);
254
252
 
255
253
 

6

ソースを修正

2018/09/07 06:21

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -206,7 +206,7 @@
206
206
 
207
207
  }, {
208
208
 
209
- "featureType": water,
209
+ "featureType": "water",
210
210
 
211
211
  "elementType": "all",
212
212
 
@@ -250,7 +250,33 @@
250
250
 
251
251
  };
252
252
 
253
- map = new google.maps.Map(document.getElementById("map"), opts);
253
+ map = new google.maps.Map(document.getElementById("map"), opts);
254
+
255
+
256
+
257
+ /* ズームレベルでデザインを変更 */
258
+
259
+ google.maps.event.addListener(map, "idle", function() {
260
+
261
+ if ( map.getZoom() < 15 ) {
262
+
263
+ styles[2].stylers[0].color = '#ff0000';
264
+
265
+ map.setOptions({styles: styles});
266
+
267
+ }
268
+
269
+ else if ( map.getZoom() > 15 ){
270
+
271
+ styles[2].stylers[0].color = '';
272
+
273
+ map.setOptions({styles: styles});
274
+
275
+ }
276
+
277
+ });
278
+
279
+
254
280
 
255
281
  markMultiple();
256
282
 
@@ -258,28 +284,6 @@
258
284
 
259
285
 
260
286
 
261
- /* ズームレベルでデザインを変更 部分 */
262
-
263
- google.maps.event.addListener(map, "zoom_changed", function() {
264
-
265
- if ( map.getZoom() < 15 ) {
266
-
267
- styles[2].stylers[0].color = '#ff0000';
268
-
269
- map.setOptions({styles: styles});
270
-
271
- }
272
-
273
- else if ( map.getZoom() > 15 ){
274
-
275
- styles[2].stylers[0].color = '';
276
-
277
- map.setOptions({styles: styles});
278
-
279
- }
280
-
281
- });
282
-
283
287
  ```
284
288
 
285
289
 

5

ソースを修正しました。

2018/09/07 06:13

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -264,26 +264,18 @@
264
264
 
265
265
  if ( map.getZoom() < 15 ) {
266
266
 
267
- function setZoom01() {
268
-
269
267
  styles[2].stylers[0].color = '#ff0000';
270
268
 
271
269
  map.setOptions({styles: styles});
272
270
 
273
- }
274
-
275
271
  }
276
272
 
277
273
  else if ( map.getZoom() > 15 ){
278
274
 
279
- function setZoom01() {
280
-
281
275
  styles[2].stylers[0].color = '';
282
276
 
283
277
  map.setOptions({styles: styles});
284
278
 
285
- }
286
-
287
279
  }
288
280
 
289
281
  });

4

ソースを修正しました

2018/09/07 03:11

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -176,10 +176,10 @@
176
176
 
177
177
 
178
178
 
179
- style部分
180
-
181
179
  ```
182
180
 
181
+ /* style部分 */
182
+
183
183
  var styles= [{
184
184
 
185
185
  "featureType": "landscape",
@@ -258,46 +258,40 @@
258
258
 
259
259
 
260
260
 
261
+ /* ズームレベルでデザインを変更 部分 */
262
+
263
+ google.maps.event.addListener(map, "zoom_changed", function() {
264
+
265
+ if ( map.getZoom() < 15 ) {
266
+
267
+ function setZoom01() {
268
+
269
+ styles[2].stylers[0].color = '#ff0000';
270
+
271
+ map.setOptions({styles: styles});
272
+
273
+ }
274
+
275
+ }
276
+
277
+ else if ( map.getZoom() > 15 ){
278
+
279
+ function setZoom01() {
280
+
281
+ styles[2].stylers[0].color = '';
282
+
283
+ map.setOptions({styles: styles});
284
+
285
+ }
286
+
287
+ }
288
+
289
+ });
290
+
261
291
  ```
262
292
 
263
293
 
264
294
 
265
- /* ズームレベルでデザインを変更 */部分
266
-
267
- ```
268
-
269
- google.maps.event.addListener(map, "zoom_changed", function() {
270
-
271
- if ( map.getZoom() < 15 ) {
272
-
273
- function setZoom01() {
274
-
275
- styles[2].stylers[0].color = '#ff0000';
276
-
277
- map.setOptions({styles: styles});
278
-
279
- }
280
-
281
- }
282
-
283
- else if ( map.getZoom() > 15 ){
284
-
285
- function setZoom01() {
286
-
287
- styles[2].stylers[0].color = '';
288
-
289
- map.setOptions({styles: styles});
290
-
291
- }
292
-
293
- }
294
-
295
- });
296
-
297
- ```
298
-
299
-
300
-
301
295
 
302
296
 
303
297
  ご教授いただけますと幸いです。よろしくお願いいたします。

3

現状のソースを追記しました

2018/09/07 02:55

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -170,4 +170,134 @@
170
170
 
171
171
 
172
172
 
173
+ いただいたアドバイスを参考に調整しましたが動きません。
174
+
175
+ ソースはこちらです。
176
+
177
+
178
+
179
+ style部分
180
+
181
+ ```
182
+
183
+ var styles= [{
184
+
185
+ "featureType": "landscape",
186
+
187
+ "elementType": "labels",
188
+
189
+ "stylers": [{
190
+
191
+ "visibility": "off"
192
+
193
+ }],
194
+
195
+ }, {
196
+
197
+ "featureType": "poi",
198
+
199
+ "elementType": "all",
200
+
201
+ "stylers": [{
202
+
203
+ "visibility": "",
204
+
205
+ }]
206
+
207
+ }, {
208
+
209
+ "featureType": water,
210
+
211
+ "elementType": "all",
212
+
213
+ "stylers": [{
214
+
215
+ color: ""
216
+
217
+ }, {
218
+
219
+ "visibility": "on"
220
+
221
+ }]
222
+
223
+ }]
224
+
225
+ });
226
+
227
+
228
+
229
+ function initialize() {
230
+
231
+ geocoder = new google.maps.Geocoder();
232
+
233
+ var center = new google.maps.LatLng(XXX,XXX);
234
+
235
+ var opts = {
236
+
237
+ zoom: zoom,
238
+
239
+ center: center,
240
+
241
+ mapTypeControl: false,
242
+
243
+ streetViewControl: false,
244
+
245
+ zoomControl: zoomControl,
246
+
247
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
248
+
249
+ styles : styles
250
+
251
+ };
252
+
253
+ map = new google.maps.Map(document.getElementById("map"), opts);
254
+
255
+ markMultiple();
256
+
257
+ }
258
+
259
+
260
+
261
+ ```
262
+
263
+
264
+
265
+ /* ズームレベルでデザインを変更 */部分
266
+
267
+ ```
268
+
269
+ google.maps.event.addListener(map, "zoom_changed", function() {
270
+
271
+ if ( map.getZoom() < 15 ) {
272
+
273
+ function setZoom01() {
274
+
275
+ styles[2].stylers[0].color = '#ff0000';
276
+
277
+ map.setOptions({styles: styles});
278
+
279
+ }
280
+
281
+ }
282
+
283
+ else if ( map.getZoom() > 15 ){
284
+
285
+ function setZoom01() {
286
+
287
+ styles[2].stylers[0].color = '';
288
+
289
+ map.setOptions({styles: styles});
290
+
291
+ }
292
+
293
+ }
294
+
295
+ });
296
+
297
+ ```
298
+
299
+
300
+
301
+
302
+
173
303
  ご教授いただけますと幸いです。よろしくお願いいたします。

2

タイトルをわかりやすく変更しました

2018/09/07 02:54

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
@@ -1 +1 @@
1
- Google Map API ズームレベルでデザイン変更
1
+ Google Map API ズームレベルによってデザインを変更（水の色変更等）したい
test CHANGED
File without changes

1

質問文を変更しました

2018/09/03 05:29

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,10 @@
13
13
  ズームレベル15以上でpoiの表示やwaterの色を指定（15以下は未設定にしたい）など
14
14
 
15
15
 
16
+
17
+ 現在のソースでは、地図のスタイルが全く変わらずにいます。
18
+
19
+ ズームレベルの条件式（google.maps.event.addListener(map, "zoom_changed", function() 以下）は一応生きてはおります。全く関係のない他のテスト記述は動いたので…。
16
20
 
17
21
 
18
22