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

min read / Oxygen Builder, Plugins, WordPress, WP Grid Builder / Share on: Twitter, LinkedIn, Facebook

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.

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:

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.

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.

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

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

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.

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.

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.

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!

8 comments