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:

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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

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

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.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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

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

Happy Clients

Enjoying ultra-fast mobile-first AMP websites for their competitive businesses.