Map Results in Oxygen with WP Grid Builder

Oxygen

January 1, 2021

YouTube video

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/

Join the Inside Link Community

Get access to all courses, weekly office hours, live build sessions, and an active community of WordPress professionals.

Learn More →