ACF Map reset filter

• ljunkatron

• March 23, 2020 at 11:47 pm

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();
});