Gists

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

<?php
/** basic check to keep only one map marker per location
 ** assumes lat is unique without having to check lng also
 **/

Class FWPMapDulicateChecker
{
    public $locations = [];

    function __construct() {

        add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) {
            $lat = $args['position']['lat'];
            if ( false === array_search( $lat, $this->locations ) ) {
                $this->locations[] = $lat;
            } else {
                return false;
            }
            return $args;
        }, 10, 2 );
    }
}
new FWPMapDulicateChecker();

<?php
/**
 * set marker content specific to ACF repeater
 * change 'locations_multi' to name of ACF repeater
 * change 'store' to name of map field within repeater
 * add other or different code as needed to $args['content']
 **/
add_filter( 'facetwp_map_marker_args', function( $args, $post_id ){

    $latitude = $args['position']['lat'];
    $locations = get_field( 'locations_multi', $post_id );

    foreach ( $locations AS $location ) {
        if ( (string)$location['store']['lat'] == (string)$latitude ) {
            $args['content'] = $location['store']['address'];
            break;
        }
    }

    return $args;

}, 10, 2 );

<?php

// Add to your (child) theme's functions.php
// Note that this is untested, and may have side effects!

add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) {
    if ( ! isset( FWP()->map_locations ) ) {
        FWP()->map_locations = [];
    }

    // generate the hash for checking duplicates
    $hash = $args['position']['lat'] . ':' . $args['position']['lng'];

    // skip if this exact location has already been used
    if ( isset( FWP()->map_locations[ $hash ] ) ) {
        return false;
    }

    FWP()->map_locations[ $hash ] = true;
    return $args;
}, 10, 2 );

<?php

// Add to your (child) theme's functions.php
// Prevent marker clustering from a specific zoom level and up
// https://facetwp.com/help-center/facets/facet-types/map/#set-the-maximum-zoom-level-for-a-cluster-to-appear

add_filter( 'facetwp_map_init_args', function( $settings ) {
    if ( isset( $settings['config']['cluster'] ) ) {
        $settings['config']['cluster']['maxZoom'] = 10; // default: 15. Level must be between 1 and 20.
    }
    return $settings;
});

<?php

// Add to your (child) theme's functions.php
// For more examples and explanation, see: 
// https://facetwp.com/help-center/facets/facet-types/map/#set-custom-marker-cluster-images

add_filter( 'facetwp_map_init_args', function( $settings ) {

  $clustericonsizes = array( 53, 56, 66, 78, 90 );  // specify icon image sizes. These are the default values.
  for ( $i = 1; $i <= 5; $i ++ ) {
    $settings['config']['cluster']['styles'][] = [
      'url'       => FACETWP_MAP_URL . '/assets/img/m' . $i . '.png', // directory, required. This is the default directory.
      'width'     => $clustericonsizes[ $i - 1 ], // required
      'height'    => $clustericonsizes[ $i - 1 ], // required
      'textColor' => '#ffffff', // white, optional
      'textSize'  => 16 // 16px, optional
    ];
  }

  return $settings;
} );

add_action( 'wp_head', function() {
    ?>
    <script>
    (function($) {
        $(function() {
            if ( 'undefined' !== typeof FWP && 'undefined' !== typeof FWP.hooks) {
                FWP.hooks.addFilter('facetwp_map/fit_bounds', function( fit_bounds ) {
                    if ( FWP.loaded ) {
                        return fit_bounds;
                    } else {
                        return false;
                    }
                });
            }
        });
    })(jQuery);
    </script>
    <?php
}, 100);

<?php

// Add to your (child) theme's functions.php

// To be able to set a custom default center (lat / lng) and/or zoom level in the Map facet's settings, the Google maps fitBounds function needs to be turne off.
// See: https://facetwp.com/help-center/facets/facet-types/map/#set-a-custom-zoom-level-or-location-center

// There are 2 options (add only one to your site):

// 1. Only on initial page load

add_action( 'wp_head', function() {
  ?>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        if ('undefined' !== typeof FWP && 'undefined' !== typeof FWP.hooks) {
          FWP.hooks.addFilter('facetwp_map/fit_bounds', function(fit_bounds) {
            return FWP.loaded; // force the custom lat/lng/zoom only on initial page load
          });
        }
      });
    </script>
  <?php
}, 100 );


// 2. On every page load and facet refresh:

add_action( 'wp_head', function() {
  ?>
    <script>
      document.addEventListener('facetwp-refresh', function() {
        if ('undefined' !== typeof FWP && 'undefined' !== typeof FWP.hooks) {
          FWP.hooks.addFilter('facetwp_map/fit_bounds', function(fit_bounds) {
            return false; // force the custom lat/lng/zoom on every refresh
          });
        }
      });
    </script>
  <?php
}, 100 );

<?php

/**
 * This assumes a "gmaps" folder within your theme
 * Within that folder, add m1.png, m2.png, m3.png, m4.png, m5.png
 */
add_filter( 'facetwp_map_init_args', function( $settings ) {
    $settings['imagePath'] = get_bloginfo( 'stylesheet_directory' ) . '/gmaps/m';
    return $settings;
});

<?php
/** hook to add JS on opening map markers **/
add_action( 'wp_footer', function() { ?>
    <script>
    (function($) {
        if ('object' !== typeof FWP) {
                return;
        }
        
        $(function() {
            FWP.hooks.addAction('facetwp_map/marker/click', function( marker ) {
                // do stuff here
            });
        });
    })(jQuery)
    </script>
<?php }, 100 );