2 months ago
<?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 );
1 year ago
<?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();
1 year ago
<?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 );
2 years ago
<?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 );
2 years ago
<?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;
});
2 years ago
<?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;
} );
3 years ago
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);
2 years ago
<?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 );
4 years ago
<?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;
});
4 years ago
<?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 );