Map Facet
This add-on generates a map to display geocoded results. It can also filter results by showing only results within the map bounds.
Usage
This add-on generates a Map
facet type, which works just like any other facet type.
The Data Source should be a custom field containing a comma-separated latitude, longitude.
Advanced Custom Fields has a Google Maps field type that provides geolocation. For the facet’s Data Source, choose the field underneath the “Advanced Custom Fields” header.
WP Job Manager plugin automatically stores geolocation data. Set the facet’s Data Source to geolocation_lat
.
Marker content
Enter display code for the content that displays when a marker is selected. The following example outputs the title, link, and excerpt.
<h3> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </h3> <?php the_excerpt(); ?>
have_posts()
or the_post()
Available options
Name | Description |
---|---|
Other data source | Choose a longitude field if stored separately from the latitude |
Map Design | Choose a design/color scheme for the map |
Marker clustering | This option will group markers into clusters |
Marker limit | “Show all results” will show all markers that match the results, “Show current page results” will only display markers matching the results on the current page of paginated results |
Map width / height | Width and height of map. Use unitless for px, ex. 300, or with %, ex. 100% |
Zoom min / max | Set the zoom bounds between 1 (minimum zoom) and 20 (maximum zoom) |
Default lat / lng / zoom | Centers map to this location when there’s no map results |
Using a Google Maps API Key
The map facet requires a valid Google Maps API key. After generating an API key, add it to Settings > Facet > Settings
. Both the proximity facet and map facet will use this key.
Changing the map type
The following sets the default map type to Terrain
:
add_filter( 'facetwp_map_init_args', function ( $args ) { $args['init']['mapTypeId'] = 'terrain'; // roadmap, satellite, hybrid, or terrain return $args; });
Customizing the marker pins
add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) { $args['icon'] = 'https://URL/TO/marker.png'; return $args; }, 10, 2 );
For more flexibility, you could alternatively use arrays to mimic Google’s JS objects:
add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) { $args['icon'] = [ 'url' => 'https://URL/TO/YOUR/marker.png', 'scaledSize' => [ 'width' => 16, 'height' => 16 ] ]; return $args; }, 10, 2 );
Map marker hooks
FacetWP provides javascript hooks to perform actions when markers are interacted with.
FWP.hooks.addAction('facetwp_map/marker/click', function(marker) { /** * The post ID associated with the active marker */ var post_id = marker.post_id; /** * The following code adds the CSS class "is-active" to the active post, * assuming each result's HTML is structured similarly to: * <div class="post-item" data-id="123">Hello World!</div> */ $('.post-item').removeClass('is-active'); $('.post-item[data-id="' + post_id + '"]').addClass('is-active'); });
In addition to click
, FacetWP also supports mouseover
and mouseout
events.
On the flip side, if you want to find all markers associated with a POST_ID
, you could use:
var markers = FWP_MAP.get_post_markers(THE_POST_ID);
Changelog
0.9
- Improved significant performance boost (esp. for maps with many markers)
0.8.1
- Fixed issue causing "maxZoom" JS error
0.8
- Changed use
FWP()->filtered_post_ids
if available - Fixed prevent infinite refresh when "Enable map filtering" is on
0.7.1
- Fixed only load posts if the "Marker Content" box is filled (performance boost)
0.7
- New
facetwp_map/fit_bounds
JS hook to disable fitBounds and manually center the map - Improved immediately trigger a refresh when the "Enable filtering" button is clicked
- Improved replaced GMaps "scrollWheel" setting with "gestureHandling"