teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問googlemapsのマーカーについて

編集履歴

質問編集履歴

9

HTMLソース、画像の追加

2016/07/19 14:19

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -34,398 +34,524 @@
34
34
 
35
35
 
36
36
 
37
+ ①
38
+
37
39
  ```javascript
38
40
 
39
- $(function() {
40
-
41
- var maps = {};
42
-
43
- var mapOptions = {
44
-
45
- center: new google.maps.LatLng(35.6713419,139.76541450000002),
46
-
47
- zoom: 15,
48
-
49
- mapTypeId: google.maps.MapTypeId.ROADMAP
50
-
51
- };
52
-
53
-
54
-
55
- maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
56
-
57
-
58
-
59
- var mapOptions = {
60
-
61
- center: new google.maps.LatLng(35.6933865,139.76615270000002),
62
-
63
- zoom: 15,
64
-
65
- mapTypeId: google.maps.MapTypeId.ROADMAP
66
-
67
- };
68
-
69
- maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
70
-
71
-
72
-
73
- var mapOptions = {
74
-
75
- center: new google.maps.LatLng(35.6712724,139.76160089999996),
76
-
77
- zoom: 15,
78
-
79
- mapTypeId: google.maps.MapTypeId.ROADMAP
80
-
81
- };
82
-
83
- maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
84
-
85
-
86
-
87
- $('#tabs a[href^="#panel"]').click(function(){
88
-
89
- $("#tabs .panel").hide();
90
-
91
- $(this.hash).fadeIn();
92
-
93
- google.maps.event.trigger(maps[this.hash], 'resize');
94
-
95
- return false;
96
-
97
- });
98
-
99
-
100
-
101
- $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
41
+ $(function() {
42
+
43
+ var maps = {};
44
+
45
+ var markers = [];
46
+
47
+ var mapOptions = {
48
+
49
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
50
+
51
+ zoom: 15,
52
+
53
+ mapTypeId: google.maps.MapTypeId.ROADMAP
54
+
55
+ };
56
+
57
+ markers[0] = new google.maps.Marker( {
58
+
59
+ map: map,
60
+
61
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
62
+
63
+ });
64
+
65
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
66
+
67
+
68
+
69
+ var mapOptions = {
70
+
71
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
72
+
73
+ zoom: 15,
74
+
75
+ mapTypeId: google.maps.MapTypeId.ROADMAP
76
+
77
+ };
78
+
79
+ markers[1] = new google.maps.Marker( {
80
+
81
+ map: map,
82
+
83
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
84
+
85
+ });
86
+
87
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
88
+
89
+
90
+
91
+ var mapOptions = {
92
+
93
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
94
+
95
+ zoom: 15,
96
+
97
+ mapTypeId: google.maps.MapTypeId.ROADMAP
98
+
99
+ };
100
+
101
+ markers[2] = new google.maps.Marker( {
102
+
103
+ map: map,
104
+
105
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
106
+
107
+ });
108
+
109
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
110
+
111
+
112
+
113
+ $('#tabs a[href^="#panel"]').click(function(){
114
+
115
+ $("#tabs .panel").hide();
116
+
117
+ $(this.hash).fadeIn();
118
+
119
+ google.maps.event.trigger(maps[this.hash], 'resize');
120
+
121
+ return false;
122
+
123
+ });
124
+
125
+
126
+
127
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
128
+
129
+
130
+
131
+ });
132
+
133
+
134
+
135
+ ```
136
+
137
+ ②
138
+
139
+ ```javascript
140
+
141
+ $(function() {
142
+
143
+ var maps = {};
144
+
145
+ var markers = [];
146
+
147
+ var mapOptions = {
148
+
149
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
150
+
151
+ zoom: 15,
152
+
153
+ mapTypeId: google.maps.MapTypeId.ROADMAP
154
+
155
+ };
156
+
157
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
158
+
159
+
160
+
161
+ var mapOptions = {
162
+
163
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
164
+
165
+ zoom: 15,
166
+
167
+ mapTypeId: google.maps.MapTypeId.ROADMAP
168
+
169
+ };
170
+
171
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
172
+
173
+
174
+
175
+ var mapOptions = {
176
+
177
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
178
+
179
+ zoom: 15,
180
+
181
+ mapTypeId: google.maps.MapTypeId.ROADMAP
182
+
183
+ };
184
+
185
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
186
+
187
+
188
+
189
+ markers[0] = new google.maps.Marker( {
190
+
191
+ map: map,
192
+
193
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
194
+
195
+ });
196
+
197
+ markers[1] = new google.maps.Marker( {
198
+
199
+ map: map,
200
+
201
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
202
+
203
+ });
204
+
205
+ markers[2] = new google.maps.Marker( {
206
+
207
+ map: map,
208
+
209
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
210
+
211
+ });
212
+
213
+
214
+
215
+ $('#tabs a[href^="#panel"]').click(function(){
216
+
217
+ $("#tabs .panel").hide();
218
+
219
+ $(this.hash).fadeIn();
220
+
221
+ google.maps.event.trigger(maps[this.hash], 'resize');
222
+
223
+ return false;
224
+
225
+ });
226
+
227
+
228
+
229
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
230
+
231
+
232
+
233
+ });
234
+
235
+
236
+
237
+ ```
238
+
239
+
240
+
241
+ お二方にご回答をいただき修正してみたところ、下記のコードでマーカーが表示されました。
242
+
243
+
244
+
245
+ ```javascript
246
+
247
+
248
+
249
+ $(function() {
250
+
251
+ var maps = {};
252
+
253
+ var mapOptions = {
254
+
255
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
256
+
257
+ zoom: 15,
258
+
259
+ mapTypeId: google.maps.MapTypeId.ROADMAP
260
+
261
+ };
262
+
263
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
264
+
265
+
266
+
267
+ var mapOptions = {
268
+
269
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
270
+
271
+ zoom: 15,
272
+
273
+ mapTypeId: google.maps.MapTypeId.ROADMAP
274
+
275
+ };
276
+
277
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
278
+
279
+
280
+
281
+ var mapOptions = {
282
+
283
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
284
+
285
+ zoom: 15,
286
+
287
+ mapTypeId: google.maps.MapTypeId.ROADMAP
288
+
289
+ };
290
+
291
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
292
+
293
+
294
+
295
+ var markers = [];
296
+
297
+ markers[0] = new google.maps.Marker( {
298
+
299
+ map: maps['#panel1'] ,
300
+
301
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
302
+
303
+ });
304
+
305
+ markers[1] = new google.maps.Marker( {
306
+
307
+ map: maps['#panel2'] ,
308
+
309
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
310
+
311
+ });
312
+
313
+ markers[2] = new google.maps.Marker( {
314
+
315
+ map: maps['#panel3'] ,
316
+
317
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
318
+
319
+ });
320
+
321
+
322
+
323
+ $('#tabs a[href^="#panel"]').click(function(){
324
+
325
+ $("#tabs .panel").hide();
326
+
327
+ $(this.hash).fadeIn();
328
+
329
+ google.maps.event.trigger(maps[this.hash], 'resize');
330
+
331
+ return false;
332
+
333
+ });
334
+
335
+
336
+
337
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
338
+
339
+
340
+
341
+ });
342
+
343
+
344
+
345
+ ```
346
+
347
+
348
+
349
+
350
+
351
+ なんとかマーカーを表示させることができたのですが、マップのセンターがずれていることに今更ながら気づきました。（2番目のタブと3番目のタブに読み込んだマップ）
352
+
353
+ 今回の質問内容とは異なる問題かと思いますので、一旦終了にすべきか迷っているのですが、改善策をネットで探してみたところ、私のレベルではここまでのコードを修正して改善できる自身がありません。
354
+
355
+ もし、改善策お分かりになる方いらっしゃれば、ご教授いただけませんでしょうか。
356
+
357
+
358
+
359
+
360
+
361
+ 追記：HTMLソースと画像を添付してみます。
362
+
363
+ ```html
364
+
365
+ <!doctype html>
366
+
367
+ <html>
368
+
369
+ <head>
370
+
371
+ <meta charset="utf-8">
372
+
373
+ <title>テスト</title>
374
+
375
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
376
+
377
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
378
+
379
+ <style>
380
+
381
+ .nav-pills li a {
382
+
383
+ border: 1px solid #cccccc;
384
+
385
+ }
386
+
387
+ .nav-pills li a.active {
388
+
389
+ border: 1px solid #02acf8;
390
+
391
+ background:#02acf8;
392
+
393
+ color:#ffffff;
394
+
395
+ }
396
+
397
+ </style>
398
+
399
+ <script type="text/javascript">
400
+
401
+ $(function() {
402
+
403
+ var maps = {};
404
+
405
+ var mapOptions = {
406
+
407
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
408
+
409
+ zoom: 15,
410
+
411
+ mapTypeId: google.maps.MapTypeId.ROADMAP
412
+
413
+ };
414
+
415
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
416
+
417
+
418
+
419
+ var mapOptions = {
420
+
421
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
422
+
423
+ zoom: 15,
424
+
425
+ mapTypeId: google.maps.MapTypeId.ROADMAP
426
+
427
+ };
428
+
429
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
430
+
431
+
432
+
433
+ var mapOptions = {
434
+
435
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
436
+
437
+ zoom: 15,
438
+
439
+ mapTypeId: google.maps.MapTypeId.ROADMAP
440
+
441
+ };
442
+
443
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
444
+
445
+
446
+
447
+ var markers = [];
448
+
449
+ markers[0] = new google.maps.Marker( {
450
+
451
+ map: maps['#panel1'] ,
452
+
453
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
454
+
455
+ });
456
+
457
+ markers[1] = new google.maps.Marker( {
458
+
459
+ map: maps['#panel2'] ,
460
+
461
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
462
+
463
+ });
464
+
465
+ markers[2] = new google.maps.Marker( {
466
+
467
+ map: maps['#panel3'] ,
468
+
469
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
470
+
471
+ });
472
+
473
+
474
+
475
+ $('#tabs a[href^="#panel"]').click(function(){
476
+
477
+ $("#tabs .panel").hide();
478
+
479
+ $(this.hash).fadeIn();
480
+
481
+ google.maps.event.trigger(maps[this.hash], 'resize');
482
+
483
+ return false;
484
+
485
+ });
486
+
487
+
488
+
489
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
102
490
 
103
491
 
104
492
 
105
- });
493
+ });
494
+
495
+ </script>
496
+
497
+ </head>
498
+
499
+
500
+
501
+ <body>
502
+
503
+ <div id="tabs" class="col-md-6">
504
+
505
+ <ul class="nav nav-pills">
506
+
507
+ <li class="tab-btn1"><a href="#panel1" class="active">銀座4</a></li>
508
+
509
+ <li class="tab-btn2"><a href="#panel2">神田1</a></li>
510
+
511
+ <li class="tab-btn3"><a href="#panel3">銀座6</a></li>
512
+
513
+ </ul>
514
+
515
+ <div id="panel1" class="panel">
516
+
517
+ <div id="map_canvas1" style="width:500px; height:400px;"></div>
518
+
519
+ </div>
520
+
521
+ <div id="panel2" class="panel">
522
+
523
+ <div id="map_canvas2" style="width:500px; height:400px;"></div>
524
+
525
+ </div>
526
+
527
+ <div id="panel3" class="panel">
528
+
529
+ <div id="map_canvas3" style="width:500px; height:400px;"></div>
530
+
531
+ </div>
532
+
533
+ </div>
534
+
535
+ </body>
536
+
537
+ </html>
106
538
 
107
539
  ```
108
540
 
109
-
110
-
111
-
112
-
113
- ①
114
-
115
- ```javascript
116
-
117
- $(function() {
118
-
119
- var maps = {};
120
-
121
- var markers = [];
122
-
123
- var mapOptions = {
124
-
125
- center: new google.maps.LatLng(35.6713419,139.76541450000002),
126
-
127
- zoom: 15,
128
-
129
- mapTypeId: google.maps.MapTypeId.ROADMAP
130
-
131
- };
132
-
133
- markers[0] = new google.maps.Marker( {
134
-
135
- map: map,
136
-
137
- position: new google.maps.LatLng(35.6713419,139.76541450000002),
138
-
139
- });
140
-
141
- maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
142
-
143
-
144
-
145
- var mapOptions = {
146
-
147
- center: new google.maps.LatLng(35.6933865,139.76615270000002),
148
-
149
- zoom: 15,
150
-
151
- mapTypeId: google.maps.MapTypeId.ROADMAP
152
-
153
- };
154
-
155
- markers[1] = new google.maps.Marker( {
156
-
157
- map: map,
158
-
159
- position: new google.maps.LatLng(35.6933865,139.76615270000002),
160
-
161
- });
162
-
163
- maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
164
-
165
-
166
-
167
- var mapOptions = {
168
-
169
- center: new google.maps.LatLng(35.6712724,139.76160089999996),
170
-
171
- zoom: 15,
172
-
173
- mapTypeId: google.maps.MapTypeId.ROADMAP
174
-
175
- };
176
-
177
- markers[2] = new google.maps.Marker( {
178
-
179
- map: map,
180
-
181
- position: new google.maps.LatLng(35.6712724,139.76160089999996),
182
-
183
- });
184
-
185
- maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
186
-
187
-
188
-
189
- $('#tabs a[href^="#panel"]').click(function(){
190
-
191
- $("#tabs .panel").hide();
192
-
193
- $(this.hash).fadeIn();
194
-
195
- google.maps.event.trigger(maps[this.hash], 'resize');
196
-
197
- return false;
198
-
199
- });
200
-
201
-
202
-
203
- $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
204
-
205
-
206
-
207
- });
208
-
209
-
210
-
211
- ```
212
-
213
- ②
214
-
215
- ```javascript
216
-
217
- $(function() {
218
-
219
- var maps = {};
220
-
221
- var markers = [];
222
-
223
- var mapOptions = {
224
-
225
- center: new google.maps.LatLng(35.6713419,139.76541450000002),
226
-
227
- zoom: 15,
228
-
229
- mapTypeId: google.maps.MapTypeId.ROADMAP
230
-
231
- };
232
-
233
- maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
234
-
235
-
236
-
237
- var mapOptions = {
238
-
239
- center: new google.maps.LatLng(35.6933865,139.76615270000002),
240
-
241
- zoom: 15,
242
-
243
- mapTypeId: google.maps.MapTypeId.ROADMAP
244
-
245
- };
246
-
247
- maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
248
-
249
-
250
-
251
- var mapOptions = {
252
-
253
- center: new google.maps.LatLng(35.6712724,139.76160089999996),
254
-
255
- zoom: 15,
256
-
257
- mapTypeId: google.maps.MapTypeId.ROADMAP
258
-
259
- };
260
-
261
- maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
262
-
263
-
264
-
265
- markers[0] = new google.maps.Marker( {
266
-
267
- map: map,
268
-
269
- position: new google.maps.LatLng(35.6713419,139.76541450000002),
270
-
271
- });
272
-
273
- markers[1] = new google.maps.Marker( {
274
-
275
- map: map,
276
-
277
- position: new google.maps.LatLng(35.6933865,139.76615270000002),
278
-
279
- });
280
-
281
- markers[2] = new google.maps.Marker( {
282
-
283
- map: map,
284
-
285
- position: new google.maps.LatLng(35.6712724,139.76160089999996),
286
-
287
- });
288
-
289
-
290
-
291
- $('#tabs a[href^="#panel"]').click(function(){
292
-
293
- $("#tabs .panel").hide();
294
-
295
- $(this.hash).fadeIn();
296
-
297
- google.maps.event.trigger(maps[this.hash], 'resize');
298
-
299
- return false;
300
-
301
- });
302
-
303
-
304
-
305
- $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
306
-
307
-
308
-
309
- });
310
-
311
-
312
-
313
- ```
314
-
315
-
316
-
317
- お二方にご回答をいただき修正してみたところ、下記のコードでマーカーが表示されました。
318
-
319
-
320
-
321
- ```javascript
322
-
323
-
324
-
325
- $(function() {
326
-
327
- var maps = {};
328
-
329
- var mapOptions = {
330
-
331
- center: new google.maps.LatLng(35.6713419,139.76541450000002),
332
-
333
- zoom: 15,
334
-
335
- mapTypeId: google.maps.MapTypeId.ROADMAP
336
-
337
- };
338
-
339
- maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
340
-
341
-
342
-
343
- var mapOptions = {
344
-
345
- center: new google.maps.LatLng(35.6933865,139.76615270000002),
346
-
347
- zoom: 15,
348
-
349
- mapTypeId: google.maps.MapTypeId.ROADMAP
350
-
351
- };
352
-
353
- maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
354
-
355
-
356
-
357
- var mapOptions = {
358
-
359
- center: new google.maps.LatLng(35.6712724,139.76160089999996),
360
-
361
- zoom: 15,
362
-
363
- mapTypeId: google.maps.MapTypeId.ROADMAP
364
-
365
- };
366
-
367
- maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
368
-
369
-
370
-
371
- var markers = [];
372
-
373
- markers[0] = new google.maps.Marker( {
374
-
375
- map: maps['#panel1'] ,
376
-
377
- position: new google.maps.LatLng(35.6713419,139.76541450000002),
378
-
379
- });
380
-
381
- markers[1] = new google.maps.Marker( {
382
-
383
- map: maps['#panel2'] ,
384
-
385
- position: new google.maps.LatLng(35.6933865,139.76615270000002),
386
-
387
- });
388
-
389
- markers[2] = new google.maps.Marker( {
390
-
391
- map: maps['#panel3'] ,
392
-
393
- position: new google.maps.LatLng(35.6712724,139.76160089999996),
394
-
395
- });
396
-
397
-
398
-
399
- $('#tabs a[href^="#panel"]').click(function(){
400
-
401
- $("#tabs .panel").hide();
402
-
403
- $(this.hash).fadeIn();
404
-
405
- google.maps.event.trigger(maps[this.hash], 'resize');
406
-
407
- return false;
408
-
409
- });
410
-
411
-
412
-
413
- $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
414
-
415
-
416
-
417
- });
418
-
419
-
420
-
421
- ```
422
-
423
-
424
-
425
-
426
-
427
- なんとかマーカーを表示させることができたのですが、マップのセンターがずれていることに今更ながら気づきました。（2番目のタブと3番目のタブに読み込んだマップ）
428
-
429
- 今回の質問内容とは異なる問題かと思いますので、一旦終了にすべきか迷っているのですが、改善策をネットで探してみたところ、私のレベルではここまでのコードを修正して改善できる自身がありません。
430
-
431
- もし、改善策お分かりになる方いらっしゃれば、ご教授いただけませんでしょうか。
541
+ 上記のHTMLソースでタブ銀座4は問題なく座標指定した銀座4丁目がセンターに表示されポインターもセンターに表示されます。
542
+
543
+
544
+
545
+ ![イメージ説明](fe0422f33be143f572c90c44ac9ed9fb.jpeg)
546
+
547
+
548
+
549
+
550
+
551
+ タブ神田1と銀座6はマップのセンターが座標指定した位置ではなく
552
+
553
+ センターに表示したい座標（ポインターの位置も同様）が左上の見切れた場所にあります。
554
+
555
+
556
+
557
+ ![イメージ説明](8615f2b20bc0b885170716c8c617bbb5.jpeg)

8

コード追記

2016/07/19 14:19

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -311,3 +311,121 @@
311
311
 
312
312
 
313
313
  ```
314
+
315
+
316
+
317
+ お二方にご回答をいただき修正してみたところ、下記のコードでマーカーが表示されました。
318
+
319
+
320
+
321
+ ```javascript
322
+
323
+
324
+
325
+ $(function() {
326
+
327
+ var maps = {};
328
+
329
+ var mapOptions = {
330
+
331
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
332
+
333
+ zoom: 15,
334
+
335
+ mapTypeId: google.maps.MapTypeId.ROADMAP
336
+
337
+ };
338
+
339
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
340
+
341
+
342
+
343
+ var mapOptions = {
344
+
345
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
346
+
347
+ zoom: 15,
348
+
349
+ mapTypeId: google.maps.MapTypeId.ROADMAP
350
+
351
+ };
352
+
353
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
354
+
355
+
356
+
357
+ var mapOptions = {
358
+
359
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
360
+
361
+ zoom: 15,
362
+
363
+ mapTypeId: google.maps.MapTypeId.ROADMAP
364
+
365
+ };
366
+
367
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
368
+
369
+
370
+
371
+ var markers = [];
372
+
373
+ markers[0] = new google.maps.Marker( {
374
+
375
+ map: maps['#panel1'] ,
376
+
377
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
378
+
379
+ });
380
+
381
+ markers[1] = new google.maps.Marker( {
382
+
383
+ map: maps['#panel2'] ,
384
+
385
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
386
+
387
+ });
388
+
389
+ markers[2] = new google.maps.Marker( {
390
+
391
+ map: maps['#panel3'] ,
392
+
393
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
394
+
395
+ });
396
+
397
+
398
+
399
+ $('#tabs a[href^="#panel"]').click(function(){
400
+
401
+ $("#tabs .panel").hide();
402
+
403
+ $(this.hash).fadeIn();
404
+
405
+ google.maps.event.trigger(maps[this.hash], 'resize');
406
+
407
+ return false;
408
+
409
+ });
410
+
411
+
412
+
413
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
414
+
415
+
416
+
417
+ });
418
+
419
+
420
+
421
+ ```
422
+
423
+
424
+
425
+
426
+
427
+ なんとかマーカーを表示させることができたのですが、マップのセンターがずれていることに今更ながら気づきました。（2番目のタブと3番目のタブに読み込んだマップ）
428
+
429
+ 今回の質問内容とは異なる問題かと思いますので、一旦終了にすべきか迷っているのですが、改善策をネットで探してみたところ、私のレベルではここまでのコードを修正して改善できる自身がありません。
430
+
431
+ もし、改善策お分かりになる方いらっしゃれば、ご教授いただけませんでしょうか。

7

コードの追記

2016/07/19 12:34

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -209,3 +209,105 @@
209
209
 
210
210
 
211
211
  ```
212
+
213
+ ②
214
+
215
+ ```javascript
216
+
217
+ $(function() {
218
+
219
+ var maps = {};
220
+
221
+ var markers = [];
222
+
223
+ var mapOptions = {
224
+
225
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
226
+
227
+ zoom: 15,
228
+
229
+ mapTypeId: google.maps.MapTypeId.ROADMAP
230
+
231
+ };
232
+
233
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
234
+
235
+
236
+
237
+ var mapOptions = {
238
+
239
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
240
+
241
+ zoom: 15,
242
+
243
+ mapTypeId: google.maps.MapTypeId.ROADMAP
244
+
245
+ };
246
+
247
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
248
+
249
+
250
+
251
+ var mapOptions = {
252
+
253
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
254
+
255
+ zoom: 15,
256
+
257
+ mapTypeId: google.maps.MapTypeId.ROADMAP
258
+
259
+ };
260
+
261
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
262
+
263
+
264
+
265
+ markers[0] = new google.maps.Marker( {
266
+
267
+ map: map,
268
+
269
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
270
+
271
+ });
272
+
273
+ markers[1] = new google.maps.Marker( {
274
+
275
+ map: map,
276
+
277
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
278
+
279
+ });
280
+
281
+ markers[2] = new google.maps.Marker( {
282
+
283
+ map: map,
284
+
285
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
286
+
287
+ });
288
+
289
+
290
+
291
+ $('#tabs a[href^="#panel"]').click(function(){
292
+
293
+ $("#tabs .panel").hide();
294
+
295
+ $(this.hash).fadeIn();
296
+
297
+ google.maps.event.trigger(maps[this.hash], 'resize');
298
+
299
+ return false;
300
+
301
+ });
302
+
303
+
304
+
305
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
306
+
307
+
308
+
309
+ });
310
+
311
+
312
+
313
+ ```

6

コードの修正

2016/07/19 02:01

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
 
112
112
 
113
-
113
+ ①
114
114
 
115
115
  ```javascript
116
116
 
@@ -132,9 +132,9 @@
132
132
 
133
133
  markers[0] = new google.maps.Marker( {
134
134
 
135
- map: map,
135
+ map: map,
136
-
136
+
137
- position: new google.maps.LatLng(35.6713419,139.76541450000002),
137
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
138
138
 
139
139
  });
140
140
 
@@ -154,9 +154,9 @@
154
154
 
155
155
  markers[1] = new google.maps.Marker( {
156
156
 
157
- map: map,
157
+ map: map,
158
-
158
+
159
- position: new google.maps.LatLng(35.6933865,139.76615270000002),
159
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
160
160
 
161
161
  });
162
162
 
@@ -176,9 +176,9 @@
176
176
 
177
177
  markers[2] = new google.maps.Marker( {
178
178
 
179
- map: map,
179
+ map: map,
180
-
180
+
181
- position: new google.maps.LatLng(35.6933865,139.76615270000002),
181
+ position: new google.maps.LatLng(35.6712724,139.76160089999996),
182
182
 
183
183
  });
184
184
 

5

コードの追記

2016/07/19 01:58

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -105,3 +105,107 @@
105
105
  });
106
106
 
107
107
  ```
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+ ```javascript
116
+
117
+ $(function() {
118
+
119
+ var maps = {};
120
+
121
+ var markers = [];
122
+
123
+ var mapOptions = {
124
+
125
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
126
+
127
+ zoom: 15,
128
+
129
+ mapTypeId: google.maps.MapTypeId.ROADMAP
130
+
131
+ };
132
+
133
+ markers[0] = new google.maps.Marker( {
134
+
135
+ map: map,
136
+
137
+ position: new google.maps.LatLng(35.6713419,139.76541450000002),
138
+
139
+ });
140
+
141
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
142
+
143
+
144
+
145
+ var mapOptions = {
146
+
147
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
148
+
149
+ zoom: 15,
150
+
151
+ mapTypeId: google.maps.MapTypeId.ROADMAP
152
+
153
+ };
154
+
155
+ markers[1] = new google.maps.Marker( {
156
+
157
+ map: map,
158
+
159
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
160
+
161
+ });
162
+
163
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
164
+
165
+
166
+
167
+ var mapOptions = {
168
+
169
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
170
+
171
+ zoom: 15,
172
+
173
+ mapTypeId: google.maps.MapTypeId.ROADMAP
174
+
175
+ };
176
+
177
+ markers[2] = new google.maps.Marker( {
178
+
179
+ map: map,
180
+
181
+ position: new google.maps.LatLng(35.6933865,139.76615270000002),
182
+
183
+ });
184
+
185
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
186
+
187
+
188
+
189
+ $('#tabs a[href^="#panel"]').click(function(){
190
+
191
+ $("#tabs .panel").hide();
192
+
193
+ $(this.hash).fadeIn();
194
+
195
+ google.maps.event.trigger(maps[this.hash], 'resize');
196
+
197
+ return false;
198
+
199
+ });
200
+
201
+
202
+
203
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
204
+
205
+
206
+
207
+ });
208
+
209
+
210
+
211
+ ```

4

仕様を追加

2016/07/19 01:57

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -27,6 +27,8 @@
27
27
  上記のサンプルスクリプトに追記する形でマーカーを表示させる方法をご教授いただけないでしょうか。
28
28
 
29
29
 
30
+
31
+ 追記：マーカーは標準のものを各マップ中央に1つ（mapOptionsで座標指定しているポイント）表示したいです。
30
32
 
31
33
  追記：下記にコード記載いたしました。
32
34
 

3

コード修正

2016/07/17 14:23

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,9 @@
32
32
 
33
33
 
34
34
 
35
+ ```javascript
36
+
35
- ```javascript $(function() {
37
+ $(function() {
36
38
 
37
39
  var maps = {};
38
40
 

2

コード追記

2016/07/17 13:58

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -25,6 +25,10 @@
25
25
 
26
26
 
27
27
  上記のサンプルスクリプトに追記する形でマーカーを表示させる方法をご教授いただけないでしょうか。
28
+
29
+
30
+
31
+ 追記：下記にコード記載いたしました。
28
32
 
29
33
 
30
34
 

1

コードを追記しました

2016/07/17 13:55

投稿

yoshinori_w
yoshinori_w

スコア12

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,75 @@
25
25
 
26
26
 
27
27
  上記のサンプルスクリプトに追記する形でマーカーを表示させる方法をご教授いただけないでしょうか。
28
+
29
+
30
+
31
+ ```javascript $(function() {
32
+
33
+ var maps = {};
34
+
35
+ var mapOptions = {
36
+
37
+ center: new google.maps.LatLng(35.6713419,139.76541450000002),
38
+
39
+ zoom: 15,
40
+
41
+ mapTypeId: google.maps.MapTypeId.ROADMAP
42
+
43
+ };
44
+
45
+
46
+
47
+ maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
48
+
49
+
50
+
51
+ var mapOptions = {
52
+
53
+ center: new google.maps.LatLng(35.6933865,139.76615270000002),
54
+
55
+ zoom: 15,
56
+
57
+ mapTypeId: google.maps.MapTypeId.ROADMAP
58
+
59
+ };
60
+
61
+ maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
62
+
63
+
64
+
65
+ var mapOptions = {
66
+
67
+ center: new google.maps.LatLng(35.6712724,139.76160089999996),
68
+
69
+ zoom: 15,
70
+
71
+ mapTypeId: google.maps.MapTypeId.ROADMAP
72
+
73
+ };
74
+
75
+ maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);
76
+
77
+
78
+
79
+ $('#tabs a[href^="#panel"]').click(function(){
80
+
81
+ $("#tabs .panel").hide();
82
+
83
+ $(this.hash).fadeIn();
84
+
85
+ google.maps.event.trigger(maps[this.hash], 'resize');
86
+
87
+ return false;
88
+
89
+ });
90
+
91
+
92
+
93
+ $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
94
+
95
+
96
+
97
+ });
98
+
99
+ ```