Hi All,
Ok, so I’m having to admit defeat and could really do with some help.
I’ve a CPT of locations and a Taxonomy of type
Each location can enter an address (google map field) and select a type.
A very basic page displays all the locations and the taxonomies:
<article class="container-fluid py-5" id="locations">
<?php
global $wp_query;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'posts_per_page' => 12,
'post_type' => 'locations',
'paged' => $paged
);
$wp_query = new WP_Query($args); ?>
<?php if ($wp_query->have_posts()) : ?>
<?php $total_reviews = $wp_query->found_posts; ?>
<div class="container">
<div class="row">
<div class="col-12" id="filters">
<?php
$types = get_terms(array(
'taxonomy' => 'type',
'orderby' => 'term_order',
'hide_empty' => false
));
foreach ($types as $type): ?>
<a class="btn btn-primary mr-2 mb-4" href="#" typeid="<?php echo $type->term_id; ?>"><?php echo $type->name; ?></a><br/>
<?php endforeach; ?>
</div><!-- /col-md-8 -->
</div><!-- /row -->
<div class="row">
<div class="col-12">
<p class="filter_status">
<div class="acf-map" data-zoom="16" id="ajax_filter_locations">
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); $address = get_field('address'); ?>
<?php include( locate_template( 'includes/loop.php', false, false ) ); ?>
<?php endwhile; ?>
</div><!-- /acf-map -->
</div><!-- /col-md-8 -->
</div><!-- /row -->
</div><!-- /container -->
<?php endif; wp_reset_query(); ?>
</article><!-- /container -->
This works fine (basic for testing purposes).
I’ve got my js file:
//filter the locations
jQuery(function($){
jQuery('#filters .btn').click(function(){
var typeid = jQuery(this).attr("typeid");
//alert('typeid: '+typeid);
jQuery.ajax({
type : "POST",
data : { action: 'get_location_posts', typeid: typeid},
dataType : "html",
url : myAjax.ajaxurl,
beforeSend : function(xhr){
jQuery("#filters").find('p.font-weight-bold').text('Filtering...');
},
success : function(data) {
//alert(this.data);
jQuery("#ajax_filter_locations").html(data);
//console.log("success! typeid: " + typeid);
},
error : function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.err);
}
});
return false;
});
});
I then have the following code in my functions file to handle the filtering:
function get_location_posts() {
$typeid = $_POST['typeid'];
#$page = $_POST['page'];
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'locations',
'post_status' => 'publish',
'posts_per_page' => -1,
'order' => 'DESC',
#'paged' => $page,
);
if( !empty( $_POST['typeid'] ) ){
$args['tax_query'] = array(
'relation' => 'OR',
array(
'taxonomy' => 'type',
'field' => 'term_id',
'terms' => $typeid
),
);
}
$query = new WP_Query( $args );
if( $query->have_posts() ) :
echo '<div class="acf-map" data-zoom="16">';
while( $query->have_posts() ): $query->the_post();
include( locate_template( 'includes/loop.php', false, false ) );
endwhile; wp_reset_postdata();
echo '</div><!-- /acf-map -->';
else:
echo '<div class="col-12 text-center">';
echo '<p class="text-center font-weight-bold lead">Sorry, no Locations available for this rating.
';
echo '</div><!-- /col-12 -->';
endif;
die();
}
// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_location_posts', 'get_location_posts');
add_action('wp_ajax_nopriv_get_location_posts', 'get_location_posts');
All files load etc.
loop.php contains the info for each location.
Now, the map loads initially and shows the various locations. The issue is when you try to filter. The map disappears and the relevant locations load as a list.
I’ve tried adding the map wrapper in the ajax return:
<div class="acf-map" data-zoom="16">
I’ve removed it but still can’t get this working
So it seems like I somehow need to reinstate the map. I wonder if it’s this:
google.maps.event.trigger(map, 'resize');
But Googling round, apparently this is no longer relevant.
Has anyone else managed to sort this? I’ve found some really old examples but they don’t work with the newer map versions.
Any help would be very much appreciated!
