Dynamic.ooo OpenStreetMap Widget

Showing a map on the contact or about page is pretty common. Likewise a map makes a lot of sense for an office, restaurant, or event. Google maps has been the de facto standard but in 2018 Google started requiring an API key. The rub is that to get an API key you must setup an account complete with billing information. Google provides a generous 15,000 views for free each month, but supplying a credit card is a barrier to entry for some people and if you are building sites for clients, asking them for their credit card information can be awkward.

OpenStreetMaps is a free alternative to Google maps, no account required. OpenStreetMaps may not have as many features as Google maps, but it is easy to setup and in many cases it will be good enough. Dynamic Content for Elementor quietly added a new OpenStreetMap widget to their offering. This is a quick walk-through to show you how to use it.

Video Version

Testing Site

I have a test site with the latest versions of Elementor core and Dynamic Content for Elementor installed. I also have the free Blocksy Theme installed.

Walk-Through

I create a new page and call it “DCE Contact Us”. I set the template to be Elementor Canvas and go into the Blocksy page settings and disable the page title.

In the Elementor Editor I click on the folder icon to open the template library.

I type in “contact” to filter the list of templates to show the contact us pages. There are a lot of templates for this and looking over them I see most of them have a map.

I click on the Cake Shop demo contact page and import it.

When it was imported I saw that the address in the left column isn’t even the address used for the map. Oh well.

I delete the map widget from the right column.

I search in the widget list and find the OpenStreetMap widget.

I drop the widget into the empty column. It has the Dynamic address set.

I copy the address from the blurb to the left of the page and paste it into the widget location field. The new location shows. I adjust the zoom and height. Note the icon for accessing dynamic data. This allows you to pull the a location dynamically, which provides some nice flexibility. You can also use the regular Elementor margins, padding, and other layout and styling features, if needed.

Here is the page on the front-end. It was that easy.

Discussion and Conclusions

If you compare the Google Map and OpenStreetMap widgets you’ll see that the Google map is more what we are used to seeing and the OpenStreetMap looks a bit more basic. The OpenStreetMap API does support more features than are currently available in the widget. Another comparison with the Dynamic Content for Elementor Google Map widget is that the Google version allows you to show a marker for more than one location. It would be nice to be able to show markers for more locations when using the OpenStreetMap widget.

This is the first version of the widget and I believe that the Dynamic Content for Elementor developers plan to add the ability for multiple locations and perhaps more customization options. Still, even with the limitations the OpenStreetMap widget is extremely easy to use and the dynamic data options means you can use it in templates.

It is nice to have the OpenStreetMap option so that we don’t have to go through setting up an involved Google project. Also, we didn’t need to add any billing information to show a map on our contact page. Overall, I was happy with the OpenStreetMap widget. It is one of the features that just works.