Aleš Sýkora / November 28, 2023 / 8 comments

WP Grid Builder Map Facet with Oxygen Repeater element and Custom Map Marker content

Post summary: Build your own Map which displays your posts and filter with geolocation.

I just recently start using the WP Grid Builder plugin with Oxygen Builder and Custom fields. I am very suprised and happy, how good this integration is and how nice does WP Grid Builder does it’s job.

Today I will show you, how to create a map facet displaying Rental locations and how you can easily customize the popup in the WP Grid Builder Map Facet extension, to show data from displayed post.

WP Grid Builder Map Facet with Custom fields in map pin’s popup

Which plugins I use in this tutorial? I Use CPT UI plugin to create custom post types, ACF PRO for custom fields, Oxygen Builder of course, WP Grid Builder lifetime license for 100 sites and it’s addons – Oxygen Builder Add-on, Map Facet Add-on, Cache Add-on. And With the Oxygen builder, I use the Automatic.css.

Let’s start building now!

Create archive enabled Custom Post Type called Rentals

I am using CPT UI, but you can register the post type manually, or use defualt post types (post, page). In basic CPT settings, setup your Slug and Labels:

CPT UI Basic settings for Custom Post Type

In Settings, set Has Archive to true (but it’s not a requirement) and if you don’t want to use Gutenberg, disable the Show in REST API option. I also disable the Editor, because I only use the title + ACF Fields.

Configure if CPT has archive.
Configure if CPT shows in REST API. If false, Gutenberg editor will not show up.
Configure if CPT has editor and other features.

Add custom fields

I am using ACF PRO For custom fields. You will need two fields for Address. One will be ACF Address field and second one will be ACF Text field. Then add whatever fields you need.

Set up ACF PRO custom fields inside field Group.

Don’t forget to select conditional display of ACF field group to display only on Rental posts.

Setup an conditional display for fields.

Now you need to get Google Maps API Key and put it to the Oxygen Builder’s settings.

Add Google Maps API Key in Oxygen Builder settings, works fine for ACF too.

If you don’t use Oxygen, add this code or to your functions.php (works only with PRO version of ACF).

function my_acf_init() {
	
	acf_update_setting('google_api_key', 'xxx'); //change XXX to your API key.
}

add_action('acf/init', 'my_acf_init');

Make sure all these API’s are enabled:

  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Elevation API
  • Google Maps Geocoding API
  • Google Maps JavaScript API
  • Google Places API Web Service
  • Google Static Maps API

Here are Google’s instructions on creating an API key: https://developers.google.com/maps/documentation/embed/get-api-key. If you restrict the key to your development domain, don’t forget to add the live domain too.

Prepare the posts

After you create your CPT and your Custom Fields, you should prepare the content. In WP administration, go to Rentals > Add New and fill all the informations about each Rental. Then create all posts you need.

Fill the ACF Custom Fields and save the post.

Prepare the WP Grid Builder facets

I am using two facets:

  1. Map Facet – to display map
  2. Geolocation facet – to search by location

For both of them, the facet type is Filter and for both of them, you will need your Google API key again (the same you use for ACF). You can the adjust the settings by your own needs.

You can find my setup here:

Prepare Oxygen template for CPT Archive

Go to the Oxygen Builder > Templates and create new template. Set the template to inherit your main template and then set it as archive template for your CPT.

Oxygen Template set to be an Archive Template of Custom Post Type

Create the frontend part

I will summarize this part in a few points, because I assume that everyone will style and code it differently. In my case, I did this:

  1. Create Flex Container with two columns.
    • Add the WP Grid Builder Oxygen Integration Component – Facet to both Columns
      .
  2. In the first Column, add a Repeater component and display its results as horizontal list.
    • Add Title and ACF fields with Oxygen Dynamic data (add text field and select dynamic data, then choose the fields we create in Advanced Custom Fields menu).
  3. Set the facet in first column to the Geolocation facet and the repeater to be filtered element.
  4. Set the facet in second column to the Map facet and the repeater to be filtered element.
  5. Adjust the query in repeater if needed.
  6. Adjust the styling of facets if needed.
  7. Save the template and check the frontend.
  8. You should be done 🙂

Construct custom content in Map Pin Popups

With this setup, when user clicks on the map marker, it will display only post title:

But if you want, you can display the ACF PRO fields content, same as you did in repeater. But you need to write the PHP function manually. Adjust and place the function to your functions.php or in Oxygen builder case – to your custom snippets plugin – for example Advanced Scripts.

Don’t forget to adjust or add your own CSS classes if you don’t use the Automatic.css too.

<?php

// Your PHP code goes here!

add_filter(
	'wp_grid_builder_map/marker_content',
	function( $content, $marker ) {
		
		ob_start();
		//Get ACF Custom fields
		$title = get_the_title();
		$visible_address = get_field( "visible_address" );
		$phone = get_field( "phone" );
		$phone_2 = get_field( "phone_2" );
		$email = get_field( "email" );
		$website = get_field( "website" );
        
        //Create inner content wrapper
        echo '<div class="pad--s">';
        //Display post Title
		echo '<h4>' . $title. '</h4>';
		//If exist - display ACF field content and format it 
		if ( $visible_address ) {
			echo '<p>' . $visible_address . '</p>';
		}
		if ( $phone ) {
			echo '<a href="tel:' . $phone .'">' . $phone . '</p>';
		}
		if ( $phone_2 ) {
			echo '<a href="tel:' . $phone_2 .'">' . $phone_2 . '</p>';
		}
		if ( $email ) {
			echo '<a href="tel:' . $email .'">' . $email . '</p>';
		}
		if ( $website ) {
			echo '<a href="' . $website .'">' . $website . '</p>';
		}
		//Close inner content wrapper
        echo '</div>';
		
		return ob_get_clean();
		
		
	},
	10,
	2
);

Finally, you are done!

So in the end of the day, you can with something, like I did.

WP Grid Builder Map Facet with Custom fields in map pin’s popup

Let me know, if you did something similiar, or if this tutorial helped you. If you a question, just use the comments below. Enjoy!

If you want to support my free tutorials then go get the WP Grid Builder map facet today!

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

8 comments

  • Very helpful tutorial, thank you.

    Perhaps you can give me a hint. ​I use Bricks (custom query loops for cards list) and Map Facet. I would like to click on the card link to open the map marker. Is it possible?

    My test page: https://geotechnika.devbox.pl/realizacje-2/

  • Hi Aleš Sýkora,
    I have tried to modify your code for the Marker Content. I am using Bricks, ACSS, WPGB and Meta Box. My custom post type has the slug ‘klubber’. It does not work showing an empty Marker Content box with a spinning wheel.

    My modified code is as follows. Will be happy for comments helping out 🙂

    Code was removed *SECURITY REASONS*

  • i use advance script for custom content markers, but still it does not show the output

  • Martijn

    Awesome tutorial. Trying to achieve the same, but I’m not a PHP or ACF expert. Simple question, where or how do I add CSS classes to your ACF fields, and how to add a (perma-)link with generic text? Thanks in advance!

  • A

    Hello Mario, that’s exactly what I tried to do, but with no success. I also contacted Fluent Forms developers and they told me it’s not doable. I think if you add some element with same ID, then you may be able to use javascript onclick event to open it, but I didn’t made it work. Sorry for that :(.

  • A

    hello Mikael, you should be using echo $address; without the ”. Also I would prefer adding the inner wrapper for the content rather than empty echoes. Otherwise maybe there is some typo, but wordpress comments totally messed up the code. Can you share it within codeshare for example? Regards, Aleš

  • A

    So you probably do something wrong. It’s working great at my side, take a look: https://www.hugobike.cz/en/servis/

  • A

    Hello! I am not sure if I understand clearly what you want to achieve. But if you want to add a css class when echoing the data from ACF fields, you can add it here (example)

    $visible_address = get_field( "visible_address" ); // save ACF data to variable
    echo '<p class="form-address">' . $visible_address . '</p>'; // display value in paragraph with class .form-address
    

    If you need the class to be a slug of post, then add something like this:

    
    global $post;
    $post_slug = $post->post_name;
    echo '<p class="' . $post_slug . '">' . $visible_address . '</p>'; // display value in paragraph with class containing post slug
    

Share Your Thoughts