Map Results in Oxygen with WP Grid Builder

YouTube video

Written By

Jonathan Jernigan

You can now show results from an Oxygen repeater on a Google Maps element thanks to the WP Grid Builder map facets addon. Using the ACF map field, WP Grid Builder plots listings on a map that has a clickable popup with information about the post.

Add the following code to functions.php or as a new Advanced Scripts/WpCodeBox snippet.

add_filter(
    "wp_grid_builder_map/marker_content",
    function ($content, $marker) {
        ob_start();
        $excerpt = get_the_excerpt();
        echo '<div class="wpgb-map-marker-body">';
        echo '<a href="' . esc_url(get_permalink()) . '">';
        the_title('<h3 class="wpgb-map-marker-title">', "</h3>");
        echo "</a>";
        if (!empty($excerpt)) {
            $excerpt = wp_trim_words($excerpt, 26, "");
            echo '<p class="wpgb-map-marker-content">' .
                wp_kses_post($excerpt) .
                "</p>";
        }
        echo "</div>";
        return ob_get_clean();
    },
    10,
    2
);

CSS for sticky map:

@media only screen and (min-width: 993px) { .sticky { position: -webkit-sticky; position: sticky; top: 20px; }}

Learn more about my Oxygen Builder course here: https://jonathanjernigan.com/ultimate-oxygen-course/

Visit the premium forums: https://jonathanjernigan.com/forums/

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.