FacetWP Map Facet Addon v1.2

Important:All info on this page refers to FacetWP’s “new” built-in Map facet, which is available in FacetWP v4.4 and newer, without the Map facet add-on installed. To use or migrate to the new Map facet type (from the Legacy Map facet add-on), read the usage instructions below. Learn more about the context of the Proximity and Map facet changes in FacetWP v4.4 in the news article about the release. Important:There is a known bug in Google Maps version 3.62, which unfortunately is the version used by the quarterly channel that FacetWP uses. Until Google fixes this bug, or we switch to the weekly channel, you can fix the issue by adding the following snippet to your (child) theme’s functions.php. At the time of writing, this will make the map use Google Maps version 3.63: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'facetwp_gmaps_params', function( $params ) { $params['v'] = 'weekly'; return $params; }); Without this fix, your map will not show markers and will default to showing Africa, accompanied by a Console error message containing: addEventListener is unavailable in this version. Note that this fix is only needed when using the new, built-in Map facet. Not when you’re using the Legacy Map facet add-on. Usage instructions In FacetWP v4.4 and newer, you can choose between two Map facet types: The Legacy Map facet – Needs the Map facet add-on installed. The new Map facet – Built into the main FacetWP plugin. Needs the Map facet add-on not installed – as described on this page. This split was introduced to let existing users decide when to migrate to the new Map facet. Migrating to the new version is optional but recommended. To learn more about the context of the Map and Proximity facet changes in FacetWP v4.4, and why you should consider migrating to the new versions, read the news article about the release. How to switch to the new Map facet In FacetWP 4.4, the Map facet was moved into the FacetWP plugin. The Map Facet add-on will not be updated anymore: version 1.2 will be the last version ever. Existing users To use new Map facet, the Map facet add-on must be de-installed. Make sure to read the migration instructions before doing so. As long as you keep the Map facet add-on installed, you are still using the Legacy Map facet. To migrate from the Legacy Map facet to the new Map facet, make sure to first update to FacetWP v4.4+. Then carefully follow the migration instructions, as there are many breaking changes. To future-proof your site, we recommend migrating to the new version. But you can decide to keep using the Legacy Map facet for now, by keeping the Map facet add-on installed. It will keep working until Google decides to discontinue either the legacy (synchronous) direct script loading tag, or legacy markers (which are already deprecated since February 21st, 2024) at an unknown point in the future. We recommend keeping an eye on Google’s legacy and deprecations pages. New users If you are a new FacetWP or Map facet user, there is no reason to use the Legacy Map facet. Don’t install the Map facet add-on (or de-install it) and start using the new Map facet (as described on this page) right away. Create Google maps as (filterable!) facets The Map facet type displays a Google map on the page. The generated map shows markers that represent geocoded results from a FacetWP-enabled listing on the page. These markers can be filtered by other facets, for example by a Proximity facet. The map will automatically update its zoom/pan to include only the filtered posts. If enabled, the map’s viewport itself can also act as a facet and filter the results in the listing, by panning or zooming the map manually. How it works To get a clear mental picture of how the Map facet works, it is important to understand that the map is not a listing, but a facet. It may look like a listing, as it shows posts (a marker for each), and those posts/markers will be filtered when using other facets, but it is still technically a facet. For any facet to work, there needs to be a FacetWP-enabled listing on the page. Without it, the map (its markers) and other facets will just not show up, because FacetWP does not have a query to “latch onto”. This listing can be a Listing Builder listing or any of the other supported listing template types. If you don’t want a visible listing, you can hide it with CSS, but it still needs to be on the page for the map to function. So, the Map facet always needs a listing, it will show a marker for each post in this listing, and these posts/markers can be filtered by using other facets. Why then is the map considered a facet? The answer is that it is not by default, but it can be. As soon as the Enable map filtering button is enabled, the map’s viewport becomes the facet filter. By panning and/or zooming the map, the listing will instantly be refreshed to only display the posts that are in the current map viewport. This feature can also be disabled, by hiding “Enable map filtering” button. Combine a Map facet with a Proximity facet A Map facet can be combined with any other facet to filter the posts/markers on the map. A specifically useful facet in combination with a map is the Proximity facet, which returns results within a chosen radius from the user-specified location. When a location and radius are set (or changed) with the Proximity facet, the map will automatically zoom in or out, showing the locations that are within the radius of the set location. The default yellow Proximity facet marker pin. If the Proximity facet is in use, it will display a yellow marker pin at the set location. This marker pin can be customized, disabled, or excluded from marker clustering behavior). See our Advanced map customization pages for more things you can do with the map and the Proximity facet/marker. Available options Important:For the Map (and Proximity) facet(s) to work, you need to enter a valid Google Maps API key in the “Google Maps API key” setting in FacetWP’s settings. See the section below for how to get a key. Name Description Data source The Data source should be a custom field containing a comma-separated latitude, longitude. Or – if you use a separate custom field for the longitude – only a latitude. See below for more info. Longitude Choose a custom field to use for the longitude value, if stored separately from the latitude (optional). See below for more info. Map design In the legacy Map integration this setting allowed you to choose a map style/design. It was also possible to use custom-made styles, added with a JSON array in a hook. This is not possible anymore. Google replaced JSON-based map styling with cloud-based map styling, based on the Map ID. See below for how cloud-based map styling works. Map ID Using a Map ID is optional. Enter your map’s Map ID, as created in the Google Cloud Console’s “Map Management” section (see below for instructions). The Map ID allows you to choose your map’s rendering type (raster or vector), and to change your Map Style. Enable filtering button label The button text of the “Enable map filtering” button. Note: the default or changed text can be translated with the facetwp_i18n hook, with a translation plugin, or with a gettext filter. Reset button label The button text of the “Reset” button, which appears after clicking the “Enable map filtering” button. Note: the default or changed text can be translated with the facetwp_i18n hook, with a translation plugin, or with a gettext filter. Marker clustering This option will group markers that are close to each other into marker clusters, from a certain zoom level. See the “Customize marker clustering” page for more info and customization options. Note that the Map facet also has built-in support for the Overlapping Marker Spiderfier feature, to deal with overlapping markers in (almost) the same location. 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. Note: this only works with a Pager facet of type “Page numbers”. It does not work with “Load more” pagination. Map width / height Width and height of map. Without units, px is assumed: e.g. 300 is the same as 300px. Use other CSS units if needed, e.g. 100% for responsive full width of the parent container. Note: don’t use 100% for the height if the map’s container does not have a fixed height, else the map will have no height and will not show. If you need responsive map heights, see the CSS example below. Zoom min / max Set the minimum and maximum zoom level. The values must be a number between 1 (minimum zoom) and 20 (maximum zoom). Fallback lat / lng / zoom Set a fallback location (lat/lng) and/or zoom level. The zoom level must be a number between 1 (minimum zoom) and 20 (maximum zoom). These settings are only used when no results/markers are found. If you leave these fields empty, the default lat/lng is 0,0 and the default zoom level is 1. With some customization, this setting can also be used to set a default custom center and zoom level on load of the map. Info window ajax loading Enable to dynamically load marker info window content via AJAX, on click of the marker. This can decrease the overall load time of maps with many markers, since it prevents all the info window content from being loaded at once. It can increase the load time of individual info windows though, as their content has to be fetched on click of the marker. Info window content Enter display code (HTML and/or PHP) to create the content that displays in an info window popup when a marker is selected. For an example, see below. Choose a data source The chosen Data source should be a custom field containing a comma-separated latitude, longitude value. You can also use separate custom fields for the latitude and longitude. In this case, select the custom field for the latitude in the “Data source” setting, and the custom field for the longitude in the “Longitude” setting. The latitude and longitude values must be a number value (technically a float value) with a . (dot) as the decimal character. Valid latitude values must be between (and including) -90.0 and 90.0. And valid longitude values must be between (and including) -180.0 and 180.0. Using other data sources The following plugins and themes offer dedicated location/map fields for latitude and longitude that can be used as data sources for the Map facet. Click the links for specific instructions on using these fields: Advanced Custom Fields (ACF) WP Job Manager Listify theme Listable theme Using multiple data sources / locations per post To use an ACF Google Maps field in an ACF Repeater field, choose the Google Maps field as data source (my_map in this example). It is possible to index multiple locations per post, by using a multi-value custom field, like an ACF repeater field, or for example a checkboxes/dropdown field (if you have a select number of locations to choose from). If you use an ACF Repeater field with a Google Maps sub-field, you need to choose the Google Maps sub-field’s name from the Map facet’s Data source dropdown (my_map in the example on the right). Make sure to always choose the field under the “ACF” heading in the Data Source dropdown. Note that if you want to retrieve content from other custom fields within the repeater field, to display in the marker/location’s info window, you cannot do that with the “Info window content” setting. In this setting’s field only post data can be retrieved, not the data for the separate locations within the repeater. The solution is to use the facetwp_map_marker_args hook. How to get a Google Maps API key For the Map (and Proximity) facets to work, you need to enter a valid Google Maps API key in the “Google Maps API key” setting in FacetWP’s settings. To get, set and test your API key, follow these steps: 1. Create a Google Maps API key in Google Cloud Console Set up Google Cloud Console and a project To get a Google Maps API key, you need a Google Cloud Console account. If you don’t have one, set up a new account. In your account, create a project for your website, and set up billing. Set up billing To be able to use the API key you are going to create, you first need to set up a Billing Account in Google Cloud Console, and add your project to it. You will need a credit card to do so. Your account will be billed for each request to the three above APIs. However, Google offers free credits, making usage free in practice for sites that are not heavily visited. Before March 1, 2025, Google offered a free monthly credit of $200. On March 1, 2025, this has changed to a free monthly usage threshold of 10K requests for each product. Check the pricing page and the Pricing Calculator to estimate your costs. Note that FacetWP optimizes billing costs for the Places API (New), by using session tokens. Enable the required Google APIs In your project, enable the following three APIs under APIs & Services > Enable APIs and services: Maps JavaScript API: required for the Map / Proximity facets to work. Geocoding API: required for the Proximity facet’s “Locate me” button. Places API (New): required for the Proximity facet’s autocomplete function. Important:“Places API (New)” can only be used with the new Proximity facet. The new Proximity facet requires FacetWP v4.4 or newer, and needs the “Use Legacy Proximity facet” setting to be disabled, as explained in the usage instructions. If you were already using a Proximity facet before updating to FacetWP v4.4 or newer, you are still using the Legacy Proximity facet, which needs the legacy “Places API” enabled instead. Read the migration guide if you are ready to switch. Migrating to the new version is recommended. Create an API key Next, add a new API key: in your project, go to API's & Services > Credentials, then click Create credentials > API key. Copy the key so you can add it to the FacetWP settings later. Click on the key name to go to the key’s settings page. Give it a descriptive name, and add some restrictions: Restrict your API key Restrict your API key to use only the needed three APIs. For security and to avoid being billed unexpectedly, it is strongly recommended to restrict your API key to your website’s domain, and to the above three API’s. To do so, on the Credentials page, click on the key name to go to the key’s settings page. Set up key restrictions as desired. It is recommended to at least restrict the key to your website URL(s). Note that restricting APIs to the website’s/server’s IP address will not work. IP restrictions only work for Google web service APIs, not the JavaScript web APIs that FacetWP uses. Next, to make sure the key can only use the needed three APIs, scroll to the bottom of the screen to “API restrictions”. Select “Restrict key” and select the above three API services, as shown in the image on the right. Save your settings. Note that it may take up to 5 minutes for changed settings to take effect. Control costs by setting quota limits To avoid being billed unexpectedly, it is strongly recommended to restrict your API key, as described above. Another way to prevent high costs is to set quota limits on your API usage. 2. Add the Google Maps API key to FacetWP After generating an API key, add it to: Settings > FacetWP > Settings > Google Maps API key. Both the Map facet and the Proximity facet need this key. If the key is incorrect, or if your Google Cloud Console settings prevent your site from using it, your map show the message “This page can’t load Google Maps correctly”, and the Console will display this error: “Google Maps JavaScript API error: ApiProjectMapError”. To test if you have set up everything correctly in the Google Cloud Console, you can use the “Test Google APIs” feature, located in FacetWP’s settings. This testing feature is available in FacetWP v4.4+. Add the API key programmatically Besides in FacetWP’s settings, the API key can also be set with a constant in wp-config.php: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infodefine( 'GMAPS_API_KEY', 'your-api-key' ); Or with the facetwp_gmaps_api_key hook in your (child) theme’s functions.php: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'facetwp_gmaps_api_key', function( $api_key) { return 'your-api-key'; }); Or, you can use the facetwp_gmaps_params hook, which can also be used to overwrite or set other parameters, like the Google Maps update channel, or the map’s language and region. How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'facetwp_gmaps_params', function( $params ) { $params['key'] = 'your-api-key'; return $params; } ); Add the Google Maps API key to Advanced Custom Fields If you are using the Advanced Custom Fields Google Map field as the data source, make sure you pass the same Google Maps API key into ACF. ACF needs the Google Maps API in the backend to geolocate the address entered for each post. Add the Google Maps API key to Listify, Listable, WP Job Manager If you are using Listify theme, Listable theme and/or the WP Job Manager plugin, make sure to also add the Google Maps API key to: (Job) Listings > Settings > Google Maps API Key The Listify theme itself has a second settings to enter the Google Maps API key, at: Appearance > Customize > Listings > Map settings 3. Test Google API connection In FacetWP version 4.4+, you can test the correct connection to the above three Google APIs. To run the test, go to Settings > FacetWP > Settings > Test Google APIs and click the test buttons. All three test results need to be green and say “connected”. Note that if the “Use Legacy Proximity facet” setting is enabled, you’ll see an extra button to test the legacy “Places API”, which is needed for the Legacy Proximity facet. In this case, the “Places API (New)” test is irrelevant. The Google Maps API key test. All three results need to be green. For the Legacy Proximity facet, “Places API (Legacy)” needs to be green instead of “Places API (New)”. If any of the required three test results is red and says “connection failed”, check all API key settings and restrictions in your Google Cloud project. Make sure the three needed APIs are enabled, and available in your project. It may take up to 5 minutes for changed Google Cloud Console settings to take effect. Note that the Geocoding API needs the Maps JavaScript API enabled and correctly connected. If the Geocoding API test keeps failing, reload the page and/or clear your browser cache and try again. To get more information about a failed connection, you can also check the front-end page that contains the Map/Proximity facet(s). Make sure to clear your browser cache first. Then open the browser console, reload the page and check for errors happening before, during or after using the facet(s). If you see any errors, you can look up the meaning of the error message. Note:If you add your API key to FacetWP programmatically (and the key field is empty), the API test feature is not available. In this situation, you can temporarily remove the hook and manually enter your key in the setting to test the APIs. Using a Google Map ID In Google Cloud Console, it is now possible to manage your Google Maps, in the new “Map Management” section. Each map you add there will have a unique “Map ID” and can have its own settings, like a rendering type and Map Style. If you enter the created Map ID in the “Map ID” setting of your Map facet (which is optional), your FacetWP map can be managed from the Cloud Console, and will take on the selected rendering type and Map Style. To manage your maps and create a new Map ID, follow these steps: Log into Google Cloud Console and open your project. (Or, if you have not done so already, first open an account and set up your project and Google Maps API key.) In your project settings go to API's & Services > Maps JavaScript API and open “Map Management” in the left navigation column. Create a new Map ID in the Map Management section. Set the map type to “JavaScript”, and choose rendering type (Raster or Vector). The Map ID settings window with the Map ID. Click the Settings link at the top to set the rendering type. Click “Change style” to select a pre-made Map Style. Click “Create map ID” at the top, choose a descriptive name, and set the “Map type” dropdown to “JavaScript”. This will open a new setting that let’s you choose between “Raster” and “Vector” rendering. See the explanation below for more info about these two rendering types. For now, set to the default “Raster” option (you can change it later), and click Save. Now you’ll see your newly created Map ID in the overview screen, with its name and the actual “Map ID” (the string of random letters and numbers). If you click the Map ID, its settings window is opened, as shown in the image on the right. At the top is a “Settings” link, which allows you to change the name and Raster/Vector option that you set earlier. And you can select a pre-made Map Style. Copy the Map ID (the string of random letters and numbers, not the name), and enter it in the “Map ID” setting of your Map facet. (Or set it programmatically). Now your Map facet is managed from the Google Cloud Console, and it will take on the selected rendering settings and chosen Map Style. Note that it may take up to 5 minutes for changed settings to take effect. Choose a map rendering type Choose the rendering type for a map ID. In the Google Cloud Console’s Map ID settings for your map you can choose “Raster” or “Vector” rendering. Raster rendering is the default and safest option. Vector map rendering is relatively new. It makes map rendering very fast and snappy. It also enables new features like map rotation, tilting, 3D maps features, and Fractional Zoom. However, vector rendering uses WebGL, which is not supported in older browsers. See the Support page for more info. If a browser does not support all needed WebGL features, the map will automatically default to raster rendering. So your map will always work, but in unsupported browsers this JavaScript error will display in the Console: Attempted to load a Vector Map, but failed. Falling back to Raster. Note that “Raster” or “Vector” rendering (and tilt and rotation) can also be set programmatically. Map tilt and rotation Click “Keyboard shortcuts” to check for rotate/tilt features. If you set your Map ID to use Vector rendering, you can enable map tilt and/or totation. When enabled, users can tilt and rotate the map by using Shift + arrow keys, or with gestures on touch devices. To check if tilt and rotate are enabled correctly, click “Keyboard shortcuts” in the bottom right corner of the map, and check for the four Shift + arrow key shortcuts at the bottom of the list. If you don’t see these shortcut options, be aware that it may take up to 5 minutes for changed settings to take effect. Map tilt and rotation can also be set programmatically: Set the Map ID and/or rendering type programmatically You can also set your map’s Map ID and/or rendering type (Raster or Vector) programmatically, with the facetwp_map_init_args hook. If you set renderingType to VECTOR, you can enable tilt and rotation programmatically too. Note that using these arguments will overwrite the “Map ID” setting, and the rendering settings for the Map ID in the Cloud Console’s Map Management section. How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'facetwp_map_init_args', function ( $args ) { // Set your Map ID $args['init']['mapId'] = 'my-map-id'; // your Map ID, as set in Google Cloud Console's Map Management section. // Set a rendering type $args['init']['renderingType'] = 'VECTOR'; // valid options are: 'RASTER' (default) and 'VECTOR' // Optional: enable tilt and/or rotation (only available on VECTOR maps) // Use tilt/rotation with the 'keyboard shortcuts' link under the map $args['init']['tiltInteractionEnabled'] = true; // Enable tilt $args['init']['headingInteractionEnabled'] = true; // Enable rotate return $args; }); Preload Map ID configuration To tune network performance, it is possible to pass your Map ID(s) to the map loading parameters, causing the configuration for the specified Map ID(s) to be preloaded. Use a custom Map Style In the Legacy Map facet (with the Map facet add-on installed), you could select a Map design in the settings, or you could create your own map designs, for example with the Google Map style wizard. You could also use JSON styles created by others. Unfortunately, this is no longer possible. Google replaced JSON-based map styling with cloud-based map styles, which are reusable styles created in the Cloud Console, and associated with one or more Map IDs. Follow these steps to create a Map Style and attach it to your map’s Map ID: Log into Google Cloud Console and open your project. (Or, if you have not done so already, first open an account, set up your project and create a Google Maps API key.) In your project settings, go to API's & Services > Maps JavaScript API and open “Map Management” in the left navigation column. Make sure you have set up a Map ID for your map, and have added it to the “Map ID” setting of your Map facet. If you don’t have a Map ID yet, set it up first. Create a new Map Style in the Map Styles section. In the navigation column on the left, go to the Map Styles section. Click “Create style”, select “Roadmap”, then click “Customize”. Now you can Customize the style to your liking, then save and publish it. Associate a Map Style with your Map ID(s). Next, associate your Map Style with your Map ID(s). You can do this in two ways: In the settings of your newly-created Map Style, click “Add Map IDs” or “Edit Map ID”, and select one or more Map IDs that the style must be applied to, as shown in the image on the right. Or you can open the Map Management section, select your map’s Map ID, click “Change style”, and select your pre-made Map Style, as shown in the image above. Note that if you do it in this way, the Map Style must be created first, otherwise there is nothing to choose from. Now your Map facet should display in the selected Map Style. If you don’t see it, be aware that it may take up to 5 minutes for changed settings to take effect. Add or customize marker info window content The “Info window content” setting can be used to create the content of the info window popup that displays when a marker is clicked. The setting’s field accepts HTML and PHP code, and is aware of the marker’s post data. You can use data from $post, like $post->ID. The following example outputs the title, link, and excerpt: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

Important: Info window content should not contain have_posts() or the_post(). If the “Info window content” field is too limiting, or if you can’t reach certain data with it, you can use the facetwp_map_marker_args hook to output/overwrite the content. Style marker info window content If you want to style the custom info window content with CSS, just add a container with a custom class, and use that to target your elements in the info window: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info For example, to style the

: How to use custom CSS?CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between

' . $address . ''; } if ( !empty( $email ) ) { $email_address = ' | ' . $email . ''; } if ( !empty( $phone ) || !empty( $email_address ) ) { echo '

' . $phone . $email_address . '

'; } Add marker content from ACF repeater fields If you are using ACF repeater fields to index and display multiple locations per post, you may also want to retrieve content from other custom fields within the repeater field, to display in the marker/location’s info window. If you try to do this with the “Info window content” setting, you’ll run into trouble, because there only post data can be retrieved, not the data for the separate locations within the repeater. Fortunately, there is the facetwp_map_marker_args hook, with which you can set the info window content dynamically. Be aware that this overwrites anything you have set in the “Info window content” setting: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info// Change 'map-repeaterfield' to the name of the ACF repeater field // Change 'map-repeaterfield-location' to the name of Google Map field within the repeater field. // This field should be chosen as the Map facet's 'Data source' setting. Make sure to choose the field under the “ACF” heading in the Data Source dropdown. // Change 'map-repeaterfield-name' to the name of another field within the repeater field // Add other fields or content as needed to $args['infoWindowContent'] add_filter( 'facetwp_map_marker_args', function( $args, $post_id ){ // Get the marker's 'lat' value. $latitude = $args['position']['lat']; // Get the post's repeater field values. $locations = get_field( 'map-repeaterfield', $post_id ); foreach ( $locations AS $location ) { // Check if the 'lat' value of one of the repeater locations matches the marker's 'lat' value. if ( (string)$location['map-repeaterfield-location']['lat'] == (string)$latitude ) { // If so, get the value of another field within that repeater field. // $args['infoWindowContent'] is the string representing the marker info window content. $args['infoWindowContent'] = $location['map-repeaterfield-name']; // Add more fields data to $args['infoWindowContent'] if needed. break; } } return $args; }, 10, 2 ); Display the post distance in the marker info window content If you are using a Proximity facet together with a Map facet, it is possible to show the post distance in the info window that appears when a marker is clicked. To do so, open your Map facet’s settings, and add the following PHP code to the “Info window content” code field: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info Note that the post distance will only display when it is available: when the Proximity facet is in use and has a location entered. Note:this currently does not work when the Map facet’s “Info window ajax loading” setting is enabled. Translate the marker info window content If you are using WPML or Polylang to translate your content, and you have the FacetWP Multilingual add-on installed, you can translate the marker info window content as follows. You could do this directly in the “Info window content” setting. But for a bit more flexibility, in this example we’ll use the facetwp_map_marker_args hook, which lets you override the marker info window content. The code gets the current language for WPML in line 5. If you use Polylang, use line 8 instead. Based on the detected language, you can now write your custom code to output the info window content for each language, as shown in lines 13-33: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'facetwp_map_marker_args', function( $args, $post_id ) { // Get the current language // For WPML use: $lang = ( ! empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : apply_filters( 'wpml_current_language', null ); // For Polylang use: // $lang = ( ! empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : pll_current_language(); // Start output buffering ob_start(); if ( 'en' == $lang ) { // Output for English language posts ?>

tags in the section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info.facetwp-map-filtering { display: none; } Translate the “Enable map filtering” and “Reset” button text The text of the “Enable map filtering”, and “Reset” buttons can be changed with a setting. Both texts can be changed or translated with a translation plugin, with the facetwp_i18n hook, or with a WordPress gettext filter: How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_filter( 'gettext', function( $translated_text, $untranslated_text, $domain ) { if ( 'facetwp-map-facet' == $domain ) { if ( $translated_text == 'Enable map filtering' ) { $translated_text = 'Search when moving the map'; } if ( $translated_text == 'Reset' ) { $translated_text = 'Stop searching when moving the map'; } } return $translated_text; }, 10, 3 ); Enable map filtering on load of the map It’s possible to enable map filtering by default on load of the map, with the following code. However, be aware that having map filtering enabled will prevent other facets – like a Proximity facet – from automatically zooming or panning the map. This can be confusing for users, even more so if it is unclear that map filtering is enabled. So it’s not a good idea to combine this with hiding the “Enable map filtering” button. How to use custom PHP code?PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More infoadd_action('facetwp_scripts', function () { ?> tags in the section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info.facetwp-template { display: none; } Be aware that this will hide all FacetWP listings on all pages. If you need it to only hide on a specific page, you need to adapt the CSS selector. For example, to hide the listing only on the page with the ID 68436, you can use the page-id-68436 body class. Check the body classes of your page to find the correct class to use. How to use custom CSS?CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between