This tutorial demonstrates a quick way to code AMP compatible Google Maps on WordPress website.
<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.
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>
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.
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:
sandbox="allow-scripts"
.width
and height
. The full list could be found here.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(); ?>
Originally posted on 6/9/2020
WordPress 5.4.1
AMP 1.5.3