How to use Google Maps on the pages?

Siteoly supports usage of Google Maps on Detailed Pages and on Home Page (Below the Header).

How to use Google Maps on Detailed Pages?

Get your Google Maps Embed code that looks as below.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3349.9379389868927!2d-97.04252388501035!3d32.89980908093507!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c2a660d222aa7%3A0x73323f5e067d201c!2sDallas%2FFort%20Worth%20International%20Airport!5e0!3m2!1sen!2sin!4v1650602306789!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  1. Go to your 'DetailedPages' sheet in Google Sheet and add your code inside the Markdown/HTML code as below in Column D. See sample screenshot as below.

Now, use 'live test' and check the Detailed Page to see the Google Map on the Detailed page as below.

How to use Google Maps on Home Page?

Get your Google Maps Embed code that looks as below.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3349.9379389868927!2d-97.04252388501035!3d32.89980908093507!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c2a660d222aa7%3A0x73323f5e067d201c!2sDallas%2FFort%20Worth%20International%20Airport!5e0!3m2!1sen!2sin!4v1650602306789!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  1. Go to your 'Body-Text' sheet in Google Sheet and add your code inside the Markdown/HTML code as below in Column C. See sample screenshot as below.

For the 'Body-Text' to work, always makes sure the 'Display Text Content' (Row 10) is set to 'Yes' in 'Body' sheet.

Now, use 'live test' and check the Home Page to see the Google Map on the Home Page under the Header as below.

Note: Always use 'live test' link to verify the latest changes.

Last updated