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

編集履歴

質問編集履歴

6

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

2018/12/11 01:21

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -31,7 +31,20 @@
31
31
  );
32
32
  $route_data = array_merge($route_data, $request_data);
33
33
  //ここまで
34
+ //さらに追加
35
+ $replace_array = array(
36
+ "bounds" => array(
37
+ "north" => 北端,
38
+ "east" => 東端,
39
+ "south" => 南端,
40
+ "west" => 西橋,
41
+ ),
42
+ );
34
43
 
44
+ //元の配列のboundsと入れ替え
45
+ $route_data["routes"]["0"] = array_replace($route_data["routes"]["0"],$replace_array);
46
+ //ここまで
47
+
35
48
  $route[] = array(
36
49
  "start" => explode(",",$data["start"]),
37
50
  "end" => explode(",",$data["end"]),
@@ -58,10 +71,17 @@
58
71
 
59
72
  //地図に書き入れる
60
73
  var rendererOptions = {
61
- map: map, // 描画先の地図
74
+ map: map, // 描画先の地図
62
- draggable: true, // ドラッグ可
75
+ draggable: false, // ドラッグ不可
76
+ //preserveViewport: true // centerの座標、ズームレベルで表示
63
- suppressMarkers: true // デフォルトのマーカーを削除
77
+ suppressMarkers: true, // デフォルトのマーカーを削除
78
+ preserveViewport: true, // true を指定するとビューの移動（ルート全体を表示する）を行いません。
79
+ polylineOptions: {
80
+ strokeColor: '#ff0000',
81
+ strokeOpacity: 0.8,
82
+ strokeWeight: 10
83
+ }
64
- };
84
+ };
65
85
  directionsDisplay = new google.maps.DirectionsRenderer( rendererOptions );
66
86
  directionsDisplay.setDirections( response );
67
87
  directionsDisplay.setMap(map);

5

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

2018/12/11 01:21

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -15,6 +15,23 @@
15
15
  $res = curl_exec($ch);
16
16
  $route_data = json_decode($res,true );
17
17
 
18
+ //ここから追加
19
+ $request_data = array(
20
+ "request" => array(
21
+ "origin" => array(
22
+ "lat" => explode(",",$data["start"])[0],
23
+ "lng" => explode(",",$data["start"])[1],
24
+ ),
25
+ "destination" => array(
26
+ "lat" => explode(",",$data["end"])[0],
27
+ "lng" => explode(",",$data["end"])[1],
28
+ ),
29
+ "travelMode" => "DRIVING",
30
+ )
31
+ );
32
+ $route_data = array_merge($route_data, $request_data);
33
+ //ここまで
34
+
18
35
  $route[] = array(
19
36
  "start" => explode(",",$data["start"]),
20
37
  "end" => explode(",",$data["end"]),
@@ -53,7 +70,7 @@
53
70
  ```
54
71
 
55
72
 
56
- ###エラー内容
73
+ ###エラー内容①
57
74
  ```javascript
58
75
  //エラー内容
59
76
  Uncaught (in promise) TypeError: Cannot read property 'travelMode' of undefined
@@ -67,6 +84,15 @@
67
84
  at js?key=key&libraries=geometry&quotaUser=quotaUser:205
68
85
  ```
69
86
 
87
+ ###エラー内容②
88
+ ```エラー
89
+ 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
90
+
91
+ message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast"
92
+ name: "InvalidValueError"
93
+ stack: "Error↵
94
+ ```
95
+
70
96
  ###Directions APIから得たresponse(PHP内の$route["route_data"])
71
97
  ```javascript
72
98
  //JSON

4

PHPのコードを修正

2018/12/10 10:19

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -15,7 +15,7 @@
15
15
  $res = curl_exec($ch);
16
16
  $route_data = json_decode($res,true );
17
17
 
18
- $route = array(
18
+ $route[] = array(
19
19
  "start" => explode(",",$data["start"]),
20
20
  "end" => explode(",",$data["end"]),
21
21
  "route_data" => $route_data,

3

タイトルに追記

2018/12/10 07:54

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -67,7 +67,7 @@
67
67
  at js?key=key&libraries=geometry&quotaUser=quotaUser:205
68
68
  ```
69
69
 
70
- ###Directions APIから得たresponse
70
+ ###Directions APIから得たresponse(PHP内の$route["route_data"])
71
71
  ```javascript
72
72
  //JSON
73
73
  [{

2

タイトル修正

2018/12/10 07:26

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -67,7 +67,7 @@
67
67
  at js?key=key&libraries=geometry&quotaUser=quotaUser:205
68
68
  ```
69
69
 
70
- ###Directions APIから得たresult
70
+ ###Directions APIから得たresponse
71
71
  ```javascript
72
72
  //JSON
73
73
  [{

1

resultの内容を追記

2018/12/10 06:42

投稿

k.t.est
k.t.est

スコア49

title CHANGED
File without changes
body CHANGED
@@ -67,6 +67,103 @@
67
67
  at js?key=key&libraries=geometry&quotaUser=quotaUser:205
68
68
  ```
69
69
 
70
+ ###Directions APIから得たresult
71
+ ```javascript
72
+ //JSON
73
+ [{
74
+ "start":["35.705825","139.845428"],
75
+ "end":["35.704571","139.846222"],
76
+ "route_data":{
77
+ "geocoded_waypoints":[
78
+ {
79
+ "geocoder_status":"OK",
80
+ "place_id":"ChIJe1mQ26SIGGAR0elQ7U7lOEk",
81
+ "types":[
82
+ "bus_station",
83
+ "establishment",
84
+ "point_of_interest",
85
+ "transit_station"]
86
+ },
87
+ {
88
+ "geocoder_status":"OK",
89
+ "place_id":"ChIJWf8dg6SIGGARBHv-iXil1Eo",
90
+ "types":["premise"]
91
+ }
92
+ ],
93
+ "routes":[{
94
+ "bounds":{
95
+ "northeast":{
96
+ "lat":35.70582900000000137197275762446224689483642578125,
97
+ "lng":139.846198100000009389987098984420299530029296875
98
+ },
99
+ "southwest":{
100
+ "lat":35.7045624000000003661625669337809085845947265625,
101
+ "lng":139.845427900000004228786565363407135009765625
102
+ }
103
+ },
104
+ "copyrights":"Map data \u00a92018 Google, ZENRIN",
105
+ "legs":[
106
+ {
107
+ "distance":{"text":"0.2 km","value":159},
108
+ "duration":{"text":"1 min","value":38},
109
+ "end_address":"Japan, \u3012132-0035 T\u014dky\u014d-to, Edogawa-ku, Hirai, 4 Chome\u22124, \u30b8\u30e7\u30a4\u30d7\u30e9\u30b6\u5e73\u4e95",
110
+ "end_location":{
111
+ "lat":35.7045624000000003661625669337809085845947265625,
112
+ "lng":139.846198100000009389987098984420299530029296875},
113
+ "start_address":"Hirai 4 Chome, 4 Chome-9 Hirai, Edogawa-ku, T\u014dky\u014d-to 132-0035, Japan",
114
+ "start_location":{
115
+ "lat":35.70582619999999707260940340347588062286376953125,
116
+ "lng":139.845427900000004228786565363407135009765625},
117
+ "steps":[
118
+ {
119
+ "distance":{"text":"4 m","value":4},
120
+ "duration":{"text":"1 min","value":1},
121
+ "end_location":{
122
+ "lat":35.70582900000000137197275762446224689483642578125,
123
+ "lng":139.845475499999992052835295908153057098388671875
124
+ },
125
+ "html_instructions":"Head <b>east</b> toward <b>\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a</b>/<b>\u90fd\u9053449\u53f7\u7dda</b>",
126
+ "polyline":{"points":"mx|xE}pptY?I"},
127
+ "start_location":{
128
+ "lat":35.70582619999999707260940340347588062286376953125,
129
+ "lng":139.845427900000004228786565363407135009765625
130
+ },
131
+ "travel_mode":"DRIVING"
132
+ },
133
+ {
134
+ "distance":{"text":"0.2 km","value":155},
135
+ "duration":{"text":"1 min","value":37},
136
+ "end_location":{
137
+ "lat":35.7045624000000003661625669337809085845947265625,
138
+ "lng":139.846198100000009389987098984420299530029296875
139
+ },
140
+ "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>",
141
+ "maneuver":"turn-right",
142
+ "polyline":{
143
+ "points":"mx|xEgqptYJCn@_@PG|@c@tAo@ZO"
144
+ },
145
+ "start_location":{
146
+ "lat":35.70582900000000137197275762446224689483642578125,
147
+ "lng":139.845475499999992052835295908153057098388671875
148
+ },
149
+ "travel_mode":"DRIVING"
150
+ }
151
+ ],
152
+ "traffic_speed_entry":[],
153
+ "via_waypoint":[]
154
+ }],
155
+ "overview_polyline":{
156
+ "points":"mx|xE}pptY?IJC`Ag@nDcB"
157
+ },
158
+ "summary":"\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a/\u90fd\u9053449\u53f7\u7dda",
159
+ "warnings":[],
160
+ "waypoint_order":[]
161
+ }],
162
+ "status":"OK"
163
+ }
164
+ }]
165
+ ```
166
+
70
167
  ###試したこと
71
168
  PHPからDirections APIに問い合わせる方法が悪いと思い、modeをwalkingからdriving、また設定しないという方法を試してみましたが、状況は変わらずでした。
72
169