FacetWP – show both a Google Map and a result listings

mgibbs189

{{gist file=”01_Query_Arguments.php” lang=”php”}}
<?php
return array(
“post_type” => “park”,
“post_status” => “publish”,
“posts_per_page” => 100
);
{{/gist}}{{gist file=”02_Display_Code.php” lang=”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; ?>
{{/gist}}{{gist file=”03_Page_Template.php” lang=”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();

{{/gist}}