How to add OpenStreetMap to elementor

Elementor OpenStreetMap is a new widget that will allow you to create amazing interactive Maps without authentication or other API key.
It is a global mapping project that you can implement by following this tutorial.

Table of Contents

How to activate OpenStreetMap

The plugin Elementor is installed and active.

The plugin EAC components is installed and active.

From the settings panel you have to drag & drop the ‘OpenStreetMap‘ icon on the panel preview.

How to define the location and center the map

By default the map is centerred on Paris.

By activating ‘Locate the visitor‘, the system will search for their location by their IP address but for mobiles, the location accuracy of the city is relative to the IP addresses distributed by the mobile operators
The title is automatically filled in with the information of the place.

The ‘Search an address‘ toggle displays a powerful search engine.
Enter an address in the corresponding field and press the ‘Search’ button.
If the system finds the coordinates of the place name it will display the latitude and longitude of the location in the appropriate fields and reload the widget.
You can then enter the title and content of the tooltip.

OSM map default
OSM map IP adresse

Add markers and tooltip content

In the Markers section, you can add more than one marker to Elementor OpenStreetMap Widget.
As for centering the map, you have the same search engine to display the marker at the address indicated.
Of course you can directly enter the coordinates in the corresponding fields.
In the second tab enter the title and content of the tooltip as well as the choice of the type of associated icon.

OSM map marker adresse
OSM map marker content

Define settings and modify controls

The ‘Settings‘ section groups the zoom level, the height of the map and allows you to select the default layer to display.
You can allow the system to display the best zoom level by selecting the ‘Auto zoom‘ toggle.
With the section ‘Controls‘ you can modify the general behavior of the controls. Zoom position, zoom with the mouse wheel, dragging map…

OSM controls

Apply styles to map and tooltip title

Apply styles to the map as well as to the tooltip title.

OSM styles

2 thoughts on “How to add OpenStreetMap to elementor”

Leave a Comment