How to add Open Street Map to any page or post

Embed Open Street Map on your uSkinned Site Builder website using one of the many embed HTML options provided.

Get the OpenStreetMap embed code

Step 1

Go to OpenStreetMap and find the address you would like to share.

Step 2

On the right-hand side, locate the 'Share' icon and button, and click this to display a slide-out panel.

Step 3

From the tab options, click on 'HTML', then click to copy the code provided.

Display OpenStreetMap with the Embed Code component

Step 1

Log in to the uSkinned Site Builder CMS.

Step 2

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

Step 3

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

Step 4

In the field provided, paste the HTML you copied from OpenStreetMap.

<iframe width="450" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.4622239479795099%2C39.41359954473846%2C-0.2905625710263849%2C39.525575588307476&amp;layer=mapnik&amp;marker=39.469610091927976%2C-0.37639325950294733" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=39.4696&amp;mlon=-0.3764#map=13/39.4696/-0.3764">View Larger Map</a></small>

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.

Step 5

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

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

More ways to display OpenStreetMap

There are a variety of places you can embed OpenStreetMap 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