teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Googlemapが表示されなくなってしまいました

編集履歴

質問編集履歴

9

編集

2017/11/29 06:56

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -156,7 +156,7 @@
156
156
 
157
157
  ```
158
158
 
159
- <DOCTYPE html>
159
+ <!DOCTYPE html>
160
160
 
161
161
  <html lang="ja">
162
162
 
@@ -168,7 +168,7 @@
168
168
 
169
169
  <script async defer
170
170
 
171
- src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
171
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>
172
172
 
173
173
  </head>
174
174
 

8

編集

2017/11/29 06:56

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -70,168 +70,170 @@
70
70
 
71
71
  ```
72
72
 
73
+
74
+
75
+ ###
76
+
77
+ いろいろ試しても原因がわかりません。
78
+
79
+ アドバイスの程よろしくお願いいたします。
80
+
73
- ###エラーメッセージ
81
+ ###追記
82
+
83
+ GoogleMap APIの公式サイトの通りに別ファイルで以下のコードとAPIキーを記述した場合ですと正常にマップが表示されました。
84
+
85
+ しかし、対象のファイルに移動すると表示されなくなってしまいます。
86
+
87
+ ```
88
+
89
+ <!DOCTYPE html>
90
+
91
+ <html>
92
+
93
+ <head>
94
+
95
+ <style>
96
+
97
+ #map {
98
+
99
+ height: 400px;
100
+
101
+ width: 100%;
102
+
103
+ }
104
+
105
+ </style>
106
+
107
+ </head>
108
+
109
+ <body>
110
+
111
+ <h3>My Google Maps Demo</h3>
112
+
113
+ <div id="map"></div>
114
+
115
+ <script>
116
+
117
+ function initMap() {
118
+
119
+ var uluru = {lat: -25.363, lng: 131.044};
120
+
121
+ var map = new google.maps.Map(document.getElementById('map'), {
122
+
123
+ zoom: 18,
124
+
125
+ center: uluru
126
+
127
+ });
128
+
129
+ var marker = new google.maps.Marker({
130
+
131
+ position: uluru,
132
+
133
+ map: map
134
+
135
+ });
136
+
137
+ }
138
+
139
+ </script>
140
+
141
+ <script async defer
142
+
143
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】$callback=initMap">
144
+
145
+ </script>
146
+
147
+ </body>
148
+
149
+ </html>
150
+
151
+ ```
152
+
153
+ また、上記ファイルを以下の3つに分けて外部ファイルの読み込み形式で記述すると、表示されなくなります。
154
+
155
+ __index.html__
156
+
157
+ ```
158
+
159
+ <DOCTYPE html>
160
+
161
+ <html lang="ja">
162
+
163
+ <head>
164
+
165
+ <meta charset="utf-8">
166
+
167
+ <link rel="stylesheet" href="styles.css">
168
+
169
+ <script async defer
170
+
171
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
172
+
173
+ </head>
174
+
175
+ <body>
176
+
177
+ <div id="map-canvas"></div>
178
+
179
+ <script src="main.js"></script>
180
+
181
+ </body>
182
+
183
+ </html>
184
+
185
+ ```
186
+
187
+ __styles.css__
188
+
189
+ ```
190
+
191
+ #map-canvas {
192
+
193
+ width:100%;
194
+
195
+ height:400px;
196
+
197
+ }
198
+
199
+ ```
200
+
201
+ __main.js__
202
+
203
+ ```
204
+
205
+ function initMap() {
206
+
207
+ var uluru = {lat: 35.941507, lng: 140.138121};
208
+
209
+ var map = new google.maps.Map(document.getElementById("map-canvas"), {
210
+
211
+ zoom: 18,
212
+
213
+ center: uluru
214
+
215
+ });
216
+
217
+ var marker = new google.maps.Marker({
218
+
219
+ position: uluru,
220
+
221
+ map: map
222
+
223
+ });
224
+
225
+ }
226
+
227
+ ```
228
+
229
+
230
+
231
+ このように外部ファイル形式にした途端、マップが表示されなくなりました。
232
+
233
+ また以下のエラーメッセージが表示されるようになりました。
74
234
 
75
235
  https://i.gyazo.com/a5f089cd03650411482d079bfb69ca29.png
76
236
 
77
- ###
78
-
79
- いろいろ試しても原因がわかりません。
80
-
81
- アドバイスの程よろしくお願いいたします。
82
-
83
- ###追記
84
-
85
- GoogleMap APIの公式サイトの通りに別ファイルで以下のコードとAPIキーを記述した場合ですと正常にマップが表示されました。
86
-
87
- しかし、対象のファイルに移動すると表示されなくなってしまいます。
88
-
89
- ```
90
-
91
- <!DOCTYPE html>
92
-
93
- <html>
94
-
95
- <head>
96
-
97
- <style>
98
-
99
- #map {
100
-
101
- height: 400px;
102
-
103
- width: 100%;
104
-
105
- }
106
-
107
- </style>
108
-
109
- </head>
110
-
111
- <body>
112
-
113
- <h3>My Google Maps Demo</h3>
114
-
115
- <div id="map"></div>
116
-
117
- <script>
118
-
119
- function initMap() {
120
-
121
- var uluru = {lat: -25.363, lng: 131.044};
122
-
123
- var map = new google.maps.Map(document.getElementById('map'), {
124
-
125
- zoom: 18,
126
-
127
- center: uluru
128
-
129
- });
130
-
131
- var marker = new google.maps.Marker({
132
-
133
- position: uluru,
134
-
135
- map: map
136
-
137
- });
138
-
139
- }
140
-
141
- </script>
142
-
143
- <script async defer
144
-
145
- src="https://maps.googleapis.com/maps/api/js?key=【APIキー】$callback=initMap">
146
-
147
- </script>
148
-
149
- </body>
150
-
151
- </html>
152
-
153
- ```
154
-
155
- また、上記ファイルを以下の3つに分けて外部ファイルの読み込み形式で記述すると、表示されなくなります。
156
-
157
- __index.html__
158
-
159
- ```
160
-
161
- <DOCTYPE html>
162
-
163
- <html lang="ja">
164
-
165
- <head>
166
-
167
- <meta charset="utf-8">
168
-
169
- <link rel="stylesheet" href="styles.css">
170
-
171
- <script async defer
172
-
173
- src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
174
-
175
- </head>
176
-
177
- <body>
178
-
179
- <div id="map-canvas"></div>
180
-
181
- <script src="main.js"></script>
182
-
183
- </body>
184
-
185
- </html>
186
-
187
- ```
188
-
189
- __styles.css__
190
-
191
- ```
192
-
193
- #map-canvas {
194
-
195
- width:100%;
196
-
197
- height:400px;
198
-
199
- }
200
-
201
- ```
202
-
203
- __main.js__
204
-
205
- ```
206
-
207
- function initMap() {
208
-
209
- var uluru = {lat: 35.941507, lng: 140.138121};
210
-
211
- var map = new google.maps.Map(document.getElementById("map-canvas"), {
212
-
213
- zoom: 18,
214
-
215
- center: uluru
216
-
217
- });
218
-
219
- var marker = new google.maps.Marker({
220
-
221
- position: uluru,
222
-
223
- map: map
224
-
225
- });
226
-
227
- }
228
-
229
- ```
230
-
231
-
232
-
233
- このように外部ファイル形式にした途端、マップが表示されなくなりました。
234
-
235
237
  どこに間違いがあるのでしょうか。もう、お手上げです。
236
238
 
237
239
 

7

編集

2017/11/29 06:08

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  ###エラーメッセージ
74
74
 
75
- なし
75
+ https://i.gyazo.com/a5f089cd03650411482d079bfb69ca29.png
76
76
 
77
77
  ###
78
78
 
@@ -234,6 +234,8 @@
234
234
 
235
235
  どこに間違いがあるのでしょうか。もう、お手上げです。
236
236
 
237
+
238
+
237
239
  問題解決できる方いらっしゃいましたら、どうか教えていただけないでしょうか。
238
240
 
239
241
  以上、ご確認お願いいたします。

6

追記

2017/11/29 06:06

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -152,7 +152,87 @@
152
152
 
153
153
  ```
154
154
 
155
+ また、上記ファイルを以下の3つに分けて外部ファイルの読み込み形式で記述すると、表示されなくなります。
156
+
157
+ __index.html__
158
+
159
+ ```
160
+
161
+ <DOCTYPE html>
162
+
163
+ <html lang="ja">
164
+
155
- 全く意味が分かりません。
165
+ <head>
166
+
167
+ <meta charset="utf-8">
168
+
169
+ <link rel="stylesheet" href="styles.css">
170
+
171
+ <script async defer
172
+
173
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
174
+
175
+ </head>
176
+
177
+ <body>
178
+
179
+ <div id="map-canvas"></div>
180
+
181
+ <script src="main.js"></script>
182
+
183
+ </body>
184
+
185
+ </html>
186
+
187
+ ```
188
+
189
+ __styles.css__
190
+
191
+ ```
192
+
193
+ #map-canvas {
194
+
195
+ width:100%;
196
+
197
+ height:400px;
198
+
199
+ }
200
+
201
+ ```
202
+
203
+ __main.js__
204
+
205
+ ```
206
+
207
+ function initMap() {
208
+
209
+ var uluru = {lat: 35.941507, lng: 140.138121};
210
+
211
+ var map = new google.maps.Map(document.getElementById("map-canvas"), {
212
+
213
+ zoom: 18,
214
+
215
+ center: uluru
216
+
217
+ });
218
+
219
+ var marker = new google.maps.Marker({
220
+
221
+ position: uluru,
222
+
223
+ map: map
224
+
225
+ });
226
+
227
+ }
228
+
229
+ ```
230
+
231
+
232
+
233
+ このように外部ファイル形式にした途端、マップが表示されなくなりました。
234
+
235
+ どこに間違いがあるのでしょうか。もう、お手上げです。
156
236
 
157
237
  問題解決できる方いらっしゃいましたら、どうか教えていただけないでしょうか。
158
238
 

5

編集

2017/11/29 05:42

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,7 @@
153
153
  ```
154
154
 
155
155
  全く意味が分かりません。
156
+
157
+ 問題解決できる方いらっしゃいましたら、どうか教えていただけないでしょうか。
158
+
159
+ 以上、ご確認お願いいたします。

4

編集

2017/11/29 05:03

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,9 @@
82
82
 
83
83
  ###追記
84
84
 
85
- GoogleMap APIの公式サイトの通りに記述しAPIキーを記述しても何も表示されません。
85
+ GoogleMap APIの公式サイトの通りに別ファイルで以下のコードとAPIキーを記述した場合ですと正常にマップが表示されました。
86
+
87
+ しかし、対象のファイルに移動すると表示されなくなってしまいます。
86
88
 
87
89
  ```
88
90
 

3

修正

2017/11/29 05:01

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
  <script async defer
142
142
 
143
- src="https://maps.googleapis.com/maps/api/js?key=【APIキー】=initMap">
143
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】$callback=initMap">
144
144
 
145
145
  </script>
146
146
 

2

編集

2017/11/29 04:55

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -79,3 +79,75 @@
79
79
  いろいろ試しても原因がわかりません。
80
80
 
81
81
  アドバイスの程よろしくお願いいたします。
82
+
83
+ ###追記
84
+
85
+ GoogleMap APIの公式サイトの通りに記述しAPIキーを記述しても何も表示されません。
86
+
87
+ ```
88
+
89
+ <!DOCTYPE html>
90
+
91
+ <html>
92
+
93
+ <head>
94
+
95
+ <style>
96
+
97
+ #map {
98
+
99
+ height: 400px;
100
+
101
+ width: 100%;
102
+
103
+ }
104
+
105
+ </style>
106
+
107
+ </head>
108
+
109
+ <body>
110
+
111
+ <h3>My Google Maps Demo</h3>
112
+
113
+ <div id="map"></div>
114
+
115
+ <script>
116
+
117
+ function initMap() {
118
+
119
+ var uluru = {lat: -25.363, lng: 131.044};
120
+
121
+ var map = new google.maps.Map(document.getElementById('map'), {
122
+
123
+ zoom: 18,
124
+
125
+ center: uluru
126
+
127
+ });
128
+
129
+ var marker = new google.maps.Marker({
130
+
131
+ position: uluru,
132
+
133
+ map: map
134
+
135
+ });
136
+
137
+ }
138
+
139
+ </script>
140
+
141
+ <script async defer
142
+
143
+ src="https://maps.googleapis.com/maps/api/js?key=【APIキー】=initMap">
144
+
145
+ </script>
146
+
147
+ </body>
148
+
149
+ </html>
150
+
151
+ ```
152
+
153
+ 全く意味が分かりません。

1

編集

2017/11/29 04:42

投稿

narururu
narururu

スコア170

test CHANGED
File without changes
test CHANGED
@@ -70,9 +70,9 @@
70
70
 
71
71
  ```
72
72
 
73
- ###エラーコード
73
+ ###エラーメッセージ
74
74
 
75
- GET file://maps.google.com/maps/api/js?key=【APIキー】_copy　net::ERR_FILE_NOT_FOUND
75
+ なし
76
76
 
77
77
  ###
78
78