GoogleMapのHTML内のおける地図の複数表示について

実現したいこと

任意に指定した地点のポイントの地図を複数表示させること。

発生している問題

HTMLに複数の任意の地図だけを表示させようとしています。
（javascript内のpoint配列から参照）
この場合におけるpoint[0]だけの場合や、point[0]からスタートして連続(point[0],point[1],point[3]...といった具合)での複数表示はできました。しかし不連続の場合に表示ができません。
まだプログラミングを初めて間もないため、長いコードですがご了承ください。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>google API test</title>
6</head>
7<body>
8<p>テスト</p>
9
10<script type="text/javascript" src="api-javascript-test.js">
11</script>
12
13<script type="text/javascript">
14 document.write(point[0]);
15 document.write(point[2]);
16 document.write(point[5]);
17 document.write(point[10]);
18 document.write(point[12]);
19</script>
20
21<script async defer src="https://maps.googleapis.com/maps/api/js?
22key=My-APIkey&callback=initMap">
23</script>
24
25</body>
26</html>

JavaScript
1function initMap(){
2	//	JR東京駅
3	var opts1 = {
4			zoom: 15,
5			center: new google.maps.LatLng(35.681661 , 139.767314),
6	};
7	var map1 = new google.maps.Map(document.getElementById("map1"), opts1);
8
9	var mnum1 = new google.maps.LatLng(35.681661 , 139.767314);
10	var marker1 = new google.maps.Marker({
11		position: mnum1,
12		map: map1
13	});
14
15	//	新国立競技場
16	var opts2 = {
17			zoom: 15,
18			center: new google.maps.LatLng(35.678356 , 139.715482)
19	};
20	var map2 = new google.maps.Map(document.getElementById("map2"), opts2);
21
22	var mnum2 = new google.maps.LatLng(35.678356 , 139.715482);
23	var marker2 = new google.maps.Marker({
24		position: mnum2,
25		map: map2
26	});
27
28	//	東京体育館
29	var opts3 = {
30			zoom: 15,
31			center: new google.maps.LatLng(35.67948 , 139.712092)
32	};
33	var map3 = new google.maps.Map(document.getElementById("map3"), opts3);
34
35	var mnum3 = new google.maps.LatLng(35.67948 , 139.712092);
36	var marker3 = new google.maps.Marker({
37		position: mnum3,
38		map: map3
39	});
40
41	//	国立代々木競技場
42	var opts4 = {
43			zoom: 15,
44			center: new google.maps.LatLng(35.667868 , 139.700438)
45	};
46	var map4 = new google.maps.Map(document.getElementById("map4"), opts4);
47
48	var mnum4 = new google.maps.LatLng(35.667868 , 139.700438);
49	var marker4 = new google.maps.Marker({
50		position: mnum4,
51		map: map4
52	});
53
54	//	日本武道館
55	var opts5 = {
56			zoom: 15,
57			center: new google.maps.LatLng(35.693475 , 139.75006)
58	};
59	var map5 = new google.maps.Map(document.getElementById("map5"), opts5);
60
61	var mnum5 = new google.maps.LatLng(35.693475 , 139.75006);
62	var marker5 = new google.maps.Marker({
63		position: mnum5,
64		map: map5
65	});
66
67	//	皇居外苑
68	var opts6 = {
69			zoom: 15,
70			center: new google.maps.LatLng(35.678069 , 139.756024)
71	};
72	var map6 = new google.maps.Map(document.getElementById("map6"), opts6);
73
74	var mnum6 = new google.maps.LatLng(35.678069 , 139.756024);
75	var marker6 = new google.maps.Marker({
76		position: mnum6,
77		map: map6
78	});
79
80	//	東京国際フォーラム
81	var opts7 = {
82			zoom: 15,
83			center: new google.maps.LatLng(35.676607 , 139.764287)
84	};
85	var map7 = new google.maps.Map(document.getElementById("map7"), opts7);
86
87	var mnum7 = new google.maps.LatLng(35.676607 , 139.764287);
88	var marker7 = new google.maps.Marker({
89		position: mnum7,
90		map: map7
91	});
92
93	//	両国国技館
94	var opts8  = {
95			zoom: 15,
96			center: new google.maps.LatLng(35.697179 , 139.793362)
97	};
98	var map8 = new google.maps.Map(document.getElementById("map8"), opts8);
99
100	var mnum8 = new google.maps.LatLng(35.697179 , 139.793362);
101	var marker8 = new google.maps.Marker({
102		position: mnum8,
103		map: map8
104	});
105
106	//	馬事公苑
107	var opts9 = {
108			zoom: 15,
109			center: new google.maps.LatLng(35.638671 , 139.632304)
110	};
111	var map9 = new google.maps.Map(document.getElementById("map9"), opts9);
112
113	var mnum9 = new google.maps.LatLng(35.638671 , 139.632304);
114	var marker9 = new google.maps.Marker({
115		position: mnum9,
116		map: map9
117	});
118
119	//	武蔵野の森総合スポーツプラザ
120	var opts10 = {
121			zoom: 15,
122			center: new google.maps.LatLng(35.66518 , 139.525036)
123	};
124	var map10 = new google.maps.Map(document.getElementById("map10"), opts10);
125
126	var mnum10 = new google.maps.LatLng(35.66518 , 139.525036);
127	var marker10 = new google.maps.Marker({
128		position: mnum10,
129		map: map10
130	});
131
132	//	東京スタジアム（味の素スタジアム）
133	var opts11 = {
134			zoom: 15,
135			center: new google.maps.LatLng(35.66518 , 139.525036)
136	};
137	var map11 = new google.maps.Map(document.getElementById("map11"), opts11);
138
139	var mnum11 = new google.maps.LatLng(35.66518 , 139.525036);
140	var marker11 = new google.maps.Marker({
141		position: mnum11,
142		map: map11
143	});
144
145	//	有明アリーナ
146	var opts12  = {
147			zoom: 15,
148			center: new google.maps.LatLng(35.64359 , 139.794739)
149	};
150	var map12 = new google.maps.Map(document.getElementById("map12"), opts12);
151
152	var mnum12 = new google.maps.LatLng(35.64359 , 139.794739);
153	var marker12 = new google.maps.Marker({
154		position: mnum12,
155		map: map12
156	});
157
158	//	有明体操競技場
159	var opts13 = {
160			zoom: 15,
161			center: new google.maps.LatLng(35.641683 , 139.792167)
162	};
163	var map13 = new google.maps.Map(document.getElementById("map13"), opts13);
164
165	var mnum13 = new google.maps.LatLng(35.641683 , 139.792167);
166	var marker13 = new google.maps.Marker({
167		position: mnum13,
168		map: map13
169	});
170}
171var point = new Array
172point = [
173	'<div id="map1" style = "width: 500px ; height:300px"></div><br>',
174	'<div id="map2" style = "width: 500px ; height:300px"></div><br>',
175	'<div id="map3" style = "width: 500px ; height:300px"></div><br>',
176	'<div id="map4" style = "width: 500px ; height:300px"></div><br>',
177	'<div id="map5" style = "width: 500px ; height:300px"></div><br>',
178	'<div id="map6" style = "width: 500px ; height:300px"></div><br>',
179	'<div id="map7" style = "width: 500px ; height:300px"></div><br>',
180	'<div id="map8" style = "width: 500px ; height:300px"></div><br>',
181	'<div id="map9" style = "width: 500px ; height:300px"></div><br>',
182	'<div id="map10" style = "width: 500px ; height:300px"></div><br>',
183	'<div id="map11" style = "width: 500px ; height:300px"></div><br>',
184	'<div id="map12" style = "width: 500px ; height:300px"></div><br>',
185	'<div id="map13" style = "width: 500px ; height:300px"></div><br>',
186];

###追記
「任意」について
今回は0,2,5,10,12番目のマップを表示させたい意図でHTMLは作りました。
最終的な目的として、ある処理を通してこの番号を生成。マップを表示していきたいと考えています。
数も番号を変則的になり、それに合わせてマップ表示をしていくことを最終目的としています。
感覚的には、javascript上ですべてのマップ表示に必要なコードを作成。HTMLでその中から適宜持ってきて表示させる
といったことをしていきたいと考えています。
言葉足らず点等ございましたら、ご遠慮なくご指摘お願いします。

Lhankor_Mhy

2018/10/30 09:48

initMap() のカッコが閉じていませんが、typoですか？

totogawa

2018/10/30 09:52

ご指摘ありがとうございます。単純な記入ミスです。訂正しましたので、引き続き宜しくお願い致します。

kei344

2018/10/30 10:23

「任意」とは。具体的にどのようなことをしたいのかを質問文に追記されることをお勧めします。

totogawa

2018/10/30 10:35

ご指摘ありがとうございます。追記に説明を載せました。宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

ちょっと頭の中を整理しましょう。
まず、地図が書き出される<div>が先に表示されていなければ、
var map1 = new google.maps.Map(document.getElementById("map1"), opts1);
が、書き出す場所がないので、エラーになります。

また、複数の<div>の中から表示させたいものをdocument.write()で書くというアイデアのようですが、これも、上と同じ理由で、id=“map1”が歯抜けになっていたら、その部分でエラーになり、スクリプトが停止しています。

そのあたりを踏まえて、スクリプトを組み直してみましょう。
---追記 ---
APIが呼ばれた後、callback=initMapでinitMap()を呼び出していますので、<div>の配列も、initMap()の中で宣言していると、タイミングがNGですね。

--- 追記 ---
if(document.getElementById("map1"))で、目的のidがあるかどうかをチェックできます。

下記の例ではdocument.writeはあまり必要性を感じないので省いています。
--追記-- この場合、document.writeを省いたので、api-javascript-test.jsの呼び出しは、API呼び出しよりも前であれば、<head>の中でも<body>の中でも構いません。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>google API test</title>
6  <style type="text/css">
7
8  </style>
9
10</head>
11<body>
12  <p>テスト</p>
13
14  <div id="map1" style = "width: 500px ; height:300px"></div>
15  <div id="map3" style = "width: 500px ; height:300px"></div>
16  <div id="map5" style = "width: 500px ; height:300px"></div>
17
18
19  <script type="text/javascript" src="api-javascript-test.js">
20  </script>
21  <script src="https://maps.googleapis.com/maps/api/js?key=hoge&callback=initMap"></script>
22</body>
23</html>

api-javascript-test.js

javascript
1function initMap(){
2//    JR東京駅 map1
3  if(document.getElementById("map1")){//id="map1" があれば 処理を通る
4    var opts1 = {
5      zoom: 15,
6      center: new google.maps.LatLng(35.681661 , 139.767314),
7    };
8    var map1 = new google.maps.Map(document.getElementById("map1"), opts1);
9
10    var mnum1 = new google.maps.LatLng(35.681661 , 139.767314);
11    var marker1 = new google.maps.Marker({
12      position: mnum1,
13      map: map1
14    });
15  }
16//    新国立競技場 map2
17  if(document.getElementById("map2")){//id="map2" があれば 処理を通る
18    var opts2 = {
19      zoom: 15,
20      center: new google.maps.LatLng(35.678356 , 139.715482)
21    };
22    var map2 = new google.maps.Map(document.getElementById("map2"), opts2);
23
24    var mnum2 = new google.maps.LatLng(35.678356 , 139.715482);
25    var marker2 = new google.maps.Marker({
26      position: mnum2,
27      map: map2
28    });
29  }
30//    東京体育館 map3
31  if(document.getElementById("map3")){//id="map3" があれば 処理を通る
32    var opts3 = {
33      zoom: 15,
34      center: new google.maps.LatLng(35.67948 , 139.712092)
35    };
36    var map3 = new google.maps.Map(document.getElementById("map3"), opts3);
37
38    var mnum3 = new google.maps.LatLng(35.67948 , 139.712092);
39    var marker3 = new google.maps.Marker({
40      position: mnum3,
41      map: map3
42    });
43  }
44//    国立代々木競技場
45  if(document.getElementById("map4")){//id="map4" があれば 処理を通る
46    var opts4 = {
47      zoom: 15,
48      center: new google.maps.LatLng(35.667868 , 139.700438)
49    };
50    var map4 = new google.maps.Map(document.getElementById("map4"), opts4);
51
52    var mnum4 = new google.maps.LatLng(35.667868 , 139.700438);
53    var marker4 = new google.maps.Marker({
54      position: mnum4,
55      map: map4
56    });
57  }
58
59//    日本武道館
60  if(document.getElementById("map5")){//id="map5" があれば 処理を通る
61    var opts5 = {
62      zoom: 15,
63      center: new google.maps.LatLng(35.693475 , 139.75006)
64    };
65    var map5 = new google.maps.Map(document.getElementById("map5"), opts5);
66
67    var mnum5 = new google.maps.LatLng(35.693475 , 139.75006);
68    var marker5 = new google.maps.Marker({
69      position: mnum5,
70      map: map5
71    });
72  }
73}

投稿2018/10/30 11:07

編集2018/10/31 00:23

colling

総合スコア798

totogawa

2018/10/30 16:13

2点ほど失礼します。質問文に不手際がありました。正確には、この場合におけるpoint[0]の場合や、point[0]からスタートして連続(point[0],point[1],point[3]...といった具合)での複数表示はできました。しかし不連続の場合には、回答していただいた内容同様に、歯抜け状態となりスクリプトが停止しているという認識で正しいでしょうか？最後ですが、この対処法として呼び出さないものに対して何らかの処理をプラスアルファで加えればよいのでしょうか？それとも、そもそもの書き方がまずいのでしょうか？私自身、勉強しながらの制作で知識が足らず、どうすればよいかいまいちピンと来ていません。宜しければ簡単な例を書いていただけると幸いです。長文になりましたが、何卒よろしくお願いします。

colling

2018/10/30 23:02

地図座標の配列はjavascript側にあらかじめたくさん持っておきたいという認識でよろしいでしょうか？

colling

2018/10/31 00:12

一つ前のコメントに対する返信です。歯抜けのところで停止しているという認識でOKです。目的のidがない場合には、　new google.maps.Map() しないという処理が必要です。

totogawa

2018/10/31 00:21

そうですね。あらかじめJavaScript上でたくさん持っておき、その場で取り出していく感じです。

colling

2018/10/31 00:31

回答に動作確認済みのものを追記しておきました。コピペで済ませず、何がどうなったか理解して使ってください。(^ ^

totogawa

2018/10/31 02:26

丁寧なご回答ありがとうございます。まさにその通りだと考えています。しっかりと理解したうえで、参考とさせていただきます。

行動規範の内容に同意します

#map1がない場合、document.getElementById("map1")はnullを返します。
new google.maps.Map(null)はエラーを返すようですので、そこでスクリプトは停止します。

解決方法は、nullの時にはAPIを呼ばない、あるいは適切にエラー処理をする、というものが考えられるかと思います。

投稿2018/10/30 10:23

編集2018/10/30 11:23

Lhankor_Mhy

総合スコア36115

totogawa

2018/10/30 16:20

今回の場合においては、point配列の0,2,5,10,12以外のものが、nullで返されていることによってスクリプトが停止しているという認識で正しいでしょうか？また、回答していただいた上大変恐縮ですが、nullの時にAPIを呼ばない処理を行う際の修正例を書いて抱けると幸いです。何卒宜しくお願い致します。

Lhankor_Mhy

2018/10/31 00:41

一例として、以下のような書き方でも動くのでは。 if ( document.getElementById("map1") ) ...

totogawa

2018/10/31 02:26

丁寧なご回答ありがとうございます。参考とさせていただきます。

行動規範の内容に同意します

あなたの回答