Ajax Filtering of Google Maps

• jarvis

• March 4, 2022 at 12:09 pm

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!

• John Huebner

• March 6, 2022 at 11:03 am

I see two possible issues.

The first has to do with the taxonomy field. Is it set to save and load terms? If this is not the case then post terms are not set and you will need to instead use a meta query.

The second issue has to do with

include( locate_template( 'includes/loop.php', false, false ) );

When using include() the global $post will not be defined in the included file. To have this global variable automatically defined in that template then you need to use get_template_part() or you need to manually define the variable in the file with global $post;

• jarvis

• March 7, 2022 at 4:00 am

Thanks @hube2

I ended up going a slightly different route, combined with this extremely helpful post

After adjusting to my needs, it works a treat!