How to embed Google Maps to Power Pages

According to Google there are over 5 million active apps and websites are using Google Maps as it’s a great way to direct end-users to a location. Google maps can be used for showing the office of a company or directions to a place for an event. So let’s look at a couple of ways of embedding Google Maps to Power Pages.

I apologise in advance to Bing Maps enthusiasts 💔

  Note

We’re going to keep it more straightforward by not using the Google Maps API however if you need more advanced features including heatmaps, calculating distances, and more use these libraries.

Grab your iframe  

• Go to Google Maps
• Enter the address in the search bar, then click the search button
• Click on the Share icon
• Choose Embed map
• Select the size of the map from the drop-down
• Select and copy the HTML iframe embed code

Method 1: simple iframe embed  

• Go to the Power Pages website builder
• Add an iframe component

• Remove the iframe tags from the value you copied in step 1
• Place the refined URL into the iframe component value

One good point with this option is that you don’t have to consider adding code to make the map responsive as it seems to cope pretty well with different types of devices (phones or tablets).

Method 2: Responsive iFrame with Code  

• Create a content snippet to store the Google Maps Footer
• In the content snippet paste the full iframe URL and remove the height and width attributes in the value area so that we can make it responsive.

<div class="responsive-iframe-container">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d403237.7352856478!2d-119.88076498839624!3d37.85339187540183!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8096f09df58aecc5%3A0x2d249c2ced8003fe!2sYosemite%20National%20Park!5e0!3m2!1sen!2suk!4v1716237613653!5m2!1sen!2suk"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
  >
  </iframe>
</div>

Add the below CSS to your stylesheet to help to make it responsive.

        .responsive-iframe-container {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 56.25%; /* 16:9 aspect ratio */
          overflow: hidden;
        }

        .responsive-iframe-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 0;
        }

VOILA! we have embedded a Google Map to the footer of a website using code.

Conclusion  

😁Thanks for reading, embedding Google Maps Power Pages sites is a great way to improve user experience by providing clear and accessible directions. Whether you choose the straightforward iframe method or a more advanced approach, these techniques will ensure your maps work with Power Pages.

Have a great day!