What is Open Street Map?

Open Street Map is an editable map of the whole world that is open source, user-contributed, and free to use. OpenStreetMap includes data about roads, buildings, addresses, shops and businesses, points of interest, railways, trails, transit, land use and natural features, and much more.

How to Add Open Street Map?

You can add the Open Street Map addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add the Open Street Map.

Open Street Map Settings

When you click on the addon, the addon inline editor will open up. You can access the Map settings from there and customize it to fit your needs. 

Map

Height: You can define the map height (default 400px) here by using the slider, width is always responsive and takes 100%.

Style: The addon offers several Map Styles that you can choose from the drop-down menu. The most popular (and similar to Google Maps) is Voyager style.

Locations: You can add multiple locations on the Open Street Map. Click on the +Add button to add a new location. 

Edit Location

Click on the edit button beside each location to access the location item settings. 

Title: Use this field to give a title to your location item.

Latitude, Longitude: Set location latitude & longitude divided by a comma. Get your address latitude & longitude from here: https://www.openstreetmap.org/.

Notice! No space between numbers, only one comma between, and only dots in numbers.

Here are example location numbers that you can use (in case of a problem):

• 39.8992,116.3933
• 48.8523,2.3504

Marker Popup Text: Marker Popup Text displays in a popup window above the map, at a given location (marker).

Custom Marker: A marker is a visual representation of a specific coordinate on a map. You can upload images here to use as a custom marker. 

Options

Map Zoom: Set how large or small the contents of a map appear in the map view.

Enable Mouse Wheel Zoom: Enable to let the users use the wheel on the mouse to zoom in and out.

Enable Drag: Enable to drag the map view to view the location you want.

Show Zoom Controller: Show/hide the Zoom controls to zoom in and out of the map 

Show Attribution: Show/hide the copyright note (Attribution) of the map.

Main reasons why a map may not work

1. Wrong Latitude and Longitude values. Read the tips from the "5. Edit location" section part: Latitude and Longitude.
2. Map style that is not supported anymore by OSM. Change to a different one.
3. That area is not fully included in Maps, and Zoomed too much does not show details.

Keep in mind that we are not the developers of OSM. We used the code provided by them.