Learning AMP: Google Maps via AMP-Iframe

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

AMP Google Maps Example

<amp-iframe 
title="The G-Spot of Europe"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d147552.0865126831!2d25.112951919090488!3d54.700802087400675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd93fb5c6408f5%3A0x400d18c70e9dc40!2sVilnius!5e0!3m2!1sen!2slt!4v1591726107713!5m2!1sen!2slt">
</amp-iframe>

AMP-iframe With Fixed Attributes

<amp-iframe> 
title="The G-Spot of Europe"
width="600" height="400"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d147552.0865126831!2d25.112951919090488!3d54.700802087400675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd93fb5c6408f5%3A0x400d18c70e9dc40!2sVilnius!5e0!3m2!1sen!2slt!4v1591726107713!5m2!1sen!2slt">
</amp-iframe>

Requirements form AMP-iframe

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Breakdown of AMP-iframe Attributes

Step-by-step Guide

<?php /* Template Name: AMPire.city template */ ?> 
<?php get_header(); ?>
<div class="maps col-xs-12">
<amp-iframe
title="The G-Spot of Europe"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d147552.0865126831!2d25.112951919090488!3d54.700802087400675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd93fb5c6408f5%3A0x400d18c70e9dc40!2sVilnius!5e0!3m2!1sen!2slt!4v1591726107713!5m2!1sen!2slt">
</amp-iframe>
</div>
<?php get_footer(); ?>

Useful links

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store