So far we've seen the breadth of features possible with AMP. Sometimes, however, AMP is just not enough. There might be some functionality that you really need, but despite AMP's extensive list of components, it's not supported. A solution may still be possible. Sometimes referred to as the duct tape of AMP, amp-iframe might be able to help.
In this chapter, we'll see how the amp-iframe component can be used to plug functionality gaps in AMP. In particular, we'll see how to:
- Add a Google map to an AMP page
- Implement a searchable map
- Use the geolocation feature of the user's device, and plot routes
- Add Disqus comments to an AMP page
- Add a checkout payment process to our e-commerce prototype
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for map examples: iframe-map-start.html
- Google Map in amp-iframe: iframe-map.html
- Google Map in amp-iframe with header overlay: iframe-map-overlay.html
- Full screen Google Map with amp-iframe: iframe-map-full.html
- Searchable Google Map (Embed API) with server backend:search-map.php
- Searchable Google Map (Embed API), no server backend: search-map.html
- Google Map (Javascript API), non-AMP page: geomap.html
- Google Map Javascript API, full-screen: iframe-geomap-full.html
- Google Map Javascript API, fixed-height: iframe-geomap.html
- Searchable Google Map with directions, full-screen: iframe-directions-full.html
- Searchable Google Map with directions, fixed-height: iframe-directions.html
- Disqus comments, non-AMP page: disqus.html
- Disqus comments embedde in amp-iframe: iframe-disqus.html
- Product page with Payment Request API in amp-frame: product.html
- Non-AMP checkout functionality with Payment Request API use in amp-iframe: checkout.html
Download code
Download all code for this chapter: ch9.zip