Support

Account

Home Forums Front-end Issues ACF Map reset filter

Unread

ACF Map reset filter

  • I’m using the ACF map function where I’m showing hotels and golf courses that’s nearby, where you can filter on distance.

    I’m also having a reset button to go back to the initMap, and it’s working (almost). The hotels are working fine and being set to the initial state, but all the hotels are gone once I press the reset button..

    And I need some help to get this working.

    Here’s my code for the reset-function (sorry for such a long code example):

    jQuery(document).ready(function (et) {
        var CUSTOM_JS = {
            init: function () {
                var $this = this;
                jQuery('body').on('click', '#gc_load_more', $this.gc_load_more);
                jQuery('body').on('click', '#gc_reset_btn', $this.gc_reset_filter);
                jQuery('body').on('change', '#gc_hotel, #gc_range', $this.gc_course_filter);
            },
            gc_reset_filter: function () {
                jQuery('#gc_hotel, #gc_range').val('');
                CUSTOM_JS.gc_course_filter();
            },
            gc_course_filter: function () {
                var load_more_elem = jQuery('#gc_load_more');
                var per_page = load_more_elem.attr('data-per_page');
                var offset = '0';//load_more_elem.attr('data-offset');
                var cat = load_more_elem.attr('data-cat');
                var hotel = jQuery('#gc_hotel').val();
                var range = jQuery('#gc_range').val();
    
                jQuery.ajax({
                    type: 'GET',
                    url: PTGOLF.ajax_url,
                    data: {action: 'course_filter', per_page: per_page, offset: offset, cat: cat, hotel: hotel, range: range},
                    dataType: 'json',
                    beforeSend: function () {
                        jQuery('body').addClass('loading');
                    },
                    success: function (res) {
                        if (res.status == 'success') {
                            jQuery('#gc_list_wrap').html(res.content);
                            jQuery('#map_container').html(res.map);
                            var map = null;
                            jQuery('.acf-map').each(function () {
                                // create map
                                map = CUSTOM_JS.new_map(jQuery(this));
                            });
    
                            google.maps.event.trigger(map, 'resize');
                            if (res.more == 'yes') {
                                load_more_elem.attr('data-offset', res.offset);
                                load_more_elem.parents('.pagination').show();
                            } else {
                                load_more_elem.parents('.pagination').hide();
                            }
                        }
                    },
                    complete: function () {
                        jQuery('body').removeClass('loading');
                    }
                });
            },
            gc_load_more: function () {
                var current = jQuery(this);
                var per_page = current.attr('data-per_page');
                var offset = current.attr('data-offset');
                var cat = current.attr('data-cat');
                var hotel = jQuery('#gc_hotel').val();
                var range = jQuery('#gc_range').val();
    
                jQuery.ajax({
                    type: 'GET',
                    url: PTGOLF.ajax_url,
                    data: {action: 'load_more', per_page: per_page, offset: offset, cat: cat, hotel: hotel, range: range},
                    dataType: 'json',
                    beforeSend: function () {
                        jQuery('body').addClass('loading');
                    },
                    success: function (res) {
                        if (res.status == 'success') {
                            if (res.content != '') {
                                jQuery('#gc_list_wrap').append(res.content);
                            }
                            if (res.more == 'yes') {
                                current.attr('data-offset', res.offset);
                            } else {
                                current.parents('.pagination').hide();
                            }
                        }
                    },
                    complete: function () {
                        jQuery('body').removeClass('loading');
                    }
                });
            },
            new_map: function ($el) {
                // var
                var $markers = $el.find('.marker');
    
                var myStyles = [
                    {
                        featureType: "poi.business",
                        elementType: "labels",
                        stylers: [
                            {visibility: "off"}
                        ]
                    }
                ];
    
                // vars
                var args = {
                    zoom: 16,
                    center: new google.maps.LatLng(0, 0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: myStyles
                };
    
                // create map
                var map = new google.maps.Map($el[0], args);
    
                // add a markers reference
                map.markers = [];
                // add markers
                $markers.each(function () {
                    CUSTOM_JS.add_marker(jQuery(this), map);
                });
                // center map
                CUSTOM_JS.center_map(map);
                // return
                return map;
            },
            add_marker: function ($marker, map) {
                var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
    
                var iconType;
                switch ($marker.attr('data-type')) {
                    case 'house':
                        iconType = 'hus.png';
                        break;
                    case 'golf':
                        iconType = 'golf.png';
                        break;
                    default:
                        iconType = 'hus.png';
                        break;
                }
    
                // create marker
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    icon: {url: PTGOLF.img_dir + iconType}
                });
    
                // add to array
                map.markers.push(marker);
                // if marker contains HTML, add it to an infoWindow
                if ($marker.html()) {
                    // create info window
                    var infowindow = new google.maps.InfoWindow({
                        content: $marker.html()
                    });
                    // show info window when marker is clicked
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                }
            },
            center_map: function (map) {
                // vars
                var bounds = new google.maps.LatLngBounds();
                // loop through all markers and create bounds
                jQuery.each(map.markers, function (i, marker) {
                    var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
                    bounds.extend(latlng);
                });
    
                // only 1 marker?
                if (map.markers.length === 1) {
                    // set center of map
                    map.setCenter(bounds.getCenter());
                    map.setZoom(16);
                }
                else {
                    // fit to bounds
                    map.fitBounds(bounds);
                }
    
            }
        };
        CUSTOM_JS.init();
    });
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.