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.
Common data sources:
-
- If your posts are not geocoded, try the Address Geocoder plugin. If you go this route, then choose martygeocoderlatlng for the data source.
- WP Job Manager plugin (integrated in Listify and Listable themes) – set the facet’s Data Source to geolocation_lat.
- Advanced Custom Fields Pro has a Google Maps field type that provides geolocation. Be sure to choose your field name in the “Advanced Custom Fields” section of the data source dropdown in the facet settings.
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(); ?>
if ( have_posts() ), while ( 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 Size | Width and height of map. Use unitless for px, ex. 300, or with %, ex. 100% |
| Zoom | Set the zoom bounds between 1 (minimum zoom) and 20 (maximum zoom) |
| Default Coordinates | Centers map to this latitude and longitude when there are no results on the map |
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.
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'] = array(
'url' => 'https://URL/TO/YOUR/marker.png',
'scaledSize' => array(
'width' => 16,
'height' => 16
)
);
return $args;
}, 10, 2 );
Changelog
0.4.4
- Map facet now requires FacetWP 3.2.0+
- Fixed issue saving the “Other data source” setting
0.4.3
- Fixed issue involving filtering across the Prime Meridian
0.4.2
- Fixed issues with
FWP.reset() - Compatibility fix for FacetWP 3.1.2+
0.4
- Improved: skip map refreshes when not needed
- Improved: re-center map on window.resize
0.3.3
- New: added `facetwp_map_proximity_marker_args` filter
- Improved: support marker cluster image extensions (props Roy Lodder)
0.3.2
- Improved: removed unnecessary query
- Fix: map width / height settings weren’t being respected
- Fix: limit results to the active map
