Table Of Contents

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 the Elementor Open Street Map 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.

Create access token for the Open Street Map widget

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.

openstreetmap 2 - BdThemes

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 in adjusting google maps settings.

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

Open Street Map

openstreetmap 3 - BdThemes

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.


openstreetmap 4 - BdThemes

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 for the maps google map. 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 Open Street Map widget using the page builder plugin.


openstreetmap 5 - BdThemes

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

openstreetmap 6 - BdThemes

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 Bdthemes 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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.