AMP Google Maps Integration Example to Wordpress via AMP-Iframe

AMP Google Maps Integration Example to Wordpress via AMP-Iframe

, ,

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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.

What Will I Learn?

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

Requirements:

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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.

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>

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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.

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:

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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: Contacts
*/?>
<?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

Share.
the.Word

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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 Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu 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.