我从我的服务器获得JSON响应，该响应具有方向API响应，但附加了附加信息。 我尝试在反应的步骤对象中使用lat long的开始和结束位置，使用折线，但折线最终添加了与道路不重合的直线。有什么办法我可以在谷歌地图上绘制路线我的回复。任何示例或演示将不胜感激。
以下是我从服务器获取的JSON文本。
{
"geocoded_waypoints": [{
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJ9T_5iuTKj4ARe3GfygqMnbk",
"types": ["locality", "political"]
}, {
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJk8EIXIG3j4ARwL_Ao3ykdeQ",
"types": ["locality", "political"]
}],
"routes": [{
"bounds": {
"northeast": {
"lat": 37.3585307,
"lng": -121.8863279
},
"southwest": {
"lat": 37.3371729,
"lng": -121.9553899
}
},
"copyrights": "Map data ©2015 Google",
"legs": [{
"distance": {
"text": "5.0 mi",
"value": 8019
},
"duration": {
"text": "14 mins",
"value": 821
},
"end_address": "Santa Clara, CA, USA",
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"start_address": "San Jose, CA, USA",
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"steps": [{
"distance": {
"text": "0.1 mi",
"value": 224
},
"duration": {
"text": "1 min",
"value": 43
},
"end_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"html_instructions": "Head \u003cb\u003esouthwest\u003c/b\u003e on \u003cb\u003eE Santa Clara St\u003c/b\u003e toward \u003cb\u003eS 4th St\u003c/b\u003e",
"polyline": {
"points": "yr{bFp||fVXr@BFBHfAtCt@nBn@dB"
},
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 565
},
"duration": {
"text": "1 min",
"value": 82
},
"end_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 2nd cross street onto \u003cb\u003eN 3rd St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "il{bFbj}fVoAx@c@VuDhCwAbAiEnCqAx@uAz@yB`B"
},
"start_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 352
},
"duration": {
"text": "2 mins",
"value": 91
},
"end_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e at the 3rd cross street onto \u003cb\u003eE Julian St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "wg|bFj~}fVx@vBFN^dA|@|Bb@hABJBB@FdBvEPd@"
},
"start_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 564
},
"duration": {
"text": "1 min",
"value": 45
},
"end_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "q}{bFvs~fVLZaA`AiAjAOPKLMPMR{@`Be@z@iC`FKXGLELENEPCNENALCNAR?FAJ?T?Z@V@NBRDVDXBJBLBHBHBJ"
},
"start_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.8 mi",
"value": 1241
},
"duration": {
"text": "2 mins",
"value": 100
},
"end_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 1st cross street onto \u003cb\u003eGuadalupe Pkwy\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "ek|bF~s_gVgClAcJjEi@X]Pm@\\_An@cAx@e@d@o@p@oAtA_ApAq@dA]l@w@zAk@lA]x@Qd@_@|@Q`@Yv@KXEJGRMXMRIRQV_@f@OTOPSVSTWVQPQPWPc@^YVQJC@_@Va@V"
},
"start_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 692
},
"duration": {
"text": "1 min",
"value": 67
},
"end_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eW Hedding St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "e`~bFxiagVMLTb@?@P\\@@NXVRl@~@p@bA@Br@fAJNJLLTp@bALT`@n@n@dAFJz@tAr@fAh@|@hBvCT\\hBxC"
},
"start_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "1.5 mi",
"value": 2437
},
"duration": {
"text": "3 mins",
"value": 201
},
"end_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "gg}bFfnbgVDR@H@H@H?F?FAF?DAFADAFIRg@b@aBdBUVgA~AcB`C}@lAY^U\\W\\OTSVA@Y`@eCjDaArAmAbB_@p@IPs@hBaA`CCDe@jAg@jAKXUh@MZSf@k@dBm@dBCDAFIh@m@xAw@pBu@hB}@dCUl@]ZAB[x@_BzDgBnE_AfCiApCIl@Uj@c@fASf@[v@IVGREPGPETEVCTIl@AVC\\AvAAh@A|BGnBC^CRE`@EZCHI^CNGNENYp@e@hASNGFIPo@pA"
},
"start_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.3 mi",
"value": 468
},
"duration": {
"text": "1 min",
"value": 28
},
"end_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"html_instructions": "Take the ramp on the \u003cb\u003eleft\u003c/b\u003e to \u003cb\u003eCalifornia 82\u003c/b\u003e/\u003cb\u003eSanta Clara\u003c/b\u003e",
"polyline": {
"points": "_n_cFv|fgV@L?@?@A@?@ABSf@]bAO^Uv@GPEPENALETAJ?HAR?J?L@R?JBTBNBLBJDNFPHPFLNRJNLLHFLJt@^j@V\\Rf@^ZVPRZ^"
},
"start_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "341 ft",
"value": 104
},
"duration": {
"text": "1 min",
"value": 6
},
"end_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"html_instructions": "Merge onto \u003cb\u003eDe La Cruz Blvd\u003c/b\u003e",
"maneuver": "merge",
"polyline": {
"points": "sf_cFpuggVp@n@n@n@p@n@"
},
"start_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 272
},
"duration": {
"text": "1 min",
"value": 22
},
"end_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"html_instructions": "Take the \u003cb\u003eEl Camino Real\u003c/b\u003e ramp",
"polyline": {
"points": "_b_cF`zggVHTFPDLBJ@H@F@L?J@NATCRCXCNAR?N?P?J?R@P@V@PBVBLBJLd@Tf@Vl@DH@@@@?@@@B@B?HB"
},
"start_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.6 mi",
"value": 904
},
"duration": {
"text": "2 mins",
"value": 109
},
"end_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"html_instructions": "Slight \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eEl Camino Real\u003c/b\u003e",
"maneuver": "turn-slight-right",
"polyline": {
"points": "_~~bFjkhgVP`@FN@DZ|@@D\\pA^tAt@tCt@zC\\pA`@~Al@jC`@vAv@rCrAjFTbAJn@Jr@HbAJpA@rA?bB"
},
"start_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.1 mi",
"value": 196
},
"duration": {
"text": "1 min",
"value": 27
},
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eLincoln St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "yk~bFlfjgVeClA{@b@m@Z[Ja@RQH"
},
"start_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"travel_mode": "DRIVING"
}],
"via_waypoint": []
}],
"overview_polyline": {
"points": "yr{bFp||fVhBzEdBtEsBpAmGlE{GhEuAz@yB`B`AfCdCxG|BhGLZaA`AyA|AY^iAtBoD|GSf@U~@M`AAdALrAP|@FTkNxGgAj@mBlAiB~A_CfCqBvCuAhCiAfCq@bB}@~Bm@tAqAfBqAvAgBzAwA|@MLTb@?@R^NXVR~AbClAhBnB~CzL|RJp@A\\Oh@g@b@aBdB}AvB{DnF}@pAuDfFoCvDi@bA_D|HwAjDqBxFKp@eBjEsBnFUl@]Z]|@gEjKiCxGIl@Uj@w@nBe@nA[lAUrBI|GKnCIt@WtAmAzC[Vy@bB?Rs@pBs@zBO~@Av@HdATz@P^Zb@VTbAj@hAj@bAv@l@r@`B~Ap@n@HTL^Hj@@ZEh@IlA@bAJnAPp@l@tAHNRFv@tBtBbIbDxMxAjFhBnHVbBTtC@vDaEpB}BdA"
},
"summary": "Coleman Ave",
"warnings": [],
"waypoint_order": [],
"info": "XYZ"
}],
"status": "OK"
}
答案 0 :(得分：1)
提供的路线服务响应需要进行以下调整才能通过DirectionsRenderer
DirectionsRenderer.setDirections函数期望
request.travel要指定的属性，例如response.request = {travelMode: "DRIVING"}; google.maps.LatLng对象值（请参阅deserializeLatLng
以下功能如何从一个转换为另一个）google.maps.LatLngBounds对象值step属性必须包含path属性（请参阅下文
关于如何构造deserializeRoute属性的path函数
现有polyline财产）说过以下示例说明如何修复响应以呈现路径：
function deserializeRoute(response){
response['request'] = {travelMode: "DRIVING"};
response.routes.forEach(function (route, i) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(deserializeLatLng(route.bounds.northeast));
bounds.extend(deserializeLatLng(route.bounds.southwest));
route.bounds = bounds;
route.legs.forEach(function (leg, i) {
leg.start_location = deserializeLatLng(leg.start_location);
leg.end_location = deserializeLatLng(leg.end_location);
leg.steps.forEach(function (step, i) {
step.start_location = deserializeLatLng(step.start_location);
step.end_location = deserializeLatLng(step.end_location);
step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
});
});
});
return response;
}
，其中
function deserializeLatLng(value)
{
return new google.maps.LatLng(value.lat,value.lng);
}
实例
以下示例演示如何：
DirectionsService计算路线并进行渲染（出于比较原因）
var savedResponse = {
"geocoded_waypoints": [
{
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJ9T_5iuTKj4ARe3GfygqMnbk",
"types": ["locality", "political"]
}, {
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJk8EIXIG3j4ARwL_Ao3ykdeQ",
"types": ["locality", "political"]
}
],
"routes": [
{
"bounds": {
"northeast": {
"lat": 37.3585307,
"lng": -121.8863279
},
"southwest": {
"lat": 37.3371729,
"lng": -121.9553899
}
},
"copyrights": "Map data ©2015 Google",
"legs": [
{
"distance": {
"text": "5.0 mi",
"value": 8019
},
"duration": {
"text": "14 mins",
"value": 821
},
"end_address": "Santa Clara, CA, USA",
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"start_address": "San Jose, CA, USA",
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"steps": [
{
"distance": {
"text": "0.1 mi",
"value": 224
},
"duration": {
"text": "1 min",
"value": 43
},
"end_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"html_instructions": "Head \u003cb\u003esouthwest\u003c/b\u003e on \u003cb\u003eE Santa Clara St\u003c/b\u003e toward \u003cb\u003eS 4th St\u003c/b\u003e",
"polyline": {
"points": "yr{bFp||fVXr@BFBHfAtCt@nBn@dB"
},
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 565
},
"duration": {
"text": "1 min",
"value": 82
},
"end_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 2nd cross street onto \u003cb\u003eN 3rd St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "il{bFbj}fVoAx@c@VuDhCwAbAiEnCqAx@uAz@yB`B"
},
"start_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 352
},
"duration": {
"text": "2 mins",
"value": 91
},
"end_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e at the 3rd cross street onto \u003cb\u003eE Julian St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "wg|bFj~}fVx@vBFN^dA|@|Bb@hABJBB@FdBvEPd@"
},
"start_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 564
},
"duration": {
"text": "1 min",
"value": 45
},
"end_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "q}{bFvs~fVLZaA`AiAjAOPKLMPMR{@`Be@z@iC`FKXGLELENEPCNENALCNAR?FAJ?T?Z@V@NBRDVDXBJBLBHBHBJ"
},
"start_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.8 mi",
"value": 1241
},
"duration": {
"text": "2 mins",
"value": 100
},
"end_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 1st cross street onto \u003cb\u003eGuadalupe Pkwy\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "ek|bF~s_gVgClAcJjEi@X]Pm@\\_An@cAx@e@d@o@p@oAtA_ApAq@dA]l@w@zAk@lA]x@Qd@_@|@Q`@Yv@KXEJGRMXMRIRQV_@f@OTOPSVSTWVQPQPWPc@^YVQJC@_@Va@V"
},
"start_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 692
},
"duration": {
"text": "1 min",
"value": 67
},
"end_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eW Hedding St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "e`~bFxiagVMLTb@?@P\\@@NXVRl@~@p@bA@Br@fAJNJLLTp@bALT`@n@n@dAFJz@tAr@fAh@|@hBvCT\\hBxC"
},
"start_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "1.5 mi",
"value": 2437
},
"duration": {
"text": "3 mins",
"value": 201
},
"end_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "gg}bFfnbgVDR@H@H@H?F?FAF?DAFADAFIRg@b@aBdBUVgA~AcB`C}@lAY^U\\W\\OTSVA@Y`@eCjDaArAmAbB_@p@IPs@hBaA`CCDe@jAg@jAKXUh@MZSf@k@dBm@dBCDAFIh@m@xAw@pBu@hB}@dCUl@]ZAB[x@_BzDgBnE_AfCiApCIl@Uj@c@fASf@[v@IVGREPGPETEVCTIl@AVC\\AvAAh@A|BGnBC^CRE`@EZCHI^CNGNENYp@e@hASNGFIPo@pA"
},
"start_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.3 mi",
"value": 468
},
"duration": {
"text": "1 min",
"value": 28
},
"end_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"html_instructions": "Take the ramp on the \u003cb\u003eleft\u003c/b\u003e to \u003cb\u003eCalifornia 82\u003c/b\u003e/\u003cb\u003eSanta Clara\u003c/b\u003e",
"polyline": {
"points": "_n_cFv|fgV@L?@?@A@?@ABSf@]bAO^Uv@GPEPENALETAJ?HAR?J?L@R?JBTBNBLBJDNFPHPFLNRJNLLHFLJt@^j@V\\Rf@^ZVPRZ^"
},
"start_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "341 ft",
"value": 104
},
"duration": {
"text": "1 min",
"value": 6
},
"end_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"html_instructions": "Merge onto \u003cb\u003eDe La Cruz Blvd\u003c/b\u003e",
"maneuver": "merge",
"polyline": {
"points": "sf_cFpuggVp@n@n@n@p@n@"
},
"start_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 272
},
"duration": {
"text": "1 min",
"value": 22
},
"end_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"html_instructions": "Take the \u003cb\u003eEl Camino Real\u003c/b\u003e ramp",
"polyline": {
"points": "_b_cF`zggVHTFPDLBJ@H@F@L?J@NATCRCXCNAR?N?P?J?R@P@V@PBVBLBJLd@Tf@Vl@DH@@@@?@@@B@B?HB"
},
"start_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.6 mi",
"value": 904
},
"duration": {
"text": "2 mins",
"value": 109
},
"end_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"html_instructions": "Slight \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eEl Camino Real\u003c/b\u003e",
"maneuver": "turn-slight-right",
"polyline": {
"points": "_~~bFjkhgVP`@FN@DZ|@@D\\pA^tAt@tCt@zC\\pA`@~Al@jC`@vAv@rCrAjFTbAJn@Jr@HbAJpA@rA?bB"
},
"start_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.1 mi",
"value": 196
},
"duration": {
"text": "1 min",
"value": 27
},
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eLincoln St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "yk~bFlfjgVeClA{@b@m@Z[Ja@RQH"
},
"start_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"travel_mode": "DRIVING"
}
],
"via_waypoint": []
}
],
"overview_polyline": {
"points": "yr{bFp||fVhBzEdBtEsBpAmGlE{GhEuAz@yB`B`AfCdCxG|BhGLZaA`AyA|AY^iAtBoD|GSf@U~@M`AAdALrAP|@FTkNxGgAj@mBlAiB~A_CfCqBvCuAhCiAfCq@bB}@~Bm@tAqAfBqAvAgBzAwA|@MLTb@?@R^NXVR~AbClAhBnB~CzL|RJp@A\\Oh@g@b@aBdB}AvB{DnF}@pAuDfFoCvDi@bA_D|HwAjDqBxFKp@eBjEsBnFUl@]Z]|@gEjKiCxGIl@Uj@w@nBe@nA[lAUrBI|GKnCIt@WtAmAzC[Vy@bB?Rs@pBs@zBO~@Av@HdATz@P^Zb@VTbAj@hAj@bAv@l@r@`B~Ap@n@HTL^Hj@@ZEh@IlA@bAJnAPp@l@tAHNRFv@tBtBbIbDxMxAjFhBnHVbBTtC@vDaEpB}BdA"
},
"summary": "Coleman Ave",
"warnings": [],
"waypoint_order": [],
"info": "XYZ"
}
],
"status": "OK"
};
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }
});
directionsDisplay.setMap(map);
document.getElementById('btnCalcRoute').addEventListener('click', function () {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
document.getElementById('btnLoadRoute').addEventListener('click', function () {
directionsDisplay.setDirections(deserializeRoute(savedResponse));
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function deserializeRoute(response){
response['request'] = {travelMode: "DRIVING"};
response.routes.forEach(function (route, i) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(deserializeLatLng(route.bounds.northeast));
bounds.extend(deserializeLatLng(route.bounds.southwest));
route.bounds = bounds;
route.legs.forEach(function (leg, i) {
leg.start_location = deserializeLatLng(leg.start_location);
leg.end_location = deserializeLatLng(leg.end_location);
leg.steps.forEach(function (step, i) {
step.start_location = deserializeLatLng(step.start_location);
step.end_location = deserializeLatLng(step.end_location);
step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
});
});
});
return response;
}
function deserializeLatLng(value)
{
return new google.maps.LatLng(value.lat,value.lng);
}html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
} <div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="Santa Clara, CA, USA">Santa Clara, CA, USA</option>
</select>
<b>End: </b>
<select id="end">
<option value="San Jose, CA, USA">San Jose, CA, USA</option>
</select>
<button id="btnCalcRoute">Show Route</button><br/>
<span>Display route from saved data:</span><button id="btnLoadRoute">Show Route</button>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>