我想通过以下Google Maps方向响应API渲染地图。
我试图实现的目标是尝试通过HTML表单从google place自动完成API中获取2个输入。
这是请求
const url = "https://maps.googleapis.com/maps/api/directions/json?origin="+ from + "&destination=" + to + "&key={key}";
在此请求中,from和to来自自动完成API,作为发布。
以下为以下响应:
{
"status": "OK",
"geocoded_waypoints" : [
{
"geocoder_status" : "OK",
"place_id" : "ChIJ7cv00DwsDogRAMDACa2m4K8",
"types" : [ "locality", "political" ]
},
{
"geocoder_status" : "OK",
"place_id" : "ChIJ69Pk6jdlyIcRDqM1KDY3Fpg",
"types" : [ "locality", "political" ]
},
{
"geocoder_status" : "OK",
"place_id" : "ChIJgdL4flSKrYcRnTpP0XQSojM",
"types" : [ "locality", "political" ]
},
{
"geocoder_status" : "OK",
"place_id" : "ChIJE9on3F3HwoAR9AhGJW_fL-I",
"types" : [ "locality", "political" ]
}
],
"routes": [ {
"summary": "I-40 W",
"legs": [ {
"steps": [ {
"travel_mode": "DRIVING",
"start_location": {
"lat": 41.8507300,
"lng": -87.6512600
},
"end_location": {
"lat": 41.8525800,
"lng": -87.6514100
},
"polyline": {
"points": "a~l~Fjk~uOwHJy@P"
},
"duration": {
"value": 19,
"text": "1 min"
},
"html_instructions": "Head \u003cb\u003enorth\u003c/b\u003e on \u003cb\u003eS
Morgan St\u003c/b\u003e toward \u003cb\u003eW Cermak Rd\u003c/b\u003e",
"distance": {
"value": 207,
"text": "0.1 mi"
}
},
...
... additional steps of this leg
...
... additional legs of this route
"duration": {
"value": 74384,
"text": "20 hours 40 mins"
},
"distance": {
"value": 2137146,
"text": "1,328 mi"
},
"start_location": {
"lat": 35.4675602,
"lng": -97.5164276
},
"end_location": {
"lat": 34.0522342,
"lng": -118.2436849
},
"start_address": "Oklahoma City, OK, USA",
"end_address": "Los Angeles, CA, USA"
} ],
"copyrights": "Map data ©2010 Google, Sanborn",
"overview_polyline": {
"points": "a~l~Fjk~uOnzh@vlbBtc~@tsE`vnApw{A`dw@~w\\|tNtqf@l{Yd_Fblh@rxo@b}@xxSfytA
blk@xxaBeJxlcBb~t@zbh@jc|Bx}C`rv@rw|@rlhA~dVzeo@vrSnc}Axf]fjz@xfFbw~@dz{A~d{A|zOxbrBbdUvpo@`
cFp~xBc`Hk@nurDznmFfwMbwz@bbl@lq~@loPpxq@bw_@v|{CbtY~jGqeMb{iF|n\\~mbDzeVh_Wr|Efc\\x`Ij{kE}mAb
~uF{cNd}xBjp]fulBiwJpgg@|kHntyArpb@bijCk_Kv~eGyqTj_|@`uV`k|DcsNdwxAott@r}q@_gc@nu`CnvHx`k@dse
@j|p@zpiAp|gEicy@`omFvaErfo@igQxnlApqGze~AsyRzrjAb__@ftyB}pIlo_BflmA~yQftNboWzoAlzp@mz`@|}_
@fda@jakEitAn{fB_a]lexClshBtmqAdmY_hLxiZd~XtaBndgC"
},
"warnings": [ ],
"waypoint_order": [ 0, 1 ],
"bounds": {
"southwest": {
"lat": 34.0523600,
"lng": -118.2435600
},
"northeast": {
"lat": 41.8781100,
"lng": -87.6297900
}
}
} ]
}
我的问题是如何在地图上呈现此响应并显示以下起点和终点之间的折线?
您可以使用JavaScript解析该响应,并使用Google Maps Javascript API v3进行显示。
代码段:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var routes = directionsServiceResponse.routes;
console.log("legs " + routes[0].legs.length);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < routes[0].legs.length; i++) {
var leg = routes[0].legs[i];
for (var j = 0; j < leg.steps.length; j++) {
var step = leg.steps[j];
var color = "black";
if (step.travel_mode == "WALKING")
color = "red";
else if (step.travel_mode == "TRANSIT")
color = "green";
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(step.polyline.points),
map: map,
strokeColor: color
});
google.maps.event.addListener(polyline, 'click', function(evt) {
infowindow.setContent("leg " + i + " polyline " + j)
})
for (var ii = 0; ii < polyline.getPath().getLength(); ii++) {
bounds.extend(polyline.getPath().getAt(ii));
}
}
}
map.fitBounds(bounds);
}
var directionsServiceResponse = {
"geocoded_waypoints" : [
{
"geocoder_status" : "OK",
"place_id" : "ChIJ7cv00DwsDogRAMDACa2m4K8",
"types" : [ "locality", "political" ]
},
{
"geocoder_status" : "OK",
"place_id" : "ChIJwZoIOXAIC4gRHrwjSqVKQi4",
"types" : [ "locality", "political" ]
}
],
"routes" : [
{
"bounds" : {
"northeast" : {
"lat" : 41.8783942,
"lng" : -87.6135426
},
"southwest" : {
"lat" : 40.4821436,
"lng" : -89.03096859999999
}
},
"copyrights" : "Map data ©2020",
"legs" : [
{
"distance" : {
"text" : "139 mi",
"value" : 223820
},
"duration" : {
"text" : "2 hours 16 mins",
"value" : 8131
},
"end_address" : "Bloomington, IL, USA",
"end_location" : {
"lat" : 40.4841869,
"lng" : -88.99372939999999
},
"start_address" : "Chicago, IL, USA",
"start_location" : {
"lat" : 41.8781139,
"lng" : -87.6297872
},
"steps" : [
{
"distance" : {
"text" : "13 ft",
"value" : 4
},
"duration" : {
"text" : "1 min",
"value" : 1
},
"end_location" : {
"lat" : 41.8781499,
"lng" : -87.62978869999999
},
"html_instructions" : "Head \u003cb\u003enorth\u003c/b\u003e on \u003cb\u003eS Federal St\u003c/b\u003e toward \u003cb\u003eW Jackson Blvd\u003c/b\u003e",
"polyline" : {
"points" : "eir~FdezuOG?"
},
"start_location" : {
"lat" : 41.8781139,
"lng" : -87.6297872
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0.6 mi",
"value" : 1024
},
"duration" : {
"text" : "4 mins",
"value" : 242
},
"end_location" : {
"lat" : 41.8783942,
"lng" : -87.6174298
},
"html_instructions" : "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eW Jackson Blvd\u003c/b\u003e",
"maneuver" : "turn-right",
"polyline" : {
"points" : "mir~FdezuOA_BCoB?sAEwB?WCgCAiDE{BC{D?WAg@?W?_AA_C?e@?a@Am@?aA?o@?_BAo@?gA?e@?q@?O?AA}@?i@CyB?E?gA?EAqCCaB?]"
},
"start_location" : {
"lat" : 41.8781499,
"lng" : -87.62978869999999
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "1.8 mi",
"value" : 2926
},
"duration" : {
"text" : "3 mins",
"value" : 189
},
"end_location" : {
"lat" : 41.8530841,
"lng" : -87.61464420000001
},
"html_instructions" : "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eUS-41 S\u003c/b\u003e/\u003cwbr/\u003e\u003cb\u003eS Lake Shore Dr\u003c/b\u003e",
"maneuver" : "turn-right",
"polyline" : {
"points" : "}jr~F|wwuObKKb@?fAAPAN?b@?hA?vDCB?hDC\\@tJKpAAjAA`@?x@A\\?P?N@F?H@PBJBLBRFPFRHPH\\T`@Zb@^nAjA@@JJXXb@b@~@z@VVh@XRL`@NVJPFRDPBLBTBP@N@L?PAZAb@Gb@Ep@K~@MBAB?`@Gh@Gd@Gb@Gl@Kr@KHClDs@zEkArA_@`@Ox@WdCw@`@OdBi@d@O@?@Af@YlDyAPGNG@AVKbA_@~@]|@]z@Yt@U`@MhCw@tCy@~HeC"
},
"start_location" : {
"lat" : 41.8783942,
"lng" : -87.6174298
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0.4 mi",
"value" : 579
},
"duration" : {
"text" : "1 min",
"value" : 28
},
"end_location" : {
"lat" : 41.8483557,
"lng" : -87.614662
},
"html_instructions" : "Take the \u003cb\u003eInterstate 55 S\u003c/b\u003e exit toward \u003cb\u003eSaint Louis\u003c/b\u003e",
"maneuver" : "ramp-right",
"polyline" : {
"points" : "wlm~FnfwuO?B@B@@B@B@J@H?VGlBi@b@O@?JE\\K`A[fBo@`A]@?^OZKRIXIPAVCJ?P?P@P?PDB?LBPF\\LLFHFNLBBNLJN@?V^DFPZLVFLFLFL"
},
"start_location" : {
"lat" : 41.8530841,
"lng" : -87.61464420000001
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "134 mi",
"value" : 215190
},
"duration" : {
"text" : "2 hours 0 mins",
"value" : 7220
},
"end_location" : {
"lat" : 40.4902291,
"lng" : -89.02867990000001
},
"html_instructions" : "Continue onto \u003cb\u003eI-55 S\u003c/b\u003e",
"polyline" : {
"points" : "gol~FrfwuOHXHh@Ff@@b@B`@?D?T?j@?p@@b@?~A@d@?fA@F?p@?L?|@@t@?`B?lA?J?F?dCBpI?n@@dCDxBDtA@P?DDl@HtAR~AV~ARbAR~@ZzABLDPFd@Fb@Hj@Jf@DX@^FdA@h@?f@?d@?@?DA`AE~@Ef@OhAGn@E^?@Kx@?BGj@Gl@E^?@?LC\\Cd@?`@AP?B?ZAT?XBlAD~AFnC@^F~CFbE?J@fC?F@rC?n@?lB@j@?V?X@nC@~A?pA?J?b@@~A@tA@z@?X@T@\\?P@FB`@Dl@Dj@@?Fj@?@Hf@Hj@@FHb@FVH\\FVJ\\Nh@Jb@bBjGP|@N`AVjCB^FrAHnBN~E?F@RBn@@TBXLjB@ND`@Fd@Hh@RjA\\|AXdAl@lBv@hC@Fx@dCJ\\fApDtAvDjBhFPh@f@vAt@tBRf@Pf@?@?@Pb@fBfEhAdCv@jBBHJTVn@n@rATd@j@jANZd@dAPZt@~AZl@p@xA?@j@fAp@tA?@@?LV@B?@Rb@BFRh@Rj@L^Ph@Lf@HZH^BFDVFZDVT`BD^@FBXBd@Dz@HzA@R?ZBpBB~DAV@X?z@HdK@^?n@@n@@tA@x@@fA?B?Z@R?@?F@jB?L@`@B~D?p@@t@@fBB`A@f@Bd@B`@Fz@Hv@Hr@Jl@Hd@Jl@Jf@J\\BJJV^bBVrAH^\\dBt@rDZxAR~@?@@@?BJ`@VpADRDPDR@Bj@hCBL`AnEVhAThAdDlOLj@ZxAFTtBxJLj@R|@P|@\\zAPz@ZnA@HjBrI`@fBf@dCh@fCZvADPj@lCjCxLzAhHVpA@@?@x@rDv@pDpBhJdAzE~BjLbBtHfAfFnB`Jx@tDbArEHd@@FZrA\\tA~BxK~BxKd@tBPz@J`@H^DP?@@BfA`FxBdKvAvGHb@Jn@VfAJj@h@dCj@lC`@hBt@bDtEdTd@vBf@vB^bB@@XvA^dB\\dB`@nBf@lCN|@@HPpAh@rDJr@XjBXzA@JFT?@@B?BVfAZlAv@jC^pAPh@BH^jATt@v@|Cv@dDl@lC^jBtA`GrAjGfA|ErFdWJ`@`CxKh@bCfDtOFZDNJb@x@xDb@rBxAzGLl@rAhGlAtFvAxGR~@v@vDn@rCdBhI|DlQdCvLjBxI|AhH|BnKJd@@FnCdMdCdL^dBf@~BdCdLf@~BvAvGDLf@tCZjBP|@Jr@NfABJ@LDZLbANjAvAdNVbBRvAHd@Hj@Ln@\\hBJb@@Ff@bCn@bC|@~CBJPh@Tt@dAxC~A|DzAzDJXNf@Lf@Jb@Jb@Jh@Fb@Fb@Hv@Hr@HvABdBAlCMdGG`B?B?JGdC@|CDrBHbBN|AP~APhATjATdA^tAd@tAj@xA\\v@Xl@\\l@\\f@Zh@`@j@n@v@f@l@bA~@^ZFH\\\\@@d@d@jCdCJJh@d@?@pAlAlXpWlHhHr@l@z@x@t@r@f@n@`@`@b@^lB~Bj@n@bAtAnAfBr@dAnAjBdAhBtAdCj@bAp@jAn@fAx@pAdA|AZ`@f@p@Z`@NVRT^b@j@p@RVJJf@j@^^p@t@n@p@Z\\HHTX`AfAb@b@`@b@\\ZJLj@l@v@|@BB|EhFj@l@|@`A`@d@NPJJf@f@h@h@tAxAtBxBf@f@t@r@pAfA@?`At@rAbAjBrA`Ap@hAx@BBx@h@n@b@z@n@r@f@~@n@dBjAv@h@LJNJp@f@~DnCtBzAz@p@NJt@n@b@b@X\\NP|@pAT^f@|@FNJPd@jAZz@Pl@Rt@Pr@RfAF\\?@BPHp@PhBPxBJrAj@dILhB`@rFHbAJjA@N?@@FZvE`@pFHlAJnAVzDDn@d@zGx@vKX~D?BBZ@JDl@`@lFb@hGX|Df@~HHlBBn@@b@FhBBfAB~BD`HDnF@n@?n@NlTDtH?pDC~CAfBGfEAn@EnC?HExD?~C?xDBtF?jC?D@X?Z?rA?p@?D@~CJ`L@dC@bCFtEHxKFpH?P?HBjD@XDrDBx@NnCHrAXdDb@~C?DDXXbBTdA`@lBT|@V|@`@xAFRfCbIP`@pDdLn@zBv@|Bn@pB?@HTBFX|@d@vAfAjDr@xBnCpInAzDjBxFlBbGvAnE|AzEzCjJ`@pAv@zB@B~ApEN^zDdJh@fAzAzCtBzDDHPZvBrDr@fABBv@lApBvCrAfBp@|@~ChEnAdBp@~@X`@|@tAd@v@b@t@b@v@j@fAh@dAJVR`@\\r@Xr@l@vA^|@^bAj@`B\\fAd@rALf@Nd@HVBFRp@r@`CNh@Pj@h@dB|@tCJZDLfCrIX`AbArD`@dBNl@vA~FPp@Lj@vAxFNr@z@hDhAxEhBrHJb@x@hDH`@VbAr@tCpAlFT~@Ld@dApEZpAxD|Oh@pBTdA^zAJ`@`@dB^~A\\pAd@lBt@zCLj@~AtGR`AtBpI^zAvB|IFZnAdF~BrJ@DPr@dAjE|@vD~@tDDTl@dCRx@\\tAp@pCf@tBd@hBd@pBZpAd@hBj@pB~@dDNj@JXdAhDj@~AnAnDz@|Bt@nBBDr@fBr@dBhApCr@fBvBnFTj@l@vAnBxEZp@bC`GzCfHPb@`A|BvDdJrB|EdAdC~AtD`BzDDL`BvDbDzHlCnGLXzAlDfDdILX~AxDlIdSb@bArCxGtFxMFP~BrFzBjFDHJThBjExEzKlAtCbDvHjAxCh@nAhAdC`@~@bC|F|@vBnCtG~ErL\\v@vEbLRd@Xr@BFt@hBhCfGrHtQdBdERf@z@rB~AvDhDdIRf@lCtGTf@Rf@z@pBfBhEf@nARf@nHlQt@fBz@vBjEjKnDrIlApC~BpFrA`D`A`CRf@Tf@dBdERf@dBdE^z@@BVl@?@?@d@hAhAlCnCrG|@vBnDfITh@rAtCFLzDdIl@pAtAvC|@rB~@xBRd@f@nAxAjDjG`O`EvJt@dBzApDdDzH`DxHhChGN^BDpA|CjBnEL\\hCdGlBrE?BdB~DVn@n@|ArIhSx@lBx@pB|ArDpB|ERd@nFhMFNdBdELVXr@dD|HLVvCbH|AtDh@nAjDlIfBdEvCbHp@~ARd@nCrGtDbJzBjFlAvCh@rAPb@Vj@HT^~@j@zAn@`B@Dn@hBd@vAj@~Av@~Bd@zA^lAzBdHNh@nDbLnAxD`CtHrAbEvB`Gt@hBt@jBn@xAp@|ADJjCvFz@hBVh@Xn@fA`Cp@vAt@zA`@|@l@nA~@rB|CvGx@fBbBlDzCtGpCbGlAhCTd@DJhBzDz@jBj@lABFpApCbD~GnC~F`CfFLXlAhCvBpEfCnFZn@f@~@vBpDT\\|@nAjBzBzA`BLL\\ZDFf@b@t@p@lBxA^VDDt@d@h@ZlAp@lAl@tAl@v@Xz@Xn@TNFPDj@Nn@NzAZ^FVDj@HPB|@Jp@Fj@D|@Fl@Bh@@l@@h@?b@?fAAfRIbA?b@Ab@?pDCfEAnHC@?`@ArDApAA|@?b@?zBCfEAb@?rDCb@?L?dDCzEAbIEvBA`ECnDAtCAlCApACfA?`JCdCCb@?fA?`RKlB?b@AtJEvICtCC|JEjB?tBAbBAnA?zB@pABx@DbBNfBVrAVp@NF@hAZh@PdA^ZLTJ\\LB@`@Pn@Z\\RlAr@d@Zz@l@~@v@XVXVn@l@f@h@@@`@b@hAtAlA`Bv@bA`BtBd@n@t@bAZ`@Z^PTpAbBX`@dBzB|DhFnA~AlA`B`@h@nIzKn@z@fCfDjAzA\\b@rAbBHHp@v@vAxAlAfAv@n@d@^\\VDDhBlApBjAB@^RhAh@tBz@j@Ph@PfBh@bCf@h@J~@Lr@Jb@Df@D|@H|AF~ABrBAjAAfACb@AlAC~DEr@Cb@Ab@Ab@AfDGvBC|GKvIMhDIzBCbKQb@AtBE~JOpGM`OU~EIzPY|OYrPUvDIVAjBCvAC|@A\\?F?t@@lABv@Bt@B@?|AJp@Dh@Dn@Hx@LfARfARjAXt@PrA`@fBj@rAd@~@`@fAf@n@ZrAp@l@^^ThJvFxK|Gz@h@|DbC~CrBz@f@fBdArBpAzBtAlAr@hBhAdDlBlHpE|CnBpDzBbCzAjBjAtCfB@?\\TfCxAv@f@tErC~@j@xFjDdAp@t@b@jBhAlAt@n@\\jB~@x@^VJ^Np@VdBj@p@TLD`@LD@\\HTFp@NVFd@HbAT|@LH@hAP|@JtBP|@DtAFrABzA?`EEb@AD?\\?hDGtBCxDG`AAvEGvEGtDG`@AfAAzCEvEGtDGdFGjBCnBEpEGfCExCEnDGpFExGIfBEdCCnBApEAdE?nECJ?b@?nC?nCAb@Aj@?bBAb@AfA?b@ArECB?b@AvEEjAAhAAl@CbBCbBCj@AlBCh@AzAArBAhAAjACb@ArDKjBK^A`@AnEQ^AB?fAGL?x@Cn@CVAb@Ab@ChBInCKb@Ab@CXAl@CrAElDMtAGp@EpAE`BGH?XAJAfDGHAlBCz@AnCElIKd@?xACPA\\?pBGdJSbAE~CGz@CfCKf@CdAElBGbCG`CI`ACb@AdAC~@Ch@Cv@A|BEb@AD?`AAj@AbBCb@?fACb@?RAdEEtEGb@AfAAnCEb@ArDEjACTAvAClBCtAA^A`@?xACrFGtAAfAAjCAd@Al@AZAd@A`AAd@A`BC`AAdCC|@CvCCjAC`AArDEt@Aj@AH?b@?TAtAAj@AvACJ?rDEjCEnBChACrEKb@CV?~DKb@AfACn@A~AAb@?b@?dD?`EKb@ArBG|@GZC|@GlBMbCUdBQzAM~BQjCOzAGnCK|BE\\Ab@?b@AfAA^AlCCh@?jBCb@AV?n@AfAAb@ArDEb@Ab@AdBAxDGb@?b@AhKMjBCb@AvEEb@AlBCpCCpCErC?dDAfDCbIKb@AfJK|AAdOWT?hBCx@Az@A~CEP?~@ArDE~@A|EGlBAtAAx@?fAAX?l@?nC@fJ?`@?^?tG@L?b@?~@@V?N@TAP?X?H?lAAhC?nA@dAAhCC\\?TARCj@ET?@?P?TAT?T?N?j@AB?j@ATAV?R?T@D?N?f@AX?T@f@Bb@Ab@?b@Ab@AjBCb@?PAvCEpACp@A|AELAT?vAEh@AL?tBExAElBEbCGlBEj@ApBEPAj@Aj@A`AAb@A\\?vAClBAjAA^AnBAjBCvAA~BCZ?nDCnDExCC~BAdDCJ?fDCvEGd@?lD?bDE|BEvFIlEG`B?nCBtDGlKKF?rMOhHEjGErDCzCCxCCL?jBCZAF?fDGpGKbCElAClFIzCEf@Cf@A\\AT?tAAhZi@l@AfT_@j@Ah@?VAR?T?R@T?T?T@d@@p@BV@T@T@V@NBn@DTBR@VBRBTBVDRBPBVDh@HVDRDTDd@Jj@Ll@Nh@Lf@Nj@Pf@Nh@Ph@R|@^f@Th@Tf@TRJf@VNHVNFD\\Pz@h@PJPJRLRLPLPLRNPLRNPNPLPNRNPNPNPNRPNNRPNNPPPNPPPPPRNPTTPRX\\@?^b@b@j@^d@NR\\d@NPNTj@z@l@`A\\h@j@bAh@`AXh@NXJTLTLVJTJVLTJVLVLZJTHVLXHTJVJXJXJXHT@@FRFRBH`@jARn@HZf@hBdApDz@xCrAlE~@vCt@|Bl@dB^fAVp@^hA`@jAl@~An@bBfAtC^~@Rf@DJd@jAbB|D|@tB~@vBzAbDr@zAt@~Ad@~@Td@P^pAjCXj@h@bA^r@Vb@?@h@~@h@`AZl@Zh@j@bAj@bALTZf@Zf@LV\\h@^n@\\h@JR\\f@j@~@l@~@|@rAl@~@l@|@d@p@FHPVLPHLTZ\\d@`@h@NRNPNTNRNR^f@^f@\\f@`AnAn@x@PTn@v@V\\d@j@BBNRFFX^n@v@p@v@`@d@NPNPNPr@x@PR`@d@^b@p@t@LNb@d@PPdAhAPPb@b@Z\\RTdAdAt@t@vAvAtArAtAnA@@ZXl@j@`@`@d@`@b@^t@p@t@n@`@\\@Bb@\\d@`@LJPLJJDBh@b@h@b@^Xv@n@r@j@jA|@zAhAhAx@h@^`@XVPd@ZNLf@\\f@\\^VDBb@XTNPJd@Zf@Z\\TXRz@f@b@Xf@Xd@Zz@f@`@TVN@@x@d@z@d@x@b@x@d@nAp@nAn@x@b@h@Vf@VlAl@pAl@d@Th@TJF\\Nz@^h@T`@RD@h@Tf@Tz@\\rAh@lAd@fBp@h@Rp@Tb@Pf@Pz@Z|Bt@h@Pb@NdA\\|@VpA`@hD~@hD|@~Ab@rBd@fDt@bDn@hB^tATdARl@J~@Pd@FhAP`ALfBXfALZDd@FtAPdGr@\\DvBR^Db@Hd@FpAP|AR|@NrAR~B`@tAXpAVh@NRDTFRDTFvA^rA^`AX`@Lz@V`AZj@P^Nn@T^Ll@T^NB@jBt@hDzAz@b@v@^dAj@pAp@lAp@`@Th@Xd@Zv@f@hC`BLHTPl@b@TN@@VPdCjBf@^fBxA|AtAnBfBl@j@~B|BvAxA~@dARRn@r@vAbB~AnB~ArBlBhCfAxAlAbBdAvA|@lAjAbBn@z@v@bAb@l@\\f@dAvAn@z@z@jAz@jA~@pAdAvAxArBvAnBzArBz@lAb@h@`@j@z@jAdAvAt@dADFh@t@b@l@`BzBNRHJtC|DbCfDpAhBj@t@@@\\f@PTzApBpK~N~GjJfBbCtDdFlBjCj@v@j@x@lA`BjBfChFhHzCdEjSvX|JbNT\\V\\`@h@Z`@Zb@pEhGbDnEx@fArFtHlE`GhGrIpAdBp@~@f@r@r@~@jA`B|F~HjA~AxApBtAlBhBdCrAhBf@r@nAdBnAbBbCdD~AxBrAhBtGzI|ChEzArBvNzRn@|@rBrCt@`A`@h@v@`A\\b@^b@Z\\VXVXn@n@t@p@ZZXVPNRP\\ZXT^XNLPL`@Xt@h@h@\\f@Zb@XVN^Rp@^`@R\\Pj@Xr@\\t@V|@\\j@RpA`@~@VfAXPD~@RvAVtAV|@L`@HhBXXD|@NRB`@Hb@FjS~CxATtATx@Lp@Lj@LNBVFZHdAXx@Vp@RZJn@Tf@PvAj@x@^nAp@hB`AVNPJRLRLPJRNPLRLPLRLPNRLPNPNPLPNRNPNPNPNPPPNPNPPNPPNPPr@t@`@b@PPNP^d@`@f@^d@bArAPRvDfF|CfEnGtIvC|Db@n@`_@fg@Zb@nBlCNRX^lGrIlDzEfAxAfAxAtIlLd@j@jKpNZb@RVJLNRLNRTRXV\\\\h@p@~@^f@lAbB~ChE~ShYbAtAfB`CzGbJrBrCjFfHtBrCp@|@h@r@bAtAtJtMxKbOvS~XtMlQ|CdEDFX^nBlCdAvAfLpO|B|C^h@nEbG~@pA~@nAj@v@r@|@|@nA\\b@PVnAbBLP^f@RVJNn@|@n@x@l@x@p@|@~@nAl@z@n@x@l@x@p@~@^h@\\d@\\f@^j@\\h@T^HLLTLRNVXj@NTXj@Zl@Xl@Xl@Xn@Xp@Xr@Vn@Tl@Vr@`@jATn@Vx@J\\^rATz@Nj@FXFRFVFXPt@Nn@Nv@Nz@Nz@RhALt@Hn@Jt@RzAHv@LpANtAvDn`@d@zE\\fDv@dIzAzO^xDFn@Hl@LrAD^B\\Hv@RnBlDr_@nAvL\\jDxBbUdAjKJbAnBjST~B`@`EnBnSNrANnAL`ALt@Lv@Nt@Nv@Nt@Nt@Pr@@DPn@Pp@Rr@Tr@BHTr@L^b@nARh@FRJR\\v@r@|A`@v@^t@h@z@d@t@f@v@d@p@Zb@j@t@f@l@z@`Ap@p@r@p@|@z@l@d@b@^r@f@p@d@n@`@pAt@z@b@z@`@b@P^P@@~@\\r@Tb@NLBB@LBNDB@RDv@NhATXFJ@RBB@NBNBTBT@\\DrDV`@BnCRrBVnBVfHj@dBLpHl@b@BtNfAvALN@l@FjBNxFd@fAJtE^n@FdE\\x@F`@B`Gh@nBN`In@b@Db@Db@BbCRnF`@RBfAHzAL~MfAhDXf@DlAJp@Hh@Fj@Ht@J|AXnAVjAZn@PZHn@R\\JTHXJVJt@XrAj@z@`@^Rb@Rx@d@d@Xd@Xf@Z`@Vz@n@l@b@jA~@h@f@b@^nAlA~A`Bf@l@DDv@~@r@|@fBbC@@jSnXvAlB\\d@~AvBvG~I|@lAzFxHjFdHrAfBl@z@pEdGn@|@jKnNpAdBnCpD~B~C`ApAX^r@`A~@lAzCfENPX`@?@jA|AbG`IxAdBp@v@z@z@z@~@bB|A~IhI\\XbInH|FnFf@`@tBpBxBnBbB|Ad@`@~BvBdC|BjD~ChItHjFzE`CxB\\ZXVh@d@pF`FjD`DpOlNBBnDdD|DpDv@v@f@j@XVNPTVVZX\\NPRXNP@@TZRV^h@V\\z@pAn@fAb@r@T`@R\\JT\\n@Zn@Xh@Pb@R`@Xn@Tl@P`@Rf@Pd@N`@Tl@JZNd@Xz@Tr@BFTx@Pp@\\tAVdARx@Pt@Ln@Jl@TjATpADTPjAn@tDLx@N|@d@tCl@vDXdB`AbGjCbPdDhSF^v@`Fx@`FPz@Lp@Jd@Jb@Nn@XjALf@Nd@L^Z`ARj@JXXr@HVJV^x@l@nAb@z@Vd@R\\T`@PXPXXb@X^X`@\\b@V\\X\\h@l@@@PPRT^^\\Zn@j@l@f@^Xb@Zf@\\b@Zr@b@@?b@VZN\\PB@VLj@V@?\\NJBZNVHZLXHXH^J\\Hb@J@@jB^nCj@dDp@|Bd@`KrB`@Hb@JzH|A|Bd@@?rBb@dWfFtDv@x@N@?tBb@fCh@jFdAnE|@bARdL~BlCh@nJlBlAVx@Nv@P~Bd@~A\\tBb@TD|AZtAZ\\JjAZfBj@tAf@f@Rr@ZlAh@r@^XNj@Zt@b@VNZR`@VxAdAn@d@x@n@jAbAzAtA`CxBhAdAz@v@bA|@jBdBb@`@hFxE`HjGx@v@\\Z^\\l@h@z@v@fB`BfA`AdC|BbBzAlDbDpEbEnBhB|GhGJJbP|NnBfBrBjBfC|BdC|BlBbB~AxAz@v@~AvAxEjEbA~@`@^tCjCr@l@VVh@d@`GnFvApAlDbDvFbFfQ`P~@x@ZXj@h@r@r@RRTVf@h@pIrKxAzBj@~@j@~@Xf@j@dAj@hAr@vAd@`AJRLXVh@b@bAZt@JTL^Th@HVJVJVJZh@xAhEnLtCbIzAdEf@tAPd@|AjE`AjCHTZ|@dDbJ|BlGh@|Ax@zBpBpFL\\v@xBv@xB|@bCpCxHPf@bCzG~GhRdAvCRf@tCdItDdKl@`Bh@zABF~BrGHRlAhDvB~FjAdD\\|@x@|Bt@rBh@vA\\`AXv@FPzDrKzAbEv@xBfCbHb@lAlAdDbCzGbApC`AnC`@fA|BpGx@zB`@fA|@`Ch@zAPf@d@nARh@FPtAxDj@~Ah@vAt@tBv@vBTn@N\\j@zATn@bApCDLnF`O\\~@rBxFjEvL~CtItAzDHVHPjAbDzBdG~@hCp@hBhA|Cn@dB|@dCxA|D|AhElBnF@BpCzHBFvCdIf@tAzAbEHXzAbEn@dBx@|Bf@rA`CxGlDtJv@tBTn@Vr@Tn@b@hATn@f@fAVl@DJRb@@@Xj@Xj@\\l@T`@Zh@b@r@RXV`@X`@FJ^f@nA~Ax@`AlAnAd@b@p@n@d@^FF\\XNJx@n@hAv@rBlAj@Zz@`@d@Rz@^h@Rf@Rj@Ph@P|@TtA\\JB\\Fh@Jj@J^Db@Fz@JbAHXBr@Dr@Dl@@h@@\\@h@Ad@?h@?^AnACz@?H?z@BV?j@?tA?dAAfECp@?lBAjB?pDCb@?jC?lBAj@?`A?vAAtAAvA?dCA`CA`C?bAAtA?tA?bAA~@?hAAnC?@?nBAlB?tAAl@?B?d@?j@Aj@?`A?|AAvEArBArA?lAAvEApA?l@?j@?h@A`A?F?v@?bAA~@?hCArAAX?H?vC?nCAzOEb@?b@?pCAfB?`DCxC?pHC`KC|UE~BAl@?`AA`A?z@Ap@?h@@h@?^@b@B\\@`@@l@Dh@Bl@Ff@Dj@Fl@Hf@H\\Db@H@?p@Lt@N@@`AR~@Vd@Nh@NTFRHj@Px@Zh@RZNZLXLPHLFLFZNXN|@d@`@TVPFBxD~BzFnDlAt@rBpAnAt@~A`AVPhAp@n@b@FBlAt@d@Xd@Zz@f@d@Zx@f@lAt@x@f@f@Z`BbArAz@dAn@`EdClAr@f@Zz@f@b@VTJPJ@@f@Vd@TTHRJTHh@T^PXJTHh@Ph@RrA`@hBh@pA`@tR~Fh@N~@Xt@Vt@Vx@XRHVLZN^P^RXNf@Zb@VPLTN~@n@`An@ZTZRzDhCVPFDhGdENJ\\TjEtCv@h@x@j@jAv@lAx@pBrAdCbBv@d@f@\\~AfAbFfD`FfDnAx@f@Zf@Xd@Xf@V@@f@T`@Rb@P\\N^NbA^d@NTHXHZHx@T|@TjBb@zCr@~Ct@z@R|A^rCp@d@JbE`AhHdB~J`CvJ|BtY~G~D~@l@NpA\\TDRDj@L\\Ht@PhFlAXHbDt@HBxHhB`@JbATfPxDrV|F`@Jh@Ld@Lj@LZFtBh@t@RlAZbA^bA\\zAl@hBz@XLhBbAjU~L^RnGjDt@`@pLnGrQrJjGhD`@RLFPJ^RbKpFrJhF~HhEnBdAHD^T^RHDfAp@j@^x@l@j@`@HHd@^~@x@ZVp@l@t@t@d@f@f@h@hApAp@x@pAdB@@h@v@FJX`@V`@`BbCdGbJfA~AdElGzBdD|BhDFLlAfB~CxEpAlBhDbFfBlC`DzE~@tAb@p@l@~@bAtAX\\^d@t@x@`@^RRTTp@j@RP@?\\VBBXRJHPJRNb@VHDPJ^R`@RLF^P`@Nx@Zr@Vf@Lp@RPDx@Nb@H`@Fb@FD@j@FT@?@ZBF?TB\\@j@BH?v@@R?XAR?f@@n@Ap@?vEEb@?hIG`@AN?\\A\\?j@ClBCbDCb@?fKIr@Az@Ab@?b@?zFGvBAjBAb@Ab@?|FEvCClOM~HGdBCrBApCC`AAD?b@?zAAhDCx@?t@@l@@|@DxAHn@F|@H@?h@FRBbANr@JZFb@HJBj@L~@RrA\\x@Xh@PfBn@lAd@XJh@VNHVLd@TvBhAjGdDrFvC@@\\PtDnBl@Z^RHD|Az@nFrCrHzDvNvHtGjDz@b@fExBtBhAbExB`B|@bB|@HB^Rd@VlAn@bB|@`Bz@bB|@lDjB|@d@`DbBdHtDz@b@lCvAxEfCfCrAtBfA|C`BnAn@|C`BjDhBdDfBbB|@x@`@hCtA~C~AtBhAbB|@x@b@bBz@z@d@nAp@lAn@z@b@?@`@RXNdAj@DD~@b@pDlB`Bz@z@d@x@b@f@XPHh@XlAn@pAp@x@b@z@d@fAj@n@\\`Bz@z@b@nAn@xEhCx@`@nAp@nAp@f@V`Bz@bB|@f@Vx@b@f@XjAl@j@Xv@b@h@X|@d@p@\\l@\\h@Xx@`@lAp@h@Vx@b@FBhAl@~Az@|@d@~Az@nAn@nAp@z@b@lAp@bB|@vBfAlAp@nAn@BBb@VXPXRXR`@Z`@\\`@^BBVVHF`@b@b@h@`@f@Z^^j@\\f@\\j@Zj@Xj@R`@Rd@Tj@Xr@Tn@^jARr@Pr@Pr@Pv@Lp@Lx@Lz@Hn@Fd@Fn@NrAThCTlCNtATlC^`En@xGXfDHt@Fl@JdA`@nEPjBzAjPh@|FHv@Ft@LpARxBD`@N`BJfA@PHv@TfCLtALrARlBH`AFl@LtAHv@Hr@Fh@Hh@Lx@Jr@Jd@Jj@Pt@Jf@Lb@Rv@ZfAJXTp@J\\@BRh@f@jAFPLXb@|@^t@LRXh@@@j@|@DFX`@l@z@PT^d@`@b@r@t@PP^\\NLRPHFJJ`@ZPLTPNJRLPJPJj@X^Th@Vh@V`@PHBh@Tx@^z@^|@^~@\\h@TnAh@p@XpGjCfBr@tAh@`@NB@|@`@PFNFhBv@ZLd@Tx@ZdBp@B@fDtAHDxAj@`@PRHzAl@nBv@lBx@lEhBnFvBpAh@z@^|@\\z@\\`@PXL|@\\l@VPHNF`C`A`Bn@`Bn@dA^|@Zz@X|@V`AXtA^B@z@R~@TpAXrAVtAVp@P~Bf@~Bf@bDp@dDr@RD`@HrE`AvBb@`ARh@LvBb@lGrATDn@NpE~@b@JXFj@Lr@Pb@Lb@Nn@Rh@TjAd@v@^f@Xh@XdAp@bAt@r@h@b@^XVVTf@f@TT^`@XZJLLPHHd@l@^f@Zd@l@|@zAbC`InM\\h@pUp_@xUv_@lMvSfCbElAnBzBrDhG|JhAjBV`@\\j@zA`CVb@hBtCf@z@V`@FJxFdJlEdH~@zAnD~Fp@fAn@dApCnEp@dAlCjEtA|BzKnQdAjBr@vAj@nA^z@P`@Tj@`@dAXr@Xz@b@pAVv@`@tA|@dDT`AXpAh@~BDTbBnHLl@lCpL|BfKx@lD~I~`@lGzXbBnHR`Ap@vCPv@nAxFh@|BfA|ELj@p@tCx@tDL`@Jb@Rv@l@nBL^JZTl@Tl@Vl@Th@BDTd@Vj@\\p@`@t@Zh@^l@h@x@NTPVZ`@JLX^b@h@fApADF`DrDlDbElAvAlPtRpAzAb@f@zCnDbE~En@t@xBhC|@dA`AlA|@bAfApAfAnArB|B`@d@RRRRf@d@b@\\`@Xb@Z\\R^RVLTJ`@P`@PNDn@V`@LXJZHVHd@JLBRFZDx@NtAP~BZzH`APBxARr@Ln@Jr@Rx@Tl@Rj@Tx@^`@R`@T|@j@LH\\XXTl@d@f@d@b@`@\\^VXVZb@l@FHTZBDV`@V^T^~AtChFfJbBxClBhDVb@tAfCbCfExD`HzClFDFzCrFfAlBlAtBrA~B|ArCdB|Ch@~@p@lAnAzBbBvCxAhCh@`A~BdEjArBxBvDnAxBzCnFp@lAb@v@l@jATf@R^P^Tf@Rd@@@Pb@LZLZN\\Pd@Nb@L\\f@xAVx@Nd@JZPn@l@|BnC|KjA~EhAtEXjAThALl@BNJj@PpALjABXFv@HdAFnABbA@t@?dA?jA?z@An@Ev@Af@GdAI~@KdAQzASzAETkAnIAB]fCKj@?F[dCSzB?JKpAIbBC`AAz@C`B?xA@`B?NB~CNlX@~ADxJ@n@DhI?\\LvUT|c@B|D?n@BjFBzD@jD@lE@p@?l@?n@?~@AxD?\\?P?^?BAn@?JA|AC|CApAC|AGvK?l@EzGEzGC|DCzDKpOAxAAxAAvDABI`PCvCEdH?@ExE?L?@?L?T?LAj@?XQfZClDChC?zAE|FIzLC|HAr@A`AAhB?`@@f@?h@Bz@JnCJpAHz@Hv@Jx@L|@Lz@Nt@Lp@Lh@Nl@Nf@Pp@Tr@@BVv@Rf@Th@LZLZ@?N^P^`@r@Zl@PVVb@NRLPV^RTBDPRBBZ^\\^PPLLTTr@l@ZV^Zn@b@`@VNJPHp@^`@Rd@Rb@RZLZJj@Nb@LXFZHb@Hf@H`@F^Dh@F^@h@BpAFbBDV@~CP|@D`ADpFRpQj@~DPxHVtNh@vEPfGRdENpJ\\rCHdBB`AB`CBzABx@?xA@bA?b@?DAzD@rA?N?^?p@AbB?tLArD?tCA|@?pA?Z?lBAtFE~KGrDCvEAzLCnF?~GCT?dPEl@?"
},
"start_location" : {
"lat" : 41.8483557,
"lng" : -87.614662
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0.3 mi",
"value" : 563
},
"duration" : {
"text" : "1 min",
"value" : 42
},
"end_location" : {
"lat" : 40.4856719,
"lng" : -89.0308577
},
"html_instructions" : "Take exit \u003cb\u003e160\u003c/b\u003e for \u003cb\u003eUS-150\u003c/b\u003e/\u003cwbr/\u003e\u003cb\u003eIL-9\u003c/b\u003e toward \u003cb\u003ePekin\u003c/b\u003e",
"maneuver" : "ramp-right",
"polyline" : {
"points" : "}fcvFflk~Of@JRDRB^Bj@@~@@`BDr@BZ@TBTBRBTFRFRHRJPJB@PJNLRNFFFHNPNRj@~@NT\\l@LRBDJJJJFDNHJFFBHBHBTDXF"
},
"start_location" : {
"lat" : 40.4902291,
"lng" : -89.02867990000001
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "1.1 mi",
"value" : 1721
},
"duration" : {
"text" : "3 mins",
"value" : 183
},
"end_location" : {
"lat" : 40.4827495,
"lng" : -89.01149819999999
},
"html_instructions" : "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eIL-9 E\u003c/b\u003e/\u003cwbr/\u003e\u003cb\u003eUS-150 E\u003c/b\u003e/\u003cwbr/\u003e\u003cb\u003eW Market St\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003ePass by Taco Bell (on the right in 0.7 mi)\u003c/div\u003e",
"maneuver" : "turn-left",
"polyline" : {
"points" : "mjbvFzyk~Od@HH@LBTDRqBh@qG?CPkBB]Do@TgCh@gGHmAZsDFm@LgBBQNgBNuBI[JmA@ULqAHgAH_AJsALgCB_@FsAJoBDq@Fk@JkARwBH_ABa@JqBFqAJ}BDs@Dw@Bs@Ds@@YBe@F}ADeAD}@FkBLyC"
},
"start_location" : {
"lat" : 40.4856719,
"lng" : -89.0308577
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "1.0 mi",
"value" : 1589
},
"duration" : {
"text" : "3 mins",
"value" : 198
},
"end_location" : {
"lat" : 40.48238380000001,
"lng" : -88.99277549999999
},
"html_instructions" : "Continue straight onto \u003cb\u003eW Market St\u003c/b\u003e",
"maneuver" : "straight",
"polyline" : {
"points" : "exavFz`h~OJ{ANkCR_DZaF@OBc@J}AXsE?W@]@k@?e@?k@A}AA_BEkHAaBCcDCyJA_BAm@CoCCsEEeE?wAA}AC{DCkEA{D"
},
"start_location" : {
"lat" : 40.4827495,
"lng" : -89.01149819999999
},
"travel_mode" : "DRIVING"
},
{
"distance" : {
"text" : "0.1 mi",
"value" : 224
},
"duration" : {
"text" : "1 min",
"value" : 28
},
"end_location" : {
"lat" : 40.4841869,
"lng" : -88.99372939999999
},
"html_instructions" : "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eN East St\u003c/b\u003e",
"maneuver" : "turn-left",
"polyline" : {
"points" : "{uavFzkd~OcBB_@B[HSHSH[TGFKHGHc@j@UVMJMHSJ"
},
"start_location" : {
"lat" : 40.48238380000001,
"lng" : -88.99277549999999
},
"travel_mode" : "DRIVING"
}
]
}
],
"overview_polyline" : {
"points" : "eir~FdezuOq@ocAEwG`OOvZQbMl@tNnK`Lm@d`@uJh[_LvPiExMwClEbEv@`QTlf@vDzWu@tRGbRjAly@jAlF~D~Wj@vMhExQjT|l@zNf[rCnItAnXXj^R`QlArJlG|Y|Ort@xo@dzCpi@ngChHt]fa@rhBb`AlpErIfk@hMba@HbXj@dUfFfQtHlJlt@`s@b]jg@ni@ll@b]bWhOrKfGbI`DvKvBlXfHhbA|Cxd@b@f]AzvAr@pcAfBvXpHdY~]zgA|Oze@zRf`@|Zbe@lLl\\~Tdz@`Y`kA`m@`dCdZhw@fm@rwAlkBtoEphAjmC|tA|aDrwAniD~]vfAd[ns@pl@zoAlPd\\tKtLdNfI|JrCnI|@f]C|t@[pxAo@tq@WzUhAbIfCbJxFxUnYdl@zt@`K|GjRtFzPh@xOYzuCuEt]XzQtE|a@bVncApn@rh@rZvTfFdTZ~c@m@rnAaBl}AmAt_AaDlqDeGhnAqBbm@sCfm@s@fgCuBvk@UdgDkDb_D_E`Lj@pOjDrNhHdHzFnItJnJ~Pl\\jbAjV`i@vL|St[vc@`g@zg@ra@pZro@x[tg@rO~l@pJp]rFf\\bLnWlOhVfTpQxTl^|f@p]xe@hiCdnDlq@t~@ph@pq@pN|JpKhEfNrCxj@jJtT`KfHvFz]dd@zkC`pDtaC~bDrP|UfKlVnF~V`Pp`BxYlxCnGlVvF|K~IvKrLjIfHnCbJ|AfjAlJrz@|G|\\zChLrCjVpNtMdOtl@dx@rv@rdAvTxWzh@df@roAjjAdLlNzJpSnHzY`VfyAjIdVtJvMhNdJd}B~e@lp@fOdJxExQlOdq@xm@jhAjcA`z@jv@hT~[pDhIn]l`A|n@bfBx|@|cC|bAtpC`a@fhA~JrSpJzK~J~GxUrG~TZ~m@QbqA[v|BU`ShDfNfGtcAhn@bh@pPxQnJ~i@v^j`@fUvhCrm@jq@~OtQhHvqB|fAnTtQni@~w@|]~e@zJlFbN`Cl^M~y@q@p{@KzWhGdk@bZ~mCfwAhfA|j@vcAni@|QjMbF`IpD|KjHnr@dIp|@dEz\\lHfR`LfMfQlIrkA~e@h\\rL`n@rM`b@nKfPfNbrCfrEjTr`@~FhSrm@nnCzJl\\xWj]xt@n{@pNjHfa@bHnHtEzEpFvk@vcA|i@~`AnIvRjOtp@^tOmArOmDfX]|QvAtuCMd]}Bf|Dd@vPlBjLbHpPrJtJlOnFlsAfFzz@|A|{A_@vi@j@fHxGlFxBlKwvA`Ceh@|A}WMmZWgf@GgKA{DcBB{@Lg@Rw@p@uAxASJ"
},
"summary" : "I-55 S",
"warnings" : [],
"waypoint_order" : []
}
],
"status" : "OK"
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry" async defer></script>