## Support

### Account

Solving

• 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!

• @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.
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// Add a listener for the click event.

// }
``````

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 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,

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
}
]
},
{
"elementType": "geometry",
"stylers": [
{
"lightness": "40"
},
{
"saturation": -30
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"saturation": 25
},
{
"lightness": "100"
},
{
"gamma": "1.00"
},
{
"weight": "0.78"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"lightness": -20
}
]
}
],
};

// create map
var map = new google.maps.Map( \$el[0], args);

map.markers = [];

\$markers.each(function(){

});

// 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.
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// Add a listener for the click event.

// }

// return
return map;

}

/*
*
*  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
position	: latlng,
icon        : icon,
map			: map
});

map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( \$marker.html() )
{
// create info window
content		: \$marker.html()
});

// show info window when marker is clicked

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

// 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 );
}

}

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);
}

/*
*
*  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;

\$('.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.

• 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.

• I’m trying to do the same. Can you let me know which other solution you’re using?

• I ended up using a solution outside ACF altogether, basically embedding an old Google My Maps the client had been using. Not ideal at all.

• Don’t know if this will help you or not, but I’ve never used the ACF map field for anything but a simple map. For doing complex maps I use this http://www.wpgmaps.com/purchase-professional-version/

• 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?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.