if(jQuery('.elementor-widget-gs_mb_shop_location').length > 0 ) {

    const locations = JSON.parse( shopLocationVars.shops );
    const geocoder = new MapboxGeocoder(
        {
            accessToken: shopLocationVars.mapboxToken,
            types: 'country,region,postcode,district,place,locality,neighborhood,address',
            countries: 'es',
            // marker: {
            //     color: 'none',
            //     element: document.createElement('span'),
            // },
            placeholder: shopLocationVars.mapboxSearchPlaceholder,
            mapboxgl: mapboxgl,
        }
    );

    const getSortLocation = function(homePoint) {
        let sortLocations   = [];
        homePoint = turf.point(homePoint);

        locations.forEach(function(location) {
            let locationPoint   = turf.point([location.longitude, location.latitude]);
            let currentLocation = [
                location.ID,
                turf.distance(homePoint, locationPoint),
                +location.latitude,
                +location.longitude,
            ];

            sortLocations.push(currentLocation);
        });

        sortLocations.sort((locationA, locationB) => {
            return locationA[1] - locationB[1];
        });

        return sortLocations;
    }

    const geolocateControl = new mapboxgl.GeolocateControl(
        {
            positionOptions: {
                enableHighAccuracy: true,
            },
            showAccuracyCircle: false,
            showUserLocation: false,
        }
    );

    const map = new mapboxgl.Map(
        {
            container: 'map',
            center: [-3.697500754372868, 40.43429658170018],
            zoom: 10.5,
            style: 'mapbox://styles/mapbox/streets-v11',
            accessToken: shopLocationVars.mapboxToken,
            locale: 'es',
        }
    ); 

    map.scrollZoom.disable()

    map.once('load', () => {
        map.resize()
    })

    var nav = new mapboxgl.NavigationControl(
        {
            showCompass: false
        }
    );
    map.addControl(nav, 'bottom-right');    

    geocoder.on('result', function(result) {
        document.querySelector('.gs-mb-map-info-wrapper').scrollIntoView({ 
            behavior: 'smooth' 
        });          
        let sortLocations = getSortLocation(result.result.center);
        let fitBounds = [
            result.result.center,
            [sortLocations[0][3], sortLocations[0][2]]
        ];

        markers[sortLocations[0][0]].getElement().click();

        map.fitBounds(fitBounds, {
            padding: 200
        });
    });

    let markers = [];

    const renderLocationInMap = function() {
        let markerIcon;
        let isFirst = true;

        locations.forEach(function(location) {
            markerIcon = document.createElement('svg');
            markerIcon.innerHTML = shopLocationVars.mapboxMarkerIcon;

            markers[location.ID] = new mapboxgl.Marker(
                {
                    anchor: 'bottom',
                    element: markerIcon,
                }
            ).setLngLat([location.longitude, location.latitude]).addTo(map);

            markers[location.ID].getElement().addEventListener('click', function() {
                let content = document.querySelector('div.gs-mb-shop-data');
                let addressWrapper = document.querySelector('.address-wrapper');
                let phoneWrapper = document.querySelector('.phone-wrapper');
                let scheduleWrapper = document.querySelector('.schedule-wrapper');
                let directions = document.querySelector('.directions');
                content.classList.add('visible');
                content.querySelector('h2').innerHTML = location.name;
                content.querySelector('.address').innerHTML = location.address;
                content.querySelector('.directions').href = 'https://www.google.com/maps/search/?api=1&query=' + encodeURI(location.address);
                content.querySelector('.phone').innerHTML = location.phone;
                content.querySelector('.schedule').innerHTML = location.schedule;
                if(location.ID == 88967) {
                    directions.style.display = 'none';
                } else {
                    directions.style.display = 'block';
                }
            });
        });
    }

    document.querySelector('#geocoder').appendChild(geocoder.onAdd(map));
    document.querySelector('#geolocate-control').appendChild(geolocateControl.onAdd(map));
    document.querySelector('#search-shop').addEventListener('click', function(event) {
        event.preventDefault();
    });

    document.querySelector('.mapboxgl-ctrl-geocoder--input').addEventListener('input', function(event) {
        document.querySelector('.gs-mb-shop-data').classList.remove('visible');
    });

    renderLocationInMap();
}