Unscuzzy

<p>This plugin adds a Leaflet map field to the Advanced Custom Fields plugin.</p>
<h4>Create the backend field</h4>
<p>You can add a leaflet map field using ACF like the Google Map field.</p>
<h4>Diplay the map in front-end</h4>
<p>Uses the classic ACF <code>get_field('field_name')</code> function to get field data (lat, lng, address & zoom).</p>
<p>Warning, the <code>get_field()</code> function does not display the map itself, for this, use the <a href="https://leafletjs.com/examples/quick-start/" rel="nofollow ugc">leaflet js map</a> documentation directly</p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:<br />
* ACF 5 only (Pro & Free)</p>
<p>NB: If you’re using the ACF 4 Free version, you can upgrade to version 5 step by step <a href="https://www.advancedcustomfields.com/resources/upgrade-guide-version-5/" rel="nofollow ugc">on this page</a></p>


Advanced Custom Fields: Leaflet Map Field

Adds a Leaflet map field to the Advanced Custom Fields plugin.

Chandni Patel

Niriksha Patel

<p>Easy to use, WordPress Map plugin based on Open Street Map and Leaflet with custom markers images, descriptions and links. Add maps to your WordPress pages, posts and custom post types quickly and easily.</p>
<p>Display map automatically before or after content, or place the map within the page content using gutenberg block, shortcode or widget.</p>
<p>Choose your own images to display as markers. Decide what happens on marker click, display a popup or open a link.</p>
<h3>Free Version</h3>
<ul>
<li>Display Open Street Maps using Leaflet on your WordPress.</li>
<li>Super easy to use, no coding required.</li>
<li>No API keys required to display maps on your WordPress website.</li>
<li>Interactive map preview.</li>
<li>Search a location to add pin.</li>
<li>Preview all the changes on the fly in admin panel.</li>
<li>Click map to add page markers. Drag markers to the exact location.</li>
<li>Use custom images as map pins to give your map a personalized touch.</li>
<li>Define your height and width and zoom level for the map.</li>
<li>Decide what happens on marker click. Open a popup or redirect to a URL.</li>
<li>Add maps to custom post types.</li>
<li>Responsive maps.</li>
<li>Display multiple maps on a single page.</li>
<li>Display map in the sidebar.</li>
<li>Gutenberg blocks to display map within the content.</li>
<li>Map widget functionality.</li>
<li>Shortcode functionality. </li>
<li>Maps with multiple Marker.</li>
<li>Hooks and filters.</li>
<li>Fullscreen view.</li>
<li>CSV import for multipin map.</li>
<li>Note: Grayscale is not supported in IE apart from IE Edge.</li>
</ul>
<h3>Demos</h3>
<ul>
<li><a href="http://wp-mapit.chandnipatel.in/demos/map-before-content/" rel="nofollow ugc">Map before content.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/demos/map-after-content/" rel="nofollow ugc">Map after content.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/demos/custom-map-within-content/" rel="nofollow ugc">Map within content.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/demos/custom-map-sidebar/" rel="nofollow ugc">Map in the sidebar.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/demos/map-with-multiple-pins/" rel="nofollow ugc">Map with multiple pins.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/documentation/hooks-filters/" rel="nofollow ugc">Hooks & Filters.</a></li>
</ul>
<h3>Documentation</h3>
<ul>
<li><a href="http://wp-mapit.chandnipatel.in/documentation/installing-wp-mapit-plugin/" rel="nofollow ugc">Installing WP MapIt plugin.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/documentation/setting-up-the-plugin/" rel="nofollow ugc">Setting up the plugin.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/documentation/displaying-map-on-the-page/" rel="nofollow ugc">Displaying map on the page.</a></li>
<li><a href="http://wp-mapit.chandnipatel.in/documentation/creating-a-multi-pin-map/" rel="nofollow ugc">Creating a multipin map.</a></li>
</ul>
<h3>Credits</h3>
<ul>
<li><a href="https://leafletjs.com/" rel="nofollow ugc">Leaflet</a></li>
<li><a href="https://www.openstreetmap.org/" rel="nofollow ugc">Open Street Maps</a></li>
<li><a href="https://github.com/yafred/leaflet-responsive-popup" rel="nofollow ugc">Yet Another Fred</a></li>
<li><a href="https://github.com/elmarquis/Leaflet.GestureHandling" rel="nofollow ugc">elmarquis</a></li>
<li><a href="https://www.linkedin.com/in/vschoerg/" rel="nofollow ugc">Veith Schoergenhummer</a></li>
<li><a href="https://github.com/Leaflet/Leaflet.fullscreen" rel="nofollow ugc">Mapbox – Fullscreen control</a></li>
</ul>


WP MapIt

Easy to use, WordPress Map plugin based on Open Street Map and Leaflet with custom markers images, descriptions and links.

Advanced Custom Fields: Leaflet Map Field vs WP MapIt