1 hr 20 min

London LHR 7:55 PM
Air France Economy Airbus A319 AF 1281
`}};jt.styles=Ee(e(':host{display:flex;flex-direction:column;height:100%;width:100%}.travel-details{display:flex;justify-content:space-between;padding-bottom:.8em;width:100%}.flight-data{color:#4285f4;display:flex;flex-direction:column}.city{font-size:1em}.airport,.city{font-family:Google Sans,Roboto,sans-serif}.airport{font-size:1.8em;padding:.2em 0}.time,.travel-time{color:#858585;font-size:1em}.travel-time{--mdc-icon-size:40px;letter-spacing:.25px;text-align:center}.plane-icon{padding:.2em;transform:rotate(90deg)}.info{color:#b9b9b9;font-size:.9em;letter-spacing:.25px;line-height:20px;width:100%}.info span:not(:last-child):after{content:" \\B7 ";margin:0 .4em}travel-placeholder{margin:auto 0}.attribution-container{margin-top:auto}@media screen and (max-width:480px){.info,travel-placeholder{display:none}}')),jt=Lt([We("travel-flight-route")],jt);var Bt=function(e,t,i,r){var o,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};let Vt=class extends Ne{render(){return ie`
place
Heathrow Airport Terminal 2, Inner Ring E, Hounslow TW6 1RR, UK
place
The Ritz Hotel 150 Piccadilly, St. James's, London W1J 9BR, UK
38min 51£ Estate car Up to 4 persons
`}};Vt.styles=Ee(e(':host{display:flex;flex-direction:column;height:100%;width:100%}.travel-details{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:1em;width:100%}.place-icon{--mdc-icon-size:30px;color:#f4b400;position:relative}.address-container{display:flex;padding-bottom:1.2em}.address-container:first-child>.place-icon:first-child:after{border-left:4px solid #f4b400;border-radius:20%;content:"";height:30px;left:42%;position:absolute;top:calc(50% + 10px)}.address{color:#000;display:flex;flex-direction:column;font-size:1em}.address span:nth-child(2){color:#9c9c9c;font-size:.9em;line-height:2em}.info{color:#b9b9b9;font-size:.9em;letter-spacing:.25px;line-height:20px;width:100%}.info span:not(:last-child):after{content:" \\B7 ";margin:0 .4em}travel-placeholder{margin:auto 0}.attribution-container{margin-top:auto}@media screen and (max-width:480px){.taxi-route{margin-top:0;padding:0 0 .5em}.address{overflow:hidden;white-space:nowrap}.address span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.info,travel-placeholder{display:none}}')),Vt=Bt([We("travel-taxi-route")],Vt);var Xt=function(e,t,i,r){var o,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};const Gt={"CC-BY 3.0":"https://creativecommons.org/licenses/by/3.0/legalcode","CC-BY 4.0":"https://creativecommons.org/licenses/by/4.0/legalcode"};let qt=class extends Ne{constructor(){super(...arguments),this.name="",this.href="",this.author="",this.license="CC-BY 3.0",this.licenseUrl=""}render(){const e=this.licenseUrl||Gt[this.license]||"";return ie` ${this.name} by ${this.author} ${this.license?ie` is licensed under ${this.license} `:null} `}};qt.styles=$e` :host { font-size: 0.7em; color: #9c9c9c; } a, ::slotted(a) { color: inherit; } `,Xt([Ye({attribute:"name"})],qt.prototype,"name",void 0),Xt([Ye({attribute:"href"})],qt.prototype,"href",void 0),Xt([Ye({attribute:"author"})],qt.prototype,"author",void 0),Xt([Ye({attribute:"license"})],qt.prototype,"license",void 0),Xt([Ye({attribute:"license-url"})],qt.prototype,"licenseUrl",void 0),qt=Xt([We("travel-attribution")],qt);var Wt=function(e,t,i,r){var o,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};const Kt={maxHeight:150,maxWidth:200};let Yt=class extends Ne{constructor(){super(),this.sights=[]}render(){return this.sights.map((e=>this.renderPlacesResult(e)))}renderPlacesResult(e){if(!e||!e.name||!e.formatted_address)return ie`
`;let t="";return e.photos&&e.photos.length>0&&(t=e.photos[0].getUrl(Kt)),ie`
${t?ie`Image for ${e.name}`:null}

${e.name}

${e.formatted_address} `}handleClick(e){const{placeId:t}=e.currentTarget.dataset,i=this.sights.find((e=>e.place_id===t)),r=new CustomEvent("place-selected",{bubbles:!0,composed:!0,detail:i});this.dispatchEvent(r)}};Yt.styles=Ee(e(":host{overflow-y:scroll}.sight-item{display:flex;padding:1em}.sight-item:first-child{padding-top:2em}.sight-item:last-child{padding-bottom:2em}.sight-item:hover{background:#f8f9fc;cursor:pointer}.sight-image{background:#ccc;border-radius:7px;flex-shrink:0;height:70px;object-fit:cover;width:85px}.sight-info{display:flex;flex-direction:column;justify-content:space-between;margin-left:.8em;overflow:hidden;padding:.2em 0}.sight-info>p{color:#757575;font-size:.9em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sight-info>p:first-child{color:#000;font-size:1.1em}")),Wt([Ye({attribute:!1})],Yt.prototype,"sights",void 0),Yt=Wt([We("travel-sights")],Yt);var Jt=function(e,t,i,r){var o,a=arguments.length,n=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};const Zt={maxHeight:400,maxWidth:700};let Qt=class extends Ne{render(){if(!this.place)return ie`

`;const{rating:e,user_ratings_total:t,name:i,vicinity:r}=this.place;let o,a="";if(this.place.photos&&this.place.photos.length>0){const e=this.place.photos[0];a=e.getUrl(Zt),o=Tt(e.html_attributions[0])}return ie` ${i}
${i} ${r}
${o?ie`
Image by ${o} `:""} `}};Qt.styles=Ee(e(":host{display:flex;flex-direction:column;height:100%;justify-content:space-between;width:100%}.restaurant-heading{font-size:1.2em;font-style:normal;font-weight:500;line-height:22px;margin:1em 0 .5em}.restaurant-image{border-radius:6px;height:200px;object-fit:cover}.restaurant-price-container{margin-left:.5em}.restaurant-vicinity{color:#9c9c9c;font-size:.9em;font-style:normal;font-weight:400;line-height:10px;margin:1em 0}.additional-info{margin:auto 0}.additional-info-container{align-items:center;display:flex;margin-top:1em}.additional-info-circle{background:#ececec;border-radius:100%;height:40px;margin-right:.25em;width:44px}.additional-info-line{background:#ececec;border-radius:10%;height:8px;margin-right:1em;width:20%}.attribution-container{color:#9c9c9c;font-size:.7em;margin-top:auto}.attribution-container a{color:inherit}@media screen and (max-width:480px){.restaurant-image,travel-placeholder{display:none}.restaurant-heading{margin-top:0}}")),Jt([Ye({attribute:!1})],Qt.prototype,"place",void 0),Qt=Jt([We("travel-restaurant")],Qt);

WebGL-powered features for the Maps JavaScript API

Your world isn’t flat, and now your map isn’t either. With the Maps JavaScript API you can create next generation mapping experiences for the web using WebGL-accelerated features and the same performant, client-side rendered vector map you know from Google Maps.

Tilt and Rotation (beta)

Manually and programmatically control up to 67.5 degrees of tilt and full 360 degree rotation to create immersive user interactions, and bring Google Map’s oblique 3D building models into your apps for the first time.

WebGL Overlay View (beta)

Use the rendering power of the GPU on client devices to place 2D and 3D objects directly on the basemap. WebGL Overlay View gives you direct hooks into the WebGL rendering context of the vector basemap, allowing you to create mapping experiences never before possible.

Get Started

Learn more in the Maps JavaScript API documentation, or get started with our WebGL codelab.