Geolocation Chrome issues

[alex-bird]

Question:
Need Help identifying code issue on chrome.
I am using wixWindowFrontend.getCurrentGeolocation() to display locations close to a user. works perfectly on Firefox / Safari ect showing user location and surrounding locations. just not on Chrome. my site is secure and uses SSL certificates.

Website URL: https://www.club-connect.uk/
This is my code:

import wixWindowFrontend from 'wix-window-frontend';
import wixData from 'wix-data';

wixWindowFrontend.getCurrentGeolocation()
    .then((obj) => {
        // @ts-ignore
        let timestamp = obj.timestamp; // 1495027186984
        let latitude = obj.coords.latitude; // 32.0971036
        let longitude = obj.coords.longitude; // 34.774391099999995
        // @ts-ignore
        let altitude = obj.coords.altitude; // null
        // @ts-ignore
        let accuracy = obj.coords.accuracy; // 29
        // @ts-ignore
        let altAccuracy = obj.coords.altitudeAccuracy; // null
        // @ts-ignore
        let heading = obj.coords.heading; // null
        // @ts-ignore
        let speed = obj.coords.speed;
        console.log("lat: ", latitude, "long: ", longitude)

        $w("#googleMaps2").location = {
            latitude: latitude,
            longitude: longitude,
            "description": "Your Location",
        };

        // Fetch addresses from dataset
        wixData.query('BRS-Clubs')
            .limit(1000)
            .find()
            .then((result) => {
                const items = result.items;
                //console.log('Fetched Items:', items);

                // Calculate distance for each address
                items.forEach((item) => {
                    const addressLat = parseFloat(item.latitude); // Assuming latitude is stored as a string
                    const addressLon = parseFloat(item.longitude); // Assuming longitude is stored as a string

                    if (isNaN(addressLat) || isNaN(addressLon)) {
                        console.error("Invalid coordinates for item: ", item.title);
                        item.distance = Infinity; // Assign a high value to invalid entries
                    } else {
                        //console.log(`Address: ${item.title}, Lat: ${addressLat}, Lon: ${addressLon}`);

                        // Calculate distance
                        const distance = getDistance(latitude, longitude, addressLat, addressLon);
                        item.distance = distance;
                        //console.log(`Distance for ${item.title}: ${distance}`);
                    }
                });

                // Sort items by distance
                items.sort((a, b) => a.distance - b.distance);
                //console.log('Sorted Items by Distance:', items);

                const limitedItems = items.slice(0, 5);
                //console.log('Limited Items:', limitedItems);

                // Update repeater data
                // @ts-ignore
                $w('#repeater3').data = limitedItems;
                console.log("map viewable")

                // Update repeater display
                // @ts-ignore
                $w('#repeater3').onItemReady(($item, itemData) => {

                    // console.log('Item Data:', itemData);
                    $item('#text60').text = itemData.title;

                    // @ts-ignore

                    $w('#box141').expand();
                });

                $w('#text62').collapse();
                $w('#googleMaps2').expand();
            })

            .catch((error) => {
                console.error('Error querying dataset:', error);
            });
    })
    .catch((error) => {
        // @ts-ignore
        let errorMsg = error;
    });

// Haversine formula to calculate the distance between two points
function getDistance(lat1, lon1, lat2, lon2) {
    const R = 6371; // Radius of the Earth in kilometers
    const dLat = deg2rad(lat2 - lat1);
    const dLon = deg2rad(lon2 - lon1);
    const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    const distance = R * c; // Distance in kilometers
    return distance;
}

function deg2rad(deg) {
    return deg * (Math.PI / 180);
}

Any help to get this working on chrome will be greatly appreciated.

[CMSblocks.com]

most likely its from permission settings. Chrome has stricter policies regarding geolocation compared to other browsers. Here are some steps you can take to troubleshoot the problem:

Check User Permissions:
In Chrome, make sure your website has permission to access the user’s location. Users can grant or deny permission prompts displayed in the address bar when a site requests location access.

Browser Behavior:
When a website requests geolocation access for the first time, Chrome displays a permission prompt in the address bar. The user can choose to “Allow” or “Block”.

Here’s how you can leverage these info in your code:

wixWindowFrontend.getCurrentGeolocation()
  .then((obj) => {
    // User granted permission, process location data (as before)
  })
  .catch((error) => {
    if (error.code === 1) { // Permission denied error code (Chrome specific)
      console.error("User denied location access.");
      // Handle permission denial here (display message, offer alternative)
    } else {
      console.error("Error getting geolocation:", error);
      // Handle other errors
    }
  });

By checking the error code in the catch block, you can identify permission denial and take appropriate actions like informing the user and offering alternative functionalities.

[alex-bird]

Hi,

Thanks for the message,
I had thought about adding a catch to see if this was a problem with Chrome specifically, however after adding it doesn’t provide any more information to resolve the issue.

see attached images:

One where location was accepted (no console errors.) and one where location was rejected on chrome

[alex-bird]

Thanks again for your help.

Looks like my issue was with hosting, the wix platform was not correctly getting security protocols when connected by DNS, I changed hosting to pointing and this has resolved the issue.