<?php
/**
** Adds marker click action to add a circle radius around clicked marker
** Clicking another marker clears the previous circle
** Note: facetwp_scripts action requires FacetWP v4.2.2+
** More info: https://facetwp.com/help-center/facets/facet-types/map/advanced-map-customizations/#display-a-circle-or-other-shape-around-clicked-markers
**/
add_action( 'facetwp_scripts', function() {
?>
<script>
(function($) {
FWP.hooks.addAction('facetwp_map/marker/click', function(marker) {
// Clear existing marker if it exists
if ( 'undefined' !== typeof FWP_MAP.circ )
FWP_MAP.circle.setMap(null); // Clear circle from map
FWP_MAP.circle = null; // Remove circle instance entirely
// var post_id = marker.post_id; // The marker's post_id could be used to apply this code only to certain markers.
var lat = marker.position.lat();
var lng = marker.position.lng();
FWP_MAP.circ = new google.maps.Circle({
center: {
lat: lat,
lng: lng
},
radius: 25000, // Circle radius in meters
fillColor: '#FF0000', // Circle coloring
fillOpacity: 0.35, // Circle opacity
strokeColor: "#FF0000", // Circle outline color
strokeOpacity: 0.8, // Circle outline opacity
strokeWeight: 2, // Circle outline thickness
map: FWP_MAP.map
});
// Optional: when an infoWindow is closed, clear the circle from the map
google.maps.event.addListener(FWP_MAP.infoWindow, 'closeclick', function() {
FWP_MAP.circle.setMap(null);
});
// Optional: when the map is clicked anywhere, clear the circle from map
google.maps.event.addListener(FWP_MAP.map, 'click', function(event) {
FWP_MAP.circle.setMap(null);
});
});
})(fUtil);
</script>
<?php
}, 100 );