teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Google MAPS APIのDirections APIをサーバー側からrequestを投げてresponseを受け取った後に、既存の地図にresponseの内容を反映させる方法について

編集履歴

質問編集履歴

6

PHPの追加コード、javascriptのrendererOptionsを追加

2018/12/11 01:21

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -64,6 +64,32 @@
64
64
 
65
65
  //ここまで
66
66
 
67
+ //さらに追加
68
+
69
+ $replace_array = array(
70
+
71
+ "bounds" => array(
72
+
73
+ "north" => 北端,
74
+
75
+ "east" => 東端,
76
+
77
+ "south" => 南端,
78
+
79
+ "west" => 西橋,
80
+
81
+ ),
82
+
83
+ );
84
+
85
+
86
+
87
+ //元の配列のboundsと入れ替え
88
+
89
+ $route_data["routes"]["0"] = array_replace($route_data["routes"]["0"],$replace_array);
90
+
91
+ //ここまで
92
+
67
93
 
68
94
 
69
95
  $route[] = array(
@@ -118,13 +144,27 @@
118
144
 
119
145
  var rendererOptions = {
120
146
 
121
- map: map, // 描画先の地図
147
+ map: map, // 描画先の地図
122
-
148
+
123
- draggable: true, // ドラッグ可
149
+ draggable: false, // ドラッグ不可
150
+
124
-
151
+ //preserveViewport: true // centerの座標、ズームレベルで表示
152
+
125
- suppressMarkers: true // デフォルトのマーカーを削除
153
+ suppressMarkers: true, // デフォルトのマーカーを削除
154
+
126
-
155
+ preserveViewport: true, // true を指定するとビューの移動（ルート全体を表示する）を行いません。
156
+
157
+ polylineOptions: {
158
+
159
+ strokeColor: '#ff0000',
160
+
161
+ strokeOpacity: 0.8,
162
+
163
+ strokeWeight: 10
164
+
165
+ }
166
+
127
- };
167
+ };
128
168
 
129
169
  directionsDisplay = new google.maps.DirectionsRenderer( rendererOptions );
130
170
 

5

PHPのコードを一部追記、エラー内容②を追記

2018/12/11 01:21

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,40 @@
32
32
 
33
33
 
34
34
 
35
+ //ここから追加
36
+
37
+ $request_data = array(
38
+
39
+ "request" => array(
40
+
41
+ "origin" => array(
42
+
43
+ "lat" => explode(",",$data["start"])[0],
44
+
45
+ "lng" => explode(",",$data["start"])[1],
46
+
47
+ ),
48
+
49
+ "destination" => array(
50
+
51
+ "lat" => explode(",",$data["end"])[0],
52
+
53
+ "lng" => explode(",",$data["end"])[1],
54
+
55
+ ),
56
+
57
+ "travelMode" => "DRIVING",
58
+
59
+ )
60
+
61
+ );
62
+
63
+ $route_data = array_merge($route_data, $request_data);
64
+
65
+ //ここまで
66
+
67
+
68
+
35
69
  $route[] = array(
36
70
 
37
71
  "start" => explode(",",$data["start"]),
@@ -108,7 +142,7 @@
108
142
 
109
143
 
110
144
 
111
- ###エラー内容
145
+ ###エラー内容①
112
146
 
113
147
  ```javascript
114
148
 
@@ -136,6 +170,24 @@
136
170
 
137
171
 
138
172
 
173
+ ###エラー内容②
174
+
175
+ ```エラー
176
+
177
+ Uncaught Jc {message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.google.com/maps/…taUser=quotaUser:205:5489)"}message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast"name: "InvalidValueError"stack: "Error↵ at new Jc
178
+
179
+
180
+
181
+ message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast"
182
+
183
+ name: "InvalidValueError"
184
+
185
+ stack: "Error↵
186
+
187
+ ```
188
+
189
+
190
+
139
191
  ###Directions APIから得たresponse(PHP内の$route["route_data"])
140
192
 
141
193
  ```javascript

4

PHPのコードを修正

2018/12/10 10:19

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
 
34
34
 
35
- $route = array(
35
+ $route[] = array(
36
36
 
37
37
  "start" => explode(",",$data["start"]),
38
38
 

3

タイトルに追記

2018/12/10 07:54

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
 
138
138
 
139
- ###Directions APIから得たresponse
139
+ ###Directions APIから得たresponse(PHP内の$route["route_data"])
140
140
 
141
141
  ```javascript
142
142
 

2

タイトル修正

2018/12/10 07:26

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
 
138
138
 
139
- ###Directions APIから得たresult
139
+ ###Directions APIから得たresponse
140
140
 
141
141
  ```javascript
142
142
 

1

resultの内容を追記

2018/12/10 06:42

投稿

k.t.est
k.t.est

スコア49

test CHANGED
File without changes
test CHANGED
@@ -136,6 +136,200 @@
136
136
 
137
137
 
138
138
 
139
+ ###Directions APIから得たresult
140
+
141
+ ```javascript
142
+
143
+ //JSON
144
+
145
+ [{
146
+
147
+ "start":["35.705825","139.845428"],
148
+
149
+ "end":["35.704571","139.846222"],
150
+
151
+ "route_data":{
152
+
153
+ "geocoded_waypoints":[
154
+
155
+ {
156
+
157
+ "geocoder_status":"OK",
158
+
159
+ "place_id":"ChIJe1mQ26SIGGAR0elQ7U7lOEk",
160
+
161
+ "types":[
162
+
163
+ "bus_station",
164
+
165
+ "establishment",
166
+
167
+ "point_of_interest",
168
+
169
+ "transit_station"]
170
+
171
+ },
172
+
173
+ {
174
+
175
+ "geocoder_status":"OK",
176
+
177
+ "place_id":"ChIJWf8dg6SIGGARBHv-iXil1Eo",
178
+
179
+ "types":["premise"]
180
+
181
+ }
182
+
183
+ ],
184
+
185
+ "routes":[{
186
+
187
+ "bounds":{
188
+
189
+ "northeast":{
190
+
191
+ "lat":35.70582900000000137197275762446224689483642578125,
192
+
193
+ "lng":139.846198100000009389987098984420299530029296875
194
+
195
+ },
196
+
197
+ "southwest":{
198
+
199
+ "lat":35.7045624000000003661625669337809085845947265625,
200
+
201
+ "lng":139.845427900000004228786565363407135009765625
202
+
203
+ }
204
+
205
+ },
206
+
207
+ "copyrights":"Map data \u00a92018 Google, ZENRIN",
208
+
209
+ "legs":[
210
+
211
+ {
212
+
213
+ "distance":{"text":"0.2 km","value":159},
214
+
215
+ "duration":{"text":"1 min","value":38},
216
+
217
+ "end_address":"Japan, \u3012132-0035 T\u014dky\u014d-to, Edogawa-ku, Hirai, 4 Chome\u22124, \u30b8\u30e7\u30a4\u30d7\u30e9\u30b6\u5e73\u4e95",
218
+
219
+ "end_location":{
220
+
221
+ "lat":35.7045624000000003661625669337809085845947265625,
222
+
223
+ "lng":139.846198100000009389987098984420299530029296875},
224
+
225
+ "start_address":"Hirai 4 Chome, 4 Chome-9 Hirai, Edogawa-ku, T\u014dky\u014d-to 132-0035, Japan",
226
+
227
+ "start_location":{
228
+
229
+ "lat":35.70582619999999707260940340347588062286376953125,
230
+
231
+ "lng":139.845427900000004228786565363407135009765625},
232
+
233
+ "steps":[
234
+
235
+ {
236
+
237
+ "distance":{"text":"4 m","value":4},
238
+
239
+ "duration":{"text":"1 min","value":1},
240
+
241
+ "end_location":{
242
+
243
+ "lat":35.70582900000000137197275762446224689483642578125,
244
+
245
+ "lng":139.845475499999992052835295908153057098388671875
246
+
247
+ },
248
+
249
+ "html_instructions":"Head <b>east</b> toward <b>\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a</b>/<b>\u90fd\u9053449\u53f7\u7dda</b>",
250
+
251
+ "polyline":{"points":"mx|xE}pptY?I"},
252
+
253
+ "start_location":{
254
+
255
+ "lat":35.70582619999999707260940340347588062286376953125,
256
+
257
+ "lng":139.845427900000004228786565363407135009765625
258
+
259
+ },
260
+
261
+ "travel_mode":"DRIVING"
262
+
263
+ },
264
+
265
+ {
266
+
267
+ "distance":{"text":"0.2 km","value":155},
268
+
269
+ "duration":{"text":"1 min","value":37},
270
+
271
+ "end_location":{
272
+
273
+ "lat":35.7045624000000003661625669337809085845947265625,
274
+
275
+ "lng":139.846198100000009389987098984420299530029296875
276
+
277
+ },
278
+
279
+ "html_instructions":"Turn <b>right</b> onto <b>\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a</b>/<b>\u90fd\u9053449\u53f7\u7dda</b><div style=\"font-size:0.9em\">Destination will be on the left</div>",
280
+
281
+ "maneuver":"turn-right",
282
+
283
+ "polyline":{
284
+
285
+ "points":"mx|xEgqptYJCn@_@PG|@c@tAo@ZO"
286
+
287
+ },
288
+
289
+ "start_location":{
290
+
291
+ "lat":35.70582900000000137197275762446224689483642578125,
292
+
293
+ "lng":139.845475499999992052835295908153057098388671875
294
+
295
+ },
296
+
297
+ "travel_mode":"DRIVING"
298
+
299
+ }
300
+
301
+ ],
302
+
303
+ "traffic_speed_entry":[],
304
+
305
+ "via_waypoint":[]
306
+
307
+ }],
308
+
309
+ "overview_polyline":{
310
+
311
+ "points":"mx|xE}pptY?IJC`Ag@nDcB"
312
+
313
+ },
314
+
315
+ "summary":"\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a/\u90fd\u9053449\u53f7\u7dda",
316
+
317
+ "warnings":[],
318
+
319
+ "waypoint_order":[]
320
+
321
+ }],
322
+
323
+ "status":"OK"
324
+
325
+ }
326
+
327
+ }]
328
+
329
+ ```
330
+
331
+
332
+
139
333
  ###試したこと
140
334
 
141
335
  PHPからDirections APIに問い合わせる方法が悪いと思い、modeをwalkingからdriving、また設定しないという方法を試してみましたが、状況は変わらずでした。