Skip to main content Skip to footer

How to add Google Maps to any page or post

Embed Maps from Google on your uSkinned Site Builder website using one of the many embed HTML options provided.

Get the Google Maps embed code

Step 1

Go to Google Maps and find the address you would like to share.

Step 2

Locate the 'Share' icon and button, click this to display an overlay box.

Step 3

From the tab options, click on 'Embed a map', then click 'Copy HTML'.

Display Google Maps with the Embed Code component

Step 1

Log in to the CMS.

Step 2

On any page or blog post, locate the label 'Main content' and click 'Add content'.

Add a modular component with uSkinned for Umbraco.

Step 3

In the slide-out panel, select 'Embed Code'.

Component options with uSkinned.

Step 4

In the field provided, paste the HTML you copied from Google Maps.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2239.2048733571346!2d-4.260297483833605!3d55.85911178058191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4888469dd79d903b%3A0xef65bf326caa4a56!2sGlasgow%20Central%20Station!5e0!3m2!1sen!2suk!4v1629453118297!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

We would recommend at this point updating the width to 100%. This will ensure your map is fully responsive.

width="100%"

Now click submit to close the slide-out panel.

Paste your embed code.

Step 5

In the bottom right of the screen, click "Save and publish".

Now go to the page in the frontend of your website to see the results.

More ways to display Google Maps

There are a variety of places you can embed Google Maps on your uSkinned Site Builder website.

You can try this out using the same steps for:

— Pods component > Embed Code
— Split component > Embed Code block
— Global components > Embed Code
— Global pods > Embed Code
— Extra Content > Top Components > Embed Code
— Extra Content > Bottom Components > Embed Code
— Extra Content > Pods > Embed Code
— Footer pods > Embed Code

#h5yr

Step 1

Sign up

Start a free trial of Site Builder.

Step 2

Design

Tailor the look and feel with the Visual Designer to suit your brand.

Step 3

Create

Add content with built-in eCommerce and third-party integrations.

Step 4

Host

World-class and secure hosting backed by Microsoft Azure.