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.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.