Jonas Hjalmarsson

web111se

<p>A multi-point Google Maps field for Advanced Custom Fields. Click to add markers, drag to reposition, right-click to remove.</p>
<p>The plugin reads your existing Google Maps API key from ACF’s global setting (<code>google_api_key</code>), so no extra configuration is needed if you already use ACF Map fields. If you don’t have one set, you can also provide a key via the <code>acf_multi_coords_gmaps_key</code> filter.</p>
<p>Originally inspired by the single-point <a href="https://wordpress.org/plugins/advanced-custom-fields-coordinates/" rel="ugc">ACF: Coordinates</a> field by Stupid Studio; this plugin extends the idea to multiple points per field.</p>
<p>Licensed under the GNU General Public License v3. See <code>gpl.txt</code> for details.</p>
<h3>Usage</h3>
<p>When you create a new custom field with ACF, set the field type to <strong>Multiple Coordinates map</strong>. The coordinates chooser will then show up when you edit a post with your custom fields.</p>
<p>The tool adds a point on each click on the map. To remove the point, select the “Remove Coordinate” button and click a point. You can also show the points as a polygon on the map with the “Show area on map” button, and show the actual coordinates in a semicolon-separated list with the “Show coordinates” button. The search field is only there to quickly take you to different places on the map — not to add the actual points.</p>
<p>To get the coordinates data on your frontend, simply request the field value and you get the coordinates in a latitude/longitude array plus the zoom level, like this:</p>
<pre><code><?php
$values = get_field('*****FIELD_NAME*****');
print_r($values);
/* gives you something like:
    Array
    (
        [coords] => Array
            (
                [0] => Array
                    (
                        [lat] => 57.156363766336
                        [lng] => 16.364327427978
                    )
                [1] => Array
                    (
                        [lat] => 57.159612809986
                        [lng] => 16.370315551758
                    )
            )
        [zoom] => 13
    )
*/
?>
</code></pre>


Advanced Custom Fields: Multiple Coordinates

A multi-point Google Maps field for Advanced Custom Fields. Click to add markers, drag to reposition, right-click to remove.

Levels Branding and Webdevelopment

<p>This plugin adds a custom ACF field type that allows users to click on an image and capture X/Y coordinates. Perfect for creating interactive image maps, product hotspots, or any feature requiring precise coordinate-based positioning.</p>
<p><strong>This is a fork of the original ACF Image Hotspots Field by Andrew Rockwell</strong>, enhanced with full support for ACF blocks in the Gutenberg editor.</p>
<h4>Key Features</h4>
<ul>
<li>Click on an image to capture precise X/Y coordinates</li>
<li>Supports both pixel-based and percentage-based coordinates</li>
<li>Links to existing ACF image fields</li>
<li>Visual marker shows the selected position</li>
<li>Works in regular ACF field groups AND ACF blocks</li>
<li><strong>NEW:</strong> Full Gutenberg block editor compatibility</li>
<li>Compatible with ACF 5.8+</li>
</ul>
<h4>What’s New in This Fork</h4>
<p>This fork adds critical improvements for modern WordPress development:</p>
<ul>
<li><strong>Gutenberg Block Support:</strong> Works seamlessly in ACF blocks within the Gutenberg editor</li>
<li><strong>Event Capture Fix:</strong> Solves the issue where Gutenberg intercepts click events</li>
<li><strong>Improved DOM Search:</strong> Enhanced field discovery in complex block structures</li>
<li><strong>Enhanced Visibility:</strong> Fixed z-index and marker visibility in block contexts</li>
<li><strong>Auto-Refresh:</strong> Automatically updates block previews when coordinates change</li>
</ul>
<h4>Original Plugin</h4>
<p>Original plugin by <strong>Andrew Rockwell</strong> – Thank you for creating this excellent field type!</p>
<p>This fork maintains 100% backwards compatibility with the original while adding modern editor support.</p>
<h4>How to Use</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Create a custom ACF field of type “Image Mapping”</li>
<li>In field settings, enter the name of an existing ACF image field to link to</li>
<li>Add an image to the linked field</li>
<li>Click on the image in the hotspot field to capture coordinates</li>
<li>Coordinates are stored as comma-separated strings (e.g., “150px,200px” or “45.5%,60.2%”)</li>
</ol>
<p>Works in both ACF field groups and ACF blocks!</p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:</p>
<ul>
<li>ACF 5.8+</li>
<li>WordPress 5.8+</li>
<li>Gutenberg block editor</li>
<li>Classic editor</li>
<li>PHP 7.2+</li>
</ul>
<h3>Credits</h3>
<p><strong>Original Plugin:</strong> Andrew Rockwell (rockwell15, eridesign)<br />
<strong>Gutenberg Fork:</strong> Levels Branding and Development</p>
<p>Thank you to Andrew Rockwell for creating the original plugin!</p>
<h3>Support</h3>
<p>For issues specific to this plugin:<br />
* GitLab: https://gitlab.com/levels-dev/plugins/advanced-custom-fields-image-hotspots-field-fork</p>
<p>For general ACF questions:<br />
* ACF Documentation: https://www.advancedcustomfields.com/resources/</p>
<h3>Other Plugins by Levels</h3>
<p>Check out our other WordPress plugins:</p>
<ul>
<li><a href="https://wordpress.org/plugins/ready-made-oxygen-integration/" rel="ugc">Ready-Made Oxygen Integration</a> – Seamless integration for Oxygen Builder with pre-built components and utilities</li>
</ul>
<p>Visit <a href="https://levels.dev/plugins" rel="nofollow ugc">levels.dev/plugins</a> for more tools and resources.</p>
<h3>Technical Details</h3>
<p>This fork includes a sophisticated event capture system that intercepts mouse events before Gutenberg’s React event system can prevent them. The plugin uses native JavaScript <code>addEventListener</code> with capture phase to ensure reliable coordinate capture in all contexts.</p>
<p>For detailed technical information, see the GUTENBERG_FIX.md file in the plugin directory.</p>


Image Hotspots Field for ACF

Capture coordinates on images for interactive hotspots. Fork with full Gutenberg block editor support.

Advanced Custom Fields: Multiple Coordinates vs Image Hotspots Field for ACF