James Arama

garbowza

Quoter - Niklas

A free Elementor Map Widget that utilizes <a href="https://www.openstreetmap.org/about" rel="nofollow ugc">Open Street Map</a>. Comes with features like adding multiple markers, and choosing from a library of custom tiles to change the look and feel. Requires <a href="https://wordpress.org/plugins/elementor/" rel="ugc">Elementor Page Builder</a> Plugin Version: 3.5+
This plugin is <a href="https://github.com/flopperj/osm-map-elementor" rel="nofollow ugc">open sourced</a> so feel free to contribute to it by: 
1. Adding a topic/issue <a href="https://github.com/flopperj/osm-map-elementor/issues" rel="nofollow ugc">here</a> 
2. Submitting a pull request with any well-written code that implements the desired feature.
<h3>Usage</h3>
<ol>
<li>Make sure that Elementor plugin is installed</li>
<li>Add optional API Keys to the settings page:
<ul>
<li>Google Maps API Key (Used to autocomplete and update the coordinates of markers in a map. Need help to get a Google map API key? <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" rel="nofollow ugc">Read this resource</a>)</li>
<li>Mapbox Access Token (Used for custom tiles. Need help to get a Mapbox Access Token? <a href="https://docs.mapbox.com/help/how-mapbox-works/access-tokens/" rel="nofollow ugc">Read this resource</a>)</li>
<li>Geoapify API Key (Used for custom tiles. Need help to get a Geoapify API key? <a href="https://www.geoapify.com/maps-api/" rel="nofollow ugc">Read this resource</a>)</li>
</ul>
</li>
<li>Add OSM Map widget to your elementor page and have fun 🙂
<ul>
<li>Find OSM Map widget from elements listing and add it to your elementor page</li>
<li>Add multiple markers, change Zoom level style them accordingly</li>
<li>Editing the markers: A marker’s settings contains Title, Location, Coordinates, Description, Button Text, and Button URL fields. Of those fields, only the Coordinates field is required to render a marker on the map. If you have a Google Maps API key added, you’ll be able to automatically populate the coordinates field without manually doing so.</li>
<li>Change Tiles from style section requires <a href="https://docs.mapbox.com/help/how-mapbox-works/access-tokens/" rel="nofollow ugc">Mapbox Access Token</a> and <a href="https://www.geoapify.com/maps-api/" rel="nofollow ugc">Geoapify API Key</a></li>
</ul>
</li>
</ol>

OSM Map Widget for Elementor

A free Elementor Map Widget that utilizes Open Street Map. Comes with features like adding multiple markers, and choosing from a library of custom til …

Kirill Zhuchkov

drakkar.one lets you add a map to your WordPress site without Google Maps, without API keys, and without setting a single cookie.
Why use this instead of Google Maps?
<ul>
<li>No Google Cloud billing account or API key required</li>
<li>No cookies — so no cookie banner needed for the map</li>
<li>GDPR/DSGVO-compliant: map tiles served from EU infrastructure, no visitor data collected</li>
<li>No competitor businesses shown on your map</li>
<li>Lightweight — a fraction of the size of a Google Maps embed</li>
<li>Flat monthly pricing with a free tier (no per-load billing surprises)</li>
</ul>
Map tiles are based on OpenStreetMap and served from Cloudflare’s edge network, so they load fast everywhere.
How it works: Create a map widget at <a href="https://dash.drakkar.one" rel="nofollow ugc">dash.drakkar.one</a>, copy the widget ID, and drop it into a Gutenberg block or shortcode. That’s it.
Built by a former HERE engineer who worked on navigation systems for BMW, Audi, VW, and Porsche.
<h3>Usage</h3>
<h4>Gutenberg Block</h4>
Search for drakkar.one map in the block inserter (Embed category). Paste your widget ID and set the height.
<h4>Shortcode</h4>
<pre><code>[drakkar-map id="abc123"]
</code></pre>
Optional attributes:
<ul>
<li><code>height</code> — Map height in pixels (default: <code>400</code>)</li>
<li><code>lang</code> — Language code for map labels (auto-detected if omitted)</li>
</ul>
Example with all attributes:
<pre><code>[drakkar-map id="abc123" height="500" lang="en"]<h3>External services</h3>
</code></pre>
This plugin relies on the drakkar.one service to display map widgets. When a page containing the widget is loaded, the visitor’s browser will:
<ol>
<li>Load the widget script (<code>w.js</code>) from <code>cdn.drakkar.one</code>.</li>
<li>Fetch the widget configuration (map center, zoom, pins, style) from <code>cdn.drakkar.one</code>.</li>
<li>Load vector map tiles from <code>tiles.drakkar.one</code>.</li>
<li>Load map fonts and sprites from <code>cdn.drakkar.one</code>.</li>
</ol>
No cookies are set. No personal data is collected or transmitted to drakkar.one by the widget. Standard HTTP requests (IP address, user agent) are processed by Cloudflare’s CDN infrastructure as part of content delivery.
This service is provided by drakkar.one (Kirill Zhuchkov, Germany):
<ul>
<li><a href="https://drakkar.one/terms" rel="nofollow ugc">Terms of Service</a></li>
<li><a href="https://drakkar.one/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>

drakkar.one map

A privacy-friendly map widget. No Google, no API keys, no cookies. GDPR-compliant out of the box.

OSM Map Widget for Elementor vs drakkar.one map