Map Facet

←  All Add-Ons

Create maps from Google Maps, Mapbox or Leaflet as filterable facets. This add-on allows to display markers (posts, terms or users) on a map from longitude and lagitude coordinates. It can optionally filter content when panning the map.

This add-on also includes a Geolocation facet that allows you to search and filter by a location from Google or Mapbox APIs. It is also possible to detect current user’s location thanks to browser Geolocation API (user’s location can be approximated based on the user’s IP).

See demo →

Key features

  • Google Maps API support
  • Mapbox API support
  • Leaflet API support (open-source)
  • Geolocation field (Google & Mapbox APIs)
  • Support marker clustering
  • Support map panning to filter
  • Compatible with Advanced Custom Fields


Create a new facet and select as Facet Action > Filter and as Filter Type > Map. Once selected, you will be able to select the Map Type (Google Maps, Mapbox or Leaflet) and to fine tune the behaviour of the map, markers, clusters and controls.

This add-on is compatible with Google Map – ACF field, OpenStreetMap – ACF field, Google Maps – Meta Box field and Open Street Map – Meta Box field to easily add coordinates. This add-on also offers custom fields to add lat/lng coordinates for your posts, users or terms directly in preview mode in your grid settings.


Map Facet - Settings
Map Facet – Settings
Map Facet - Settings
Map Facet – Settings
Map Facet - Coordinates
Map Facet – Coordinates
Geolocation Facet - Settings
Geolocation Facet – Settings

Geolocation Facet - Settings
Geolocation Facet – Settings

Geolocation Facet - Map location
Geolocation Facet – Location


This add-on comes with several PHP filters to easily customize map behaviour and markers content.

Modify marker content from post, user or term:

function prefix_marker_content( $content, $marker ) {

	// If post ID is 1234, return the title.
	if ( 1234 === $marker['id'] ) {
		return get_the_title();

	return $content;

add_filter( 'wp_grid_builder_map/marker_content', 'prefix_marker_content', 10, 2 );

Modify geoJSON features used to place markers:

function prefix_map_geojson( $json, $facet ) {

	// If facet slug is 'my_slug'.
	if ( 'my_slug' === $facet['slug'] ) {

		$json['features'] = array_map(
			function( $feature ) {
				// Add modification here...
				return $feature;


	return $json;

add_filter( 'wp_grid_builder_map/geojson', 'prefix_map_geojson', 10, 2 );

Register/unregister Leaflet tile providers:

function prefix_leaflet_providers( $providers ) {

	$providers['Mapbox - Street v11'] = [
		'url'     => '{z}/{x}/{y}.png?access_token=<your access token>',
		'options' => [
			'attribution' => '© <a href="">Mapbox</a>',

	return $providers;

add_filter( 'wp_grid_builder_map/leaflet_providers', 'prefix_leaflet_providers', 10, 2 );

Register/unregister Mapbox styles:

function prefix_mapbox_styles( $styles ) {

	$styles['mapbox://styles/mapbox/streets-v11'] = 'Your Map Style';
	return $styles;

add_filter( 'wp_grid_builder_map/mapbox_styles', 'prefix_mapbox_styles', 10, 2 );

This add-on also provides several JavaScript events to easily modify map behaviour, add new features and to catch marker interactions.

This event is triggered before the map is initialized:

Grid settings – JS field
wpgb.facets.on( 'map.beforeInit', function( instance ) {

	// Change maxZoom options.
	instance.options.maxZoom = 18;

} );

This event is triggered after the map was initialized:

Grid settings – JS field
wpgb.facets.on( 'map.afterInit', function( instance ) {

	// Add new layer to Leaflet map.
	var layer = new L.tileLayer( 'https://{s}{z}/{x}/{y}.png' );
	layer.addTo( );
} );

This event is triggered after Mapbox map was loaded:

Grid settings – JS field
wpgb.facets.on( 'map.loaded', function( instance ) {
	// Only happens when Mapbox map is fully loaded.
} );

This event is triggered on marker click:

Grid settings – JS field
wpgb.facets.on( '', function( instance, feature ) {
	console.log( 'marker ID', )
} );

This event is triggered when hovering a marker:

Grid settings – JS field
wpgb.facets.on( 'map.marker.mouseenter', function( instance, feature ) {
	console.log( 'marker ID', )
} );

This event is triggered when leaving a marker:

Grid settings – JS field
wpgb.facets.on( 'map.marker.mouseleave', function( instance, feature ) {
	console.log( 'marker ID', )
} );

To display the post distance, you can use the following shortcode:

[wpgb_geo_distance id="1234" unit="km" decimal_places="0" decimal_separator="." thousands_separator=""]



Release date: June 20, 2022

  • addedLeaflet Marker Popup autopan feature.
  • improvedBehavior of Leaflet Marker Popup when dragging and filtering.
  • fixedPerformance issue when refreshing markers in the map.


Release date: June 9, 2022

  • updatedGoogle MarkerClusterer library assets.
  • fixedIssue with query string detection on page load.


Release date: May 2, 2022

  • updatedGoogle Maps and MarkerClusterer library assets.
  • updatedLeaflet library assets.


Release date: March 23, 2022

  • fixedIssue with Marker content cache when using multiple markers from the same ID.


Release date: March 22, 2022

  • addedLatitude and longitude coordinates in the marker content endpoint.
  • fixedIssue with marker content and post types excluded from search.


Release date: October 22, 2021

  • fixedIssue when querying attachment post type in marker popup.
  • updatedLeaflet Cluster and Gesture scripts.


Release date: October 5, 2021

  • fixedIssue when querying an orphan term in the marker popup.
  • updatedMap Leaflet Cluster script.


Release date: April 23, 2021

  • fixedIssue with Map Filtering option not working properly.


Release date: April 7, 2021

  • fixedMissing source when retrieving marker content in some contexts.


Release date: February 9, 2021

  • updatedMap library assets (CSS/JS).
  • fixedIssue when dragging Leaflet map on load.
  • fixedNon-composited animations of pan to search checkbox.


Release date: January 11, 2021

  • addedGeolocation distance block for the card builder and shortcode.
  • addedPossibility to sort by geolocation distance when content is filtered.
  • updatedLeaflet library assets and JS gestures library for Leaflet.
  • fixedIssue with highlighted marker icon when overriding idle icon in geoJSON.


Release date: November 23, 2020

  • fixedIssue when resetting posts data in marker popup.
  • fixedIssue with PHP 5.6 and facets detection in the page.
  • fixedIssue with Rest API response.


Release date: October 19, 2020

  • addedCompatibility with Elementor editor.
  • fixedIssue with async or defer attribute on scripts.
  • fixedCSS issue with autocomplete button colors.
  • fixedCSS issue with pan to search tooltip.
  • fixedIssue with Google Map width in grid sidebars on mobile devices.


Release date: July 15, 2020

  • addedGeolocation facet (Google & Mapbox APIs).
  • fixedIssue with Mapbox map filtering position.


Release date: April 14, 2020

  • improvedMap facet can now index any array containing lat and lng properties.
  • addedFrench translation of backend and frontend.
  • fixedIssue with default marker icon in Leaflet map.


Release date: March 25, 2020

  • updatedLeaflet and Google Map assets.
  • fixedJS issue when destroying Map instances.
  • fixedJS issue when initializing Map after destroying it if no facet content.
  • fixedJS issue with highlight marker events and multiple Map instances.


Release date: February 10, 2020

  • addedCompatibility with Multilingual add-on.


Release date: November 18, 2019

  • addedNew facet option to display “Pan to Search” checkbox over the map.
  • addedNew facet option to highlight marker icon when hovering cards in grid.
  • addedMap grid and card demos available from the importer of WP Grid Builder (plugin Dashboard).


Release date: November 4, 2019

  • released Public Release