What Will I Learn?

This guide demonstrates a quick way to code AMP compatible Google Maps on WordPress website.

Requirements:

• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)

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>

This is the simplest code to implement Google Maps on your amp-friendly website. With these configurations the size of amp-iframe should be defined with CSS. See a working example on one of my client’s website here.

AMP-iframe With Fixed Attributes

If you want the size of amp-iframe defined within html, simply add width and height attributes to the amp-html code above.

<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

If you don’t have official AMP plugin for WordPress AMP for WordPress installed, you’ll have to add the required amp-iframe and amp-bind scripts into your website's header in order for Google Maps to work.

<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

There are quite a few attributes to amp-iframe. You don't need to know them all for Google Maps on AMP WordPress website to work but understanding them could be quite useful. The main attributes are as follows:

• src — for most part behaves like in a regular iframe;
• srcdoc, frameborder, allowfullscreen, allowpaymentrequest, allowtransparency, referrerpolicy — behaves the same way as they do on standard iframes. Will be set to negative by default.
• sandbox — all iframes created via amp-iframe will have this option with all options enabled by default. You can reduce these options by defining less like sandbox="allow-scripts".
• common attributes — all the common amp attributes like width and height. The full list could be found here.

Step-by-step Guide

The implementation of the code is simple. Just add the code, where you want Google Maps to be displayed within your html or php code. below you can see a simplified version of WordPress page template, which includes only header, footer and Google Maps implemented via amp-iframe.

<?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

• AMP.dev

Versions:
WordPress 5.4.1
AMP 1.5.3

Originally published at https://ampire.city on June 9, 2020.