1

I have an ajax function that queries posts based on users by a certain role which is fine and works but the problem is that I am trying to refresh the markers on Google Maps after the ajax is complete and the posts have been queried.

In my ajax call I input the html output of the results into a div and I am trying to get the map to basically recognise and identify the results in that div and update the markers based on the results in that div.

So for example, when the page loads, there are initially 18 results on the map and when the ajax call is complete, there is meant to be 3 results but when I reinitialize the map after the ajax call, the original 18 results still appear on the map.

I think the problem might be either in the $each function or in the map function as it's not updating the markers correctly. When I logged the titles of the results within the each function, all 18 original results were being returned, even after the ajax call is complete and there are 3 results that have been outputed by html in to the results div.

I hope I have explained my issue clear enough and hopefully someone out there might be able to help me. I'll paste all the relevant code below.

Ajax function to fetch results:

 $('#private').on('click', function(e){
        e.preventDefault();
        var owner = $(this).data('owner');
        var res = $('.total-matches').data('res');
        $('#stm_owner').val(owner);
        $('#stm_res').val(res);
        $(this).addClass('active');

   var data_form = $('.filters').closest('form').serialize();

        $.ajax({
            url: ajaxurl,
            dataType: 'json',
            context: this,
            data: data_form + '&action=ajax_filter',
            beforeSend: function(){
                $('.ajax-row').addClass('loading');
            },
            success: function (data) {
           $('.sorting').html(data.html);
           $('.map-results').html(data.html);
           $('.total-matches span').text(' ' + data.total);
           $('.ajax-row').removeClass('loading');
            },
            complete: function() {
                $('.timeago').timeago();
                initGoogleMap(markersInfo);
            }
        });
    });

Google Maps function:

var markersInfo = $('.ia-map').map(function() {

            var info = {
                id: $(this).data('map-id'),
                address: $(this).data('map-address'),
                title: $(this).data('map-title'),
                price: $(this).data('map-price'),
                latitude: $(this).data('map-latitude'),
                longitude: $(this).data('map-longitude'),
                html: "<img src=" + $(this).data('map-image') + ">",
                link: $(this).data("map-link"),
          contentHtml:  "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + "<div class='changeprice'><div style='display: none;' class='currency-selector'></div>" + $(this).data('map-price') + "</div>" + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
            };

        return info;
    }).get();


var distinctMarkerInfo = [];
markersInfo.forEach(function(item) {
    if (!distinctMarkerInfo.some(function(distinct) {
            return distinct.id == item.id;
        })) distinctMarkerInfo.push(item);
});

initGoogleMap(distinctMarkerInfo);

// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {

    var mapOptions = {
        // zoom: 2,
        // center: new google.maps.LatLng(53.334430, -7.736673)
    },
    bounds = new google.maps.LatLngBounds(),
    mapElement = document.getElementById('map_results'),
    map = new google.maps.Map(mapElement, mapOptions);
    var markerList = []; // create an array to hold the markers

    var geocoder = new google.maps.Geocoder();


    var iconBase = '../assets/images/';



    $.each(markersInfo, function(key, val) {
        var marker = new google.maps.Marker({
            //map: map,
            position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
            title: val.title,
            icon: iconBase + 'single.png',
            info: new google.maps.InfoWindow({
                content: val.contentHtml
            })

        });


        markerList.push(marker); // add the marker to the list

        google.maps.event.addListener(marker, 'click', function() {
            marker.info.open(map, marker);
            });


        var loc = new google.maps.LatLng(val.latitude, val.longitude);
            bounds.extend(loc);
    });


    map.fitBounds(bounds);
    map.panToBounds(bounds);


    markerCluster = new MarkerClusterer(map, markerList, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });

}

And finally the map html:

<div id="map_results" style="width:100%; height:600px;"></div>

and the div that is outputed in to the results div for each result after the ajax call

<div class="ia-map" data-price="<?php echo esc_attr($data_price) ?>" data-date="<?php echo get_the_date('Ymdhi') ?>" data-mileage="<?php echo esc_attr($data_mileage); ?>" data-map-id="<?php echo $id; ?>" data-map-address="<?php echo $location; ?>" data-map-title="<?php echo $title; ?>" data-map-price="<?php echo esc_attr($price); ?>" data-map-latitude="<?php echo $lat; ?>" data-map-longitude="<?php echo $lng; ?>" data-map-image="<?php echo esc_url($img[0]); ?>" data-map-link="<?php the_permalink() ?>" <?php if(isset($distance)): ?>data-distance="<?php echo esc_attr(floatval($distance)); ?>"<?php endif; ?>></div>

and finally the results div itself

<div class="map-results" style="display: none;"></div>
  • on success you call: initGoogleMap(markersInfo) but I cannot see where you overwrite the original markersinfo variable on ajax success..it looks to me that must be something in "data" isn't it? – Andrea Somovigo Jul 22 '18 at 15:20
  • @AndreaSomovigo the only reason I call initGoogleMap(markersInfo) on success is because I thought I had to reinitialize the map in order to refresh the markers. I wasn't really sure what I was doing there to be honest lol – Matt H Jul 22 '18 at 15:39
  • I think it may work, but only if you regenerate the markers array on success, from record pulled from the Ajax response, otherwise the value of the variable 'markersInfo' has not changed – Andrea Somovigo Jul 22 '18 at 18:24
  • @AndreaSomovigo ok so how do I do that? Say for instance I got data.lat and data.lng from the ajax call how would I regenerate the markers and pass those variables into the regenerated markers? – Matt H Jul 22 '18 at 18:27
  • Data (or an inner element of data) must contain the array of markers, same as the original value of 'markersInfo' , with different records as result of your query. Have a look at the original value of markersInfo and if 'data' does not contain something similar your response is not usable.. – Andrea Somovigo Jul 22 '18 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.