Home Forums Front-end Issues Ajax Filtering of Google Maps


Ajax Filtering of Google Maps

  • 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">
    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">
    	$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('#filters .btn').click(function(){
    		var typeid = jQuery(this).attr("typeid");
    		//alert('typeid: '+typeid);
    			type        : "POST",
    			data		: { action: 'get_location_posts', typeid: typeid}, 
    			dataType	: "html",
    			url : 		myAjax.ajaxurl,			
    			beforeSend	: function(xhr){
    			success     : function(data) {
    				//console.log("success! typeid: " + typeid);	
    			error       : function(xhr, status, error) {
    				var err = eval("(" + xhr.responseText + ")");
    		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', 
    				'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 -->';
    		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 -->';
    // 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!

  • 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;

  • 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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.