FacetWP - show both a Google Map and a result listings

01_Query_Arguments.php

<?php
return array(
  "post_type" => "park",
  "post_status" => "publish",
  "posts_per_page" => 100
);

02_Display_Code.php

<?php while ( have_posts() ) : the_post();

$title = get_the_title( $post->ID );
$distance = facetwp_get_distance( $post->ID );
$distance = ( false !== $distance ) ? round( $distance, 1 ) . ' miles away' : '';
$coords = get_post_meta( $post->ID, 'coordinates', true ); // "latitude, longitude"
$coords = explode( ', ', $coords );
?>

<div class="post-item" data-title="<?php echo esc_attr( $title ); ?>" data-latitude="<?php echo $coords[0]; ?>" data-longitude="<?php echo $coords[1]; ?>" data-distance="<?php echo $distance; ?>">
    <?php echo $title; ?>
</div>

<?php endwhile; ?>

03_Page_Template.php

<?php
get_header();
the_post();
?>

<script>
(function($) {
    var map;
    var activeMarker = null;
    var markersArray = [];

    $(function() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 37.9, lng: -79.5},
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            scrollwheel: false,
            zoom: 7
        });
    });

    $(document).on('facetwp-loaded', function() {
        clearOverlays();

        $('.post-item').each(function() {
            var lat = $(this).attr('data-latitude');
            var lng = $(this).attr('data-longitude');
            var distance = $(this).attr('data-distance');
            var title = $(this).attr('data-title');

            var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    parseFloat(lat),
                    parseFloat(lng)
                ),
                info: new google.maps.InfoWindow({
                    content: title + ('' != distance ? '<br />' + distance : '')
                })
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (null !== activeMarker) {
                    activeMarker.info.close();
                }
                marker.info.open(map, marker);
                activeMarker = marker;
            });

            markersArray.push(marker);
        });
    });

    // Clear markers
    function clearOverlays() {
        for (var i = 0; i < markersArray.length; i++) {
            markersArray[i].setMap(null);
        }
        markersArray = [];
    }
})(jQuery);
</script>

    <div class="main">
        <div class="container">
            <?php echo facetwp_display( 'facet', 'location' ); ?>
            <div id="map" style="width:100%; height:400px"></div>
            <?php echo facetwp_display( 'template', 'parks' ); ?>
        </div>
    </div>

<?php get_footer();