AMP Google Maps Integration Example to WordPress via AMP-Iframe

What Will I Learn?

This tutorial 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

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.

Requirements for AMP-iframe

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

Sometimes, amp-iframe tends not to work as it is intended to. It looks like a bug but it is actually not. You can learn to fix AMP-iframe bug here.

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.

Useful links

• AMP.dev

Originally posted on 6/9/2020
WordPress 5.4.1
AMP 1.5.3