How to Use Open Street Map Widget

How to Use Open Street Map Widget

The documentation below is going to cover all the things about How to use Open Street Map widget. And this widget is the best and easiest way of loading the street map on the website. So, Let’s go forward.

To Insert widget

To insert a widget into the section is a matter of fun. Simply, drag and drop your widget you want to use for your project. As you see in the screenshot above.

Note: By inserting the Open Street Map widget, you will be able to load data from the open street map server.
But, if you’re thinking a huge number of people will access the map, then you might go for the Mapbox. The Mapbox server will provide you access to a huge number of people.

And for that, You’ve to go to WordPress Dashboard > Element Pack > API Settings.
After that, you should hit the Click Here and create an account on the Mapbox platform for getting the access token of the Mapbox server.

Finally, copy the access token, paste, and hit the Save Settings button. As you see in the image example above. From where you’ll be able to manage more access for the users.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Open Street Map

Just, go to the Content tab > Open Street map. From here, you’ll be able to manage the zoom effect and height of the map using the scrollbar Zoom and Map Height.

Moreover, if you want to hide the zoom effect. You might use Zoom Control on/off option. See the screenshot above.


Come to the Content tab > Marker.

You might add more markers going to the Marker section. Just, click on the button +ADD ITEM.

The most important thing is that you can edit every single repeater. you might set here Title, Latitude, Longitude, Content.
Another thing is you can upload a custom marker. Look at the image above.

Style Tab

To style, something by the Elementor is really a matter of fun. So, let’s see how to style the web content using the page builder plugin.


Go to the Style tab > Tooltip.

From this section, you can give style to the tooltip. Hit the marker seen on the map, you will find tooltip. Then style the tooltip.

Zoom Control

Simply, go to the Style tab > Zoom Control.

In this section, you can add Icon color, select Background Type, Border Type, and Width as well.

In addition, you might add Background color, Radius, Bar Color, and also adjust the Bar Width. Just take a look at the image.

Video Assist

In Conclusion, though our Open Street Map widget by Element Pack contains some tricky parts, hopefully, in the end, you have got the solution. You can stream the video clip above. And to get more ideas about this, visit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.