teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問同一ページに複数のgoogle mapを表示させる

編集履歴

回答編集履歴

2

コード修正

2015/07/06 10:07

投稿

noise
noise

スコア256

test CHANGED
@@ -292,9 +292,101 @@
292
292
 
293
293
  };
294
294
 
295
+
296
+
297
+
298
+
299
+
300
+
301
+ function googleMap2() {
302
+
303
+
304
+
305
+
306
+
307
+ var latlng = new google.maps.LatLng(35.489160610317174, 139.20083951950073);/* 座標 map1と差分を出すため少しずらしてます*/
308
+
309
+
310
+
311
+ var myOptions = {
312
+
313
+ zoom: 16, /*拡大比率*/
314
+
315
+ center: latlng,
316
+
317
+ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
318
+
319
+ };
320
+
321
+
322
+
323
+ var map = new google.maps.Map(document.getElementById('map2'), myOptions);
324
+
325
+
326
+
327
+
328
+
329
+ /*アイコン設定*/
330
+
331
+ var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
332
+
333
+ new google.maps.Size(70,84),/*アイコンサイズ*/
334
+
335
+ new google.maps.Point(0,0)/*アイコン位置*/
336
+
337
+ );
338
+
339
+
340
+
341
+
342
+
343
+ var markerOptions = {
344
+
345
+ position: latlng,
346
+
347
+ map: map,
348
+
349
+ icon: icon,
350
+
351
+ title: 'shop',/*タイトル*/
352
+
353
+ animation: google.maps.Animation.DROP/*アニメーション*/
354
+
355
+ };
356
+
357
+ var marker = new google.maps.Marker(markerOptions);
358
+
359
+ /*取得スタイルの貼り付け*/
360
+
361
+ var styleOptions = [
362
+
363
+ {
364
+
365
+ "stylers": [
366
+
367
+ { "hue": '#003366' }
368
+
369
+ ]
370
+
371
+ }
372
+
373
+ ];
374
+
375
+ var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
376
+
377
+ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
378
+
379
+ map.mapTypes.set('style', sampleType);
380
+
381
+ map.setMapTypeId('style');
382
+
383
+ };
384
+
295
385
  google.maps.event.addDomListener(window, 'load', function() {
296
386
 
297
- googleMap();
387
+ googleMap();
388
+
389
+ googleMap2();
298
390
 
299
391
  });
300
392
 
@@ -302,126 +394,30 @@
302
394
 
303
395
 
304
396
 
305
- function googleMap2() {
397
+
306
-
307
-
308
-
309
-
310
-
311
- var latlng = new google.maps.LatLng(35.489160610317174, 139.20083951950073);/* 座標 map1と差分を出すため少しずらしてます*/
398
+
312
-
313
-
314
-
315
- var myOptions = {
316
-
317
- zoom: 16, /*拡大比率*/
318
-
319
- center: latlng,
320
-
321
- mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
322
-
323
- };
324
-
325
-
326
-
327
- var map = new google.maps.Map(document.getElementById('map2'), myOptions);
328
-
329
-
330
-
331
-
332
-
333
- /*アイコン設定*/
399
+ </script>
334
-
335
- var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
400
+
336
-
337
- new google.maps.Size(70,84),/*アイコンサイズ*/
401
+
338
-
339
- new google.maps.Point(0,0)/*アイコン位置*/
402
+
340
-
341
- );
403
+
342
-
343
-
344
-
345
-
346
-
347
- var markerOptions = {
404
+
348
-
349
- position: latlng,
350
-
351
- map: map,
352
-
353
- icon: icon,
354
-
355
- title: 'shop',/*タイトル*/
356
-
357
- animation: google.maps.Animation.DROP/*アニメーション*/
358
-
359
- };
360
-
361
- var marker = new google.maps.Marker(markerOptions);
362
-
363
- /*取得スタイルの貼り付け*/
364
-
365
- var styleOptions = [
366
-
367
- {
368
-
369
- "stylers": [
405
+ </body>
370
-
371
- { "hue": '#003366' }
406
+
372
-
373
- ]
374
-
375
- }
376
-
377
- ];
378
-
379
- var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
380
-
381
- var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
382
-
383
- map.mapTypes.set('style', sampleType);
384
-
385
- map.setMapTypeId('style');
407
+ </html>
408
+
409
+
410
+
411
+
412
+
386
-
413
+ ```お望みの結果であれば良いのですが、参考になりましたら幸いです。
414
+
415
+
416
+
387
- };
417
+ ---------すいません少しコード修正しました
388
418
 
389
419
  google.maps.event.addDomListener(window, 'load', function() {
390
420
 
391
- googleMap();
392
-
393
- googleMap2();
394
-
395
421
  });
396
422
 
397
-
398
-
399
-
400
-
401
-
402
-
403
- </script>
404
-
405
-
406
-
407
-
408
-
409
- </body>
410
-
411
- </html>
412
-
413
-
414
-
415
-
416
-
417
- ```お望みの結果であれば良いのですが、参考になりましたら幸いです。
418
-
419
-
420
-
421
- ---------すいません少しコード修正しました
422
-
423
- google.maps.event.addDomListener(window, 'load', function() {
424
-
425
- });
426
-
427
423
  があるのに、別途onloadイベントを記載してしまっていたので修正しました。

1

コード修正

2015/07/06 10:07

投稿

noise
noise

スコア256

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  </head>
26
26
 
27
- <body onload='googleMap();'>
27
+ <body>
28
28
 
29
29
 
30
30
 
@@ -208,222 +208,220 @@
208
208
 
209
209
  <script type="text/javascript">
210
210
 
211
+ function googleMap() {
212
+
213
+
214
+
215
+
216
+
217
+ var latlng = new google.maps.LatLng(35.689160610317174, 139.70083951950073);/* 座標 */
218
+
219
+
220
+
221
+ var myOptions = {
222
+
223
+ zoom: 16, /*拡大比率*/
224
+
225
+ center: latlng,
226
+
227
+ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
228
+
229
+ };
230
+
231
+
232
+
233
+ var map = new google.maps.Map(document.getElementById('map1'), myOptions);
234
+
235
+
236
+
237
+
238
+
239
+ /*アイコン設定*/
240
+
241
+ var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
242
+
243
+ new google.maps.Size(70,84),/*アイコンサイズ*/
244
+
245
+ new google.maps.Point(0,0)/*アイコン位置*/
246
+
247
+ );
248
+
249
+
250
+
251
+
252
+
253
+ var markerOptions = {
254
+
255
+ position: latlng,
256
+
257
+ map: map,
258
+
259
+ icon: icon,
260
+
261
+ title: 'shop',/*タイトル*/
262
+
211
- window.onload = function() {/* ページが読み込まれたら実効 */
263
+ animation: google.maps.Animation.DROP/*アニメーション*/
264
+
265
+ };
266
+
267
+ var marker = new google.maps.Marker(markerOptions);
268
+
269
+ /*取得スタイルの貼り付け*/
270
+
271
+ var styleOptions = [
272
+
273
+ {
274
+
275
+ "stylers": [
276
+
277
+ { "hue": '#003366' }
278
+
279
+ ]
280
+
281
+ }
282
+
283
+ ];
284
+
285
+ var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
286
+
287
+ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
288
+
289
+ map.mapTypes.set('style', sampleType);
290
+
291
+ map.setMapTypeId('style');
292
+
293
+ };
294
+
295
+ google.maps.event.addDomListener(window, 'load', function() {
296
+
297
+ googleMap();
298
+
299
+ });
300
+
301
+
302
+
303
+
304
+
305
+ function googleMap2() {
306
+
307
+
308
+
309
+
310
+
311
+ var latlng = new google.maps.LatLng(35.489160610317174, 139.20083951950073);/* 座標 map1と差分を出すため少しずらしてます*/
312
+
313
+
314
+
315
+ var myOptions = {
316
+
317
+ zoom: 16, /*拡大比率*/
318
+
319
+ center: latlng,
320
+
321
+ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
322
+
323
+ };
324
+
325
+
326
+
327
+ var map = new google.maps.Map(document.getElementById('map2'), myOptions);
328
+
329
+
330
+
331
+
332
+
333
+ /*アイコン設定*/
334
+
335
+ var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
336
+
337
+ new google.maps.Size(70,84),/*アイコンサイズ*/
338
+
339
+ new google.maps.Point(0,0)/*アイコン位置*/
340
+
341
+ );
342
+
343
+
344
+
345
+
346
+
347
+ var markerOptions = {
348
+
349
+ position: latlng,
350
+
351
+ map: map,
352
+
353
+ icon: icon,
354
+
355
+ title: 'shop',/*タイトル*/
356
+
357
+ animation: google.maps.Animation.DROP/*アニメーション*/
358
+
359
+ };
360
+
361
+ var marker = new google.maps.Marker(markerOptions);
362
+
363
+ /*取得スタイルの貼り付け*/
364
+
365
+ var styleOptions = [
366
+
367
+ {
368
+
369
+ "stylers": [
370
+
371
+ { "hue": '#003366' }
372
+
373
+ ]
374
+
375
+ }
376
+
377
+ ];
378
+
379
+ var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
380
+
381
+ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
382
+
383
+ map.mapTypes.set('style', sampleType);
384
+
385
+ map.setMapTypeId('style');
386
+
387
+ };
388
+
389
+ google.maps.event.addDomListener(window, 'load', function() {
212
390
 
213
391
  googleMap();
214
392
 
215
393
  googleMap2();
216
394
 
217
- }
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
- function googleMap() {
226
-
227
-
228
-
229
-
230
-
231
- var latlng = new google.maps.LatLng(35.689160610317174, 139.70083951950073);/* 座標 */
232
-
233
-
234
-
235
- var myOptions = {
236
-
237
- zoom: 16, /*拡大比率*/
238
-
239
- center: latlng,
240
-
241
- mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
242
-
243
- };
395
+ });
244
-
245
-
246
-
247
- var map = new google.maps.Map(document.getElementById('map1'), myOptions);
396
+
248
-
249
-
250
-
251
-
252
-
397
+
398
+
399
+
400
+
401
+
402
+
253
- /*アイコン設定*/
403
+ </script>
254
-
255
- var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
404
+
256
-
257
- new google.maps.Size(70,84),/*アイコンサイズ*/
405
+
258
-
259
- new google.maps.Point(0,0)/*アイコン位置*/
406
+
260
-
261
- );
407
+
262
-
263
-
264
-
265
-
266
-
267
- var markerOptions = {
408
+
268
-
269
- position: latlng,
270
-
271
- map: map,
272
-
273
- icon: icon,
274
-
275
- title: 'shop',/*タイトル*/
276
-
277
- animation: google.maps.Animation.DROP/*アニメーション*/
278
-
279
- };
280
-
281
- var marker = new google.maps.Marker(markerOptions);
282
-
283
- /*取得スタイルの貼り付け*/
284
-
285
- var styleOptions = [
286
-
287
- {
288
-
289
- "stylers": [
409
+ </body>
290
-
291
- { "hue": '#003366' }
410
+
292
-
293
- ]
294
-
295
- }
296
-
297
- ];
298
-
299
- var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
300
-
301
- var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
302
-
303
- map.mapTypes.set('style', sampleType);
304
-
305
- map.setMapTypeId('style');
411
+ </html>
412
+
413
+
414
+
415
+
416
+
306
-
417
+ ```お望みの結果であれば良いのですが、参考になりましたら幸いです。
418
+
419
+
420
+
307
- };
421
+ ---------すいません少しコード修正しました
308
422
 
309
423
  google.maps.event.addDomListener(window, 'load', function() {
310
424
 
311
- googleMap();
312
-
313
425
  });
314
426
 
315
-
316
-
317
-
318
-
319
- function googleMap2() {
320
-
321
-
322
-
323
-
324
-
325
- var latlng = new google.maps.LatLng(35.489160610317174, 139.20083951950073);/* 座標 map1と差分を出すため少しずらしてます*/
326
-
327
-
328
-
329
- var myOptions = {
330
-
331
- zoom: 16, /*拡大比率*/
332
-
333
- center: latlng,
334
-
335
- mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
336
-
337
- };
338
-
339
-
340
-
341
- var map = new google.maps.Map(document.getElementById('map2'), myOptions);
342
-
343
-
344
-
345
-
346
-
347
- /*アイコン設定*/
348
-
349
- var icon = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/flag.png',/*画像url*/
350
-
351
- new google.maps.Size(70,84),/*アイコンサイズ*/
352
-
353
- new google.maps.Point(0,0)/*アイコン位置*/
354
-
355
- );
356
-
357
-
358
-
359
-
360
-
361
- var markerOptions = {
362
-
363
- position: latlng,
364
-
365
- map: map,
366
-
367
- icon: icon,
368
-
369
- title: 'shop',/*タイトル*/
370
-
371
- animation: google.maps.Animation.DROP/*アニメーション*/
372
-
373
- };
374
-
375
- var marker = new google.maps.Marker(markerOptions);
376
-
377
- /*取得スタイルの貼り付け*/
378
-
379
- var styleOptions = [
380
-
381
- {
382
-
383
- "stylers": [
384
-
385
- { "hue": '#003366' }
386
-
387
- ]
388
-
389
- }
390
-
391
- ];
392
-
393
- var styledMapOptions = { name: 'shop' }/*地図右上のタイトル*/
394
-
395
- var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
396
-
397
- map.mapTypes.set('style', sampleType);
398
-
399
- map.setMapTypeId('style');
400
-
401
- };
402
-
403
- google.maps.event.addDomListener(window, 'load', function() {
404
-
405
- googleMap();
406
-
407
- });
408
-
409
-
410
-
411
-
412
-
413
-
414
-
415
- </script>
416
-
417
-
418
-
419
-
420
-
421
- </body>
422
-
423
- </html>
424
-
425
-
426
-
427
-
428
-
429
- ```お望みの結果であれば良いのですが、参考になりましたら幸いです。
427
+ があるのに、別途onloadイベントを記載してしまっていたので修正しました。