Jonny Quinn

<p><strong>ThemeCanvas Locations for Elementor with OpenStreetMap</strong> lets you add beautiful, interactive maps to your Elementor pages using OpenStreetMap and Leaflet.js.</p>
<p>Add interactive OpenStreetMap maps in Elementor with the ThemeCanvas Locations widget.</p>
<p>This Elementor map plugin uses Leaflet.js to create fully customizable, responsive maps with unlimited location markers — no Google Maps API or tracking required.</p>
<p>Ideal for building store locator maps, contact maps, or multi-location layouts directly within Elementor, using fast, GDPR-compliant OpenStreetMap data.</p>
<h4>Features</h4>
<ul>
<li><strong>Manual Location Entry</strong> – Add unlimited locations directly in the Elementor editor</li>
<li><strong>Custom Pin Colors</strong> – Set unique colors for each location marker or set a global default</li>
<li><strong>Map Style Themes</strong> – Choose from 4 map styles: Standard, Dark, Humanitarian, or Terrain</li>
<li><strong>Interactive Popups</strong> – Rich popup content with WYSIWYG editor and customizable max width</li>
<li><strong>Customizable Maps</strong> – Control zoom level, map height, and scroll behavior</li>
<li><strong>Style Controls</strong> – Customize popup title, link, and background colors</li>
<li><strong>Coordinate Validation</strong> – Automatic validation ensures accurate map positioning</li>
<li><strong>OpenStreetMap Integration</strong> – Step-by-step instructions to find coordinates</li>
<li><strong>Fully Responsive</strong> – Works perfectly on all devices</li>
<li><strong>No API Key Required</strong> – Unlike Google Maps, completely free to use</li>
<li><strong>GDPR Compliant</strong> – No user tracking or data collection</li>
<li><strong>Lightweight</strong> – Only loads assets when widget is used</li>
</ul>
<h4>Pro Version</h4>
<p>Upgrade to Pro to unlock dynamic locations and advanced querying while keeping full compatibility with your existing manual maps.</p>
<ul>
<li><strong>Dynamic Locations</strong> from posts and custom post types (CPTs)</li>
<li><strong>Advanced Querying</strong> with include/exclude and taxonomy filters</li>
<li><strong>Auto-Fit Bounds</strong> for clean multi-location map displays</li>
<li><strong>Per-Location Pin Colors</strong> saved in post meta</li>
<li><strong>Built-In Coordinate Metabox</strong> for faster editor workflows</li>
</ul>
<p>Learn more: <a href="https://themecanvas.co.uk/" rel="nofollow ugc">ThemeCanvas Pro</a></p>
<h4>How to Use</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Edit any page with Elementor</li>
<li>Search for “ThemeCanvas Locations” widget</li>
<li>Drag it to your page</li>
<li>Click “Add Item” to create a location</li>
<li>Follow the OpenStreetMap coordinate instructions</li>
<li>Customize your map settings and styles</li>
<li>Publish!</li>
</ol>
<h4>Finding Coordinates</h4>
<p>The widget includes step-by-step instructions:</p>
<ol>
<li>Open <a href="https://www.openstreetmap.org" rel="nofollow ugc">OpenStreetMap</a></li>
<li>Search for your location</li>
<li>Right-click on the exact spot</li>
<li>Select “Show address”</li>
<li>Copy coordinates from the sidebar</li>
<li>Paste into the widget</li>
</ol>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.0 or higher</li>
<li>Elementor 3.0.0 or higher</li>
<li>PHP 7.4 or higher</li>
</ul>
<h4>Credits</h4>
<ul>
<li>Built by <a href="https://themecanvas.co.uk/" rel="nofollow ugc">Jonny Quinn</a></li>
<li>Powered by <a href="https://leafletjs.com" rel="nofollow ugc">Leaflet.js</a> 1.9.4</li>
<li>Map data © <a href="https://www.openstreetmap.org/copyright" rel="nofollow ugc">OpenStreetMap</a> contributors</li>
</ul>
<h3>Additional Information</h3>
<h4>Browser Compatibility</h4>
<ul>
<li>Chrome (latest)</li>
<li>Firefox (latest)</li>
<li>Safari (latest)</li>
<li>Edge (latest)</li>
<li>Opera (latest)</li>
</ul>
<h4>Performance</h4>
<ul>
<li>Lightweight – Only loads Leaflet library when widget is used</li>
<li>No duplicate asset loading – Smart asset management</li>
<li>Optimized for speed – Minimal overhead</li>
</ul>
<h4>Privacy</h4>
<p>This plugin does not:<br />
* Collect any user data<br />
* Use cookies<br />
* Connect to external services (except OpenStreetMap tiles)<br />
* Track users</p>
<h4>Developer Friendly</h4>
<ul>
<li>Clean, well-documented code</li>
<li>WordPress Coding Standards compliant</li>
<li>Namespaced (LMFE)</li>
<li>Extensible architecture</li>
<li>Translation ready</li>
</ul>
<h4>Translations</h4>
<ul>
<li>English (default)</li>
<li>Translation ready – .pot file included</li>
<li>Contribute translations via WordPress.org</li>
</ul>
<h4>Links</h4>
<ul>
<li><a href="https://themecanvas.co.uk/themecanvas-locations-for-elementor" rel="nofollow ugc">Plugin Homepage</a></li>
<li><a href="https://themecanvas.co.uk/docs/themecanvas-locations-for-elementor" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://wordpress.org/support/plugin/themecanvas-locations-for-elementor/" rel="ugc">Support Forum</a></li>
</ul>
<h3>License</h3>
<p>This plugin is licensed under GPL v2 or later.</p>
<p>ThemeCanvas Locations for Elementor with OpenStreetMap<br />
Copyright (C) 2024 Jonny Quinn</p>
<p>This program is free software; you can redistribute it and/or modify<br />
it under the terms of the GNU General Public License as published by<br />
the Free Software Foundation; either version 2 of the License, or<br />
(at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful,<br />
but WITHOUT ANY WARRANTY; without even the implied warranty of<br />
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the<br />
GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License along<br />
with this program; if not, write to the Free Software Foundation, Inc.,<br />
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.</p>


ThemeCanvas Locations for Elementor with OpenStreetMap

Add beautiful OpenStreetMap locations to Elementor with manual coordinate entry and custom pin colors.

Norbert Preining

<p>A simple, intuitive Google Map / OpenStreetMap plugin that installs as a Gutenberg block and a shortcode. Packed with useful features — geo-mashup of posts, KML overlays, marker icons, address geocoding — and fully free and open source. No subscriptions, no SaaS, no telemetry.</p>
<p><strong>Slick Google Map lets you embed maps using either:</strong></p>
<ul>
<li><strong>Google Maps</strong> — requires your own API key (configurable per-site).</li>
<li><strong>Leaflet / OpenStreetMap</strong> — no key required, free tile service.</li>
</ul>
<p><strong>Features:</strong></p>
<ul>
<li>Insert maps via the <strong>Slick Google Map</strong> Gutenberg block (with a multi-marker repeater) or the <code>[slick_map]</code> shortcode.</li>
<li>Classic Editor users get a <strong>Slick Map</strong> media button above the editor that opens a dialog with the same repeater.</li>
<li><strong>Marker geo-mashup</strong> — aggregate every post/page that has <code>lat</code>/<code>lng</code> custom fields onto a single map.</li>
<li><strong>KML and GPX overlays</strong> — drop a track or boundary onto any map. KML works on both providers; GPX is Leaflet-only.</li>
<li><strong>Address geocoding</strong> — write <code>address="Vienna, Austria"</code> instead of coordinates. Geocoded once per address and cached for 30 days. Uses your Google Geocoding API key if set, falls back to Nominatim/OSM otherwise.</li>
<li><strong>Coordinate formats</strong> — accepts decimal (<code>48.2082</code>) and DMS (<code>48°12'29.5"N</code>) in any marker.</li>
<li><strong>Marker icons</strong> — bundled set of 13 modern SVG pins (default, restaurant, lodging, cafe, bar, museum, airport, rail, shop, camera, mountain, castle, religious), plus your own URL. Legacy filenames from the 2014-era plugin are auto-aliased.</li>
<li><strong>Map controls</strong> — toggle the zoom / map-type / street-view / scroll-wheel / drag controls per map.</li>
<li><strong>Layers</strong> — Google bicycling and traffic overlays on demand.</li>
<li><strong>45° aerial tilt</strong> — passed through to Google as <code>tilt: 45</code>. Only takes visible effect on vector Map IDs, or on satellite/hybrid view over the specific cities where Google has 45° aerial imagery. No effect on raster maps or on Leaflet.</li>
<li><strong>Custom Google styles JSON</strong> — for branded maps without cloud-styled Map IDs.</li>
<li><strong>Wiki-style links</strong> in marker titles: <code>[[https://example.com|Display text]]</code> becomes a real link.</li>
<li><strong>Compatible with WordPress page caches</strong> — no per-visitor state in the rendered HTML, no AJAX side-effects.</li>
<li><strong>No fixed-cost dependencies</strong> — Leaflet / OSM is free; Google Maps is pay-as-you-go with a generous monthly free tier (≈28k map loads/month at no charge).</li>
</ul>
<p><strong>History:</strong></p>
<p>Slick Google Map 1.0 is a rewrite of the original plugin version 0.3, which was itself a fork of the <em>Comprehensive Google Map Plugin</em> by Alexander Zagniotov (2011–2014). Version 1.0.0 is a complete rewrite for WordPress 6.4+ and PHP 8.1+ — see the “Parity & rewrite” section below for what changed.</p>
<p>Insert a map via the <strong>Slick Google Map</strong> Gutenberg block, the <strong>Slick Map</strong> media button in the Classic Editor, or the <code>[slick_map]</code> shortcode. Optionally aggregate posts/pages that have <code>lat</code>/<code>lng</code> custom fields onto a single map (“geo-mashup”), and overlay a KML or GPX file.</p>
<h4>Shortcode</h4>
<pre><code>[slick_map lat="48.2082" lng="16.3738" zoom="13" height="400px" provider="leaflet"]
</code></pre>
<p>Geo-mashup of posts and pages:</p>
<pre><code>[slick_map mashup="post,page"]
</code></pre>
<p>KML or GPX overlay:</p>
<pre><code>[slick_map kml="https://example.com/track.kml"]
[slick_map provider="leaflet" gpx="https://example.com/hike.gpx"]
</code></pre>
<p>KML works with both providers; GPX requires the Leaflet provider (Google’s Maps JS API does not natively render GPX).</p>
<p>Markers with addresses and custom icons (nested <code>[marker]</code> children):</p>
<pre><code>[slick_map zoom="6"]
[marker address="Vienna, Austria" title="Home"]
[marker lat="52.5" lng="13.4" title="Berlin" icon="https://example.com/star.png"]
[/slick_map]
</code></pre>
<p>Each <code>[marker]</code> accepts <code>address</code> (geocoded once and cached) <strong>or</strong> explicit <code>lat</code>/<code>lng</code>, plus optional <code>title</code> and <code>icon</code>.</p>
<p>The <code>icon</code> attribute accepts either an <code>https://…</code> URL pointing to your own image, or one of the bundled short names: <code>default</code>, <code>restaurant</code>, <code>lodging</code>, <code>cafe</code>, <code>bar</code>, <code>museum</code>, <code>airport</code>, <code>rail</code>, <code>shop</code>, <code>camera</code>, <code>mountain</code>, <code>castle</code>, <code>religious</code>. Legacy filenames from the 2014-era plugin (<code>1-default.png</code>, <code>museum_naval.png</code>, <code>hotel_0star.png</code>, …) are auto-aliased to the nearest modern equivalent.</p>
<p>For geo-mashup markers, set a <code>marker_icon</code> custom field on each post to override the default pin for just that post.</p>
<h4>Map controls and layers</h4>
<p>Toggle Google’s built-in UI: <code>zoomcontrol</code>, <code>maptypecontrol</code>, <code>streetviewcontrol</code>, <code>scrollwheel</code>, <code>draggable</code> (all default <code>true</code>).</p>
<p>Google-only overlays: <code>showbike="true"</code>, <code>showtraffic="true"</code>.</p>
<p>45° aerial tilt: <code>tilt="45"</code>. Only takes visible effect on a Google vector Map ID, or in satellite/hybrid view over cities where Google has 45° imagery. Ignored elsewhere.</p>
<p>Custom Google map styles JSON: <code>styles='[{"featureType":"poi","stylers":[{"visibility":"off"}]}]'</code> (ignored when a Map ID is configured — cloud styling takes precedence).</p>
<h4>DMS coordinates</h4>
<p>Marker <code>lat</code> / <code>lng</code> values accept either decimal (<code>48.2082</code>) or DMS form (<code>48°12'29.5"N</code>).</p>
<h4>Wiki-style links</h4>
<p>Marker titles support <code>[[https://example.com|Display text]]</code> to embed real links, or <code>[[Plain Page]]</code> for unlinked highlighted text.</p>
<h4>Geocoding</h4>
<p>When a Google Maps API key is configured the plugin uses the Google Geocoding API (same Cloud project as Maps; enable <strong>Geocoding API</strong> alongside Maps JavaScript). Otherwise it falls back to Nominatim/OpenStreetMap. Results are cached in a 30-day transient per address, so each unique address is geocoded at most once.</p>
<h4>Privacy</h4>
<p>Using the Google provider loads scripts and tiles from <code>maps.googleapis.com</code>. Using the Leaflet/OSM provider loads tiles from <code>tile.openstreetmap.org</code> and the Leaflet library from <code>unpkg.com</code>. Choose the provider that matches your site’s privacy posture.</p>
<h3>Parity & rewrite</h3>
<p>Version 1.0.0 is a complete rewrite of the 2015 codebase. The old plugin’s PHP and JavaScript were written against WordPress 3.6 and PHP 5, used the long-retired Google JSAPI loader, geocoded addresses on every page view, shipped 300+ marker PNGs of mixed provenance, and had several unauthenticated AJAX write paths in <code>wp-admin</code>. Re-issuing it as-is on a modern stack was not viable, so the codebase was rewritten from scratch around the same shortcode vocabulary.</p>
<p><strong>What you keep.</strong> Posts written against the very old <code>[google-map-v3 ...]</code> shortcode still render. The plugin registers <code>google-map-v3</code> as a back-compatibility alias that maps the still-useful attributes (<code>width</code>, <code>height</code>, <code>zoom</code>, <code>kml</code>, <code>maptype</code>, <code>addmarkermashup</code>, <code>addmarkerlist</code>, <code>maptypecontrol</code>, <code>zoomcontrol</code>, <code>streetviewcontrol</code>, <code>scrollwheel</code>, <code>draggable</code>, <code>showbike</code>, <code>showtraffic</code>, <code>tiltfourtyfive</code>, <code>styles</code>) onto the new renderer. The Google provider is selected by default for these legacy shortcodes, the old <code>addmarkerlist="addr{}icon{}desc|..."</code> packed format is parsed transparently, and the most-used legacy icon filenames (<code>1-default.png</code>, <code>museum_naval.png</code>, <code>hotel_0star.png</code>, …) are aliased to the bundled modern SVG set.</p>
<p><strong>What’s gone for good.</strong> Some features can’t come back because the upstream services or APIs disappeared:</p>
<ul>
<li><code>panoramio</code> — Google shut Panoramio down in November 2016.</li>
<li><code>pancontrol</code> — Google removed <code>panControl</code> from the Maps API in 2017; there is no flag to set anymore.</li>
<li><code>google.maps.KmlLayer</code> — deprecated April 2026; replaced internally with a <code>fetch</code> + KML<span aria-hidden="true" class="wp-exclude-emoji">→</span>GeoJSON renderer.</li>
<li>The old <code>https://www.google.com/jsapi</code> loader — retired by Google in 2017; the modern loader requires a user-supplied API key.</li>
</ul>
<p><strong>What’s not yet back.</strong> Marker clustering, directions/routing, geolocation marker, and marker drop/bounce animations are reachable from the rewrite but not yet wired up. See <a href="https://github.com/norbusan/slick-google-map-plugin/blob/master/PARITY.md" rel="nofollow ugc">PARITY.md</a> on GitHub for the full, categorised list (restored / new / missing-but-doable / deprecated-by-upstream / deliberately-dropped) plus a migration cheat-sheet.</p>
<p><strong>What was dropped on purpose.</strong> The sidebar widget (Classic Widgets is in long-term legacy mode), the saved-shortcodes admin library (it was the largest single security surface in the old plugin), and the 300+ marker PNG library (replaced with 13 modern SVGs plus a legacy-filename alias map) — see <code>PARITY.md</code> for the rationale on each.</p>
<h3>Contributors</h3>
<h4>Current maintainer</h4>
<ul>
<li>Norbert Preining</li>
</ul>
<h4>Original author of the upstream “Comprehensive Google Map Plugin” (2011–2014)</h4>
<ul>
<li>Alexander Zagniotov — thanks for the original work, released under GPL.</li>
</ul>
<h4>Additional contributors</h4>
<ul>
<li>Honza Rameš</li>
</ul>


Slick Google Map

Embed Google Maps (with your own API key) or OpenStreetMap/Leaflet maps via shortcode or Gutenberg block.

ThemeCanvas Locations for Elementor with OpenStreetMap vs Slick Google Map