I’d love to have a Google Maps field that allow me to dray a polygon instead of a single point.
I’m trying to make it possible to add polygons to a map in the Google Map field, along with a marker. I found a pen with relatively simple code that shows how to create a polygon tool on a Google Map, but how to integrate it within the existing Google Map field, or an extension of it, is beyond my capabilities.
Has anyone been able to accomplish something like this? Looking in this forum, I found one related topic, but it’s over 2 years old, and the suggestions in the replies are old, unmaintained plugins that won’t really work (they don’t seem to be using Google Maps).
This may just be complex, but I’m hoping someone can point me to an existing solution, or at least some steps to get started. Thanks!
Hi All,
I wondered if anyone had any luck on using the Google Map field but creating regions/polygon areas?
If so, any help is much appreciated!
Kindest Regards
I’ve successfully filtered the block registration to include the SVG icon with custom foreground color. Note that I had to bump up the priority of the enqueue action to 9 in order for the filter to apply; maybe there is a better way of doing it. Also note that the SVG element is not a string; you’ll need to have a workflow set up like what wp-scripts
provides.
The code below is within a custom plugin.
acf-filter.js
const { addFilter } = wp.hooks;
/**
* ACF Custom SVG Icon filter
*
* ACF detects an SVG string for icon but not icon['src']
*/
addFilter(
'blocks.registerBlockType',
'cr0ybot/acf-block-icons',
( settings, name ) => {
if ( name === 'acf/my-block' ) {
settings.icon = {
foreground: '#7bb12d',
src: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>,
};
}
return settings;
}
);
plugin.php
function cr0ybot_block_editor_enqueue_assets() {
wp_enqueue_script(
'cr0ybot-block-filter',
plugins_url( '/acf-filter.js', __FILE__ ),
);
}
add_action( 'enqueue_block_editor_assets', 'cr0ybot_block_editor_enqueue_assets', 9 );
Just a small update, the acf-block-icon
plugin is not actually working for me.
I did a little digging into the ACF code and it looks like a string starting with <svg
is being detected, but only for the icon
property and not if you’ve set the icon via icon['src']
. I was setting my icon like this because I want to have a custom foreground color:
acf_register_block_type( array(
// ...
'icon' => array(
'foreground' => '#7bb12d',
'src' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>',
),
I’m looking to see if I can add a filter via JS on blocks.registerBlockType
to handle the icon with foreground color for the time being.
Hi,
I’m also very interested by Polygon feature: I would like be able to add Polygons like we can add Markers: to enable my front user to send me this kind of datas.
I already use WPGMAPSPro but even if it owns many more features (like polygons), it also hundred less flexible than ACF MAP: we can’t use it as field…
Does someone found a solution?
Thanks for the comprehensive answer DarthTicius. I guess the main thing which was causing my trouble was some way to have a polygon drawing tool in the backend, for non-technical users to add their own polygon shapes along with their marker, within the location field interface. I probably should have been clearer on that, sorry for the confusion!
I’ve moved on to using another solution for this project, though this may still be something that would be useful at some point. It looks like you’ve definitely provided all the pieces necessary to display the polygons on the front-end though, hopefully that will be useful for several people in the future.
@updownupdown Hi, once you add code for google maps for acf, you need to input the coordinates of polygon:
// center map
center_map( map );
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 44.28223, lng: 20.63992},
{lat: 44.28253, lng: 20.63935},
{lat: 44.28301, lng: 20.63984},
{lat: 44.28226, lng: 20.64103},
{lat: 44.28246, lng: 20.64138},
{lat: 44.28192, lng: 20.64267},
{lat: 44.2812, lng: 20.64186},
{lat: 44.28206, lng: 20.63973}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
// }
after that you can render the polygon with this piece of code:
/** @this {google.maps.Polygon} */
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
xy.lng();
}
// // Replace the info window's content and position.
// Turned off since i didn't need the rendering of tooltip over polygon.
// infoWindow.setContent(contentString);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
}
And that is it 🙂
Here is the code i use for google maps on one of the wp website where i needed polygon area:
<style type="text/css">
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
/* margin: 20px 0; */
}
/* fixes potential theme css conflict */
.acf-map img {
max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-KEY-HERE"></script>
<script type="text/javascript">
(function($) {
/*
* new_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery element)
* @return n/a
*/
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
//custom styling of the map
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
styles: [
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"color": "#574029"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"gamma": "1.27"
},
{
"lightness": 20
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": "-100"
},
{
"lightness": "-100"
},
{
"weight": "1.19"
},
{
"gamma": "0.00"
},
{
"hue": "#ff0000"
},
{
"invert_lightness": true
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"saturation": "-100"
},
{
"lightness": "-100"
},
{
"gamma": "0.00"
},
{
"weight": "0.01"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"lightness": 30
},
{
"saturation": 30
},
{
"color": "#919d8b"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"saturation": 20
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"lightness": 20
},
{
"saturation": -20
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": "40"
},
{
"saturation": -30
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"saturation": 25
},
{
"lightness": "100"
},
{
"gamma": "1.00"
},
{
"weight": "0.78"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"lightness": -20
}
]
}
],
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker( $(this), map );
});
// center map
center_map( map );
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 44.28223, lng: 20.63992},
{lat: 44.28253, lng: 20.63935},
{lat: 44.28301, lng: 20.63984},
{lat: 44.28226, lng: 20.64103},
{lat: 44.28246, lng: 20.64138},
{lat: 44.28192, lng: 20.64267},
{lat: 44.2812, lng: 20.64186},
{lat: 44.28206, lng: 20.63973}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
// }
// return
return map;
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $marker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
icon = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position : latlng,
icon : icon,
map : map
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/*
* center_map
*
* This function will center the map, showing all markers attached to this map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param map (Google Map object)
* @return n/a
*/
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
/** @this {google.maps.Polygon} */
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
xy.lng();
}
// // Replace the info window's content and position.
// Turned off since i didn't need the rendering of tooltip over polygon.
// infoWindow.setContent(contentString);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
}
/*
* document ready
*
* This function will render each map when the document is ready (page has loaded)
*
* @type function
* @date 8/11/2013
* @since 5.0.0
*
* @param n/a
* @return n/a
*/
// global var
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);
</script>
and i used this polygon render by google as starting point, and of course the pen u mentioned earlier to get the coordinates of the polygon i needed.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.