Centre of Google Map on a users location

Ask the community
,
1

Hi,
I have already posted a question about this but I am still struggling.

I have multiple locations mapped on a Google Map, coming from a database;

function sendLocations() {
        getLocations($w('#iBorough').value,$w('#iDistrict').value,$w('#iType').value).then((locations) => {
 let markers = [];
 for (let i = 0; i < locations.length; i++) {
 let loc = locations[i];
            markers.push({title: loc.name, position: {lat: loc.latitude, lng: loc.longitude}}); 
        }
        $w('#htmlMap').postMessage({markers});
    });
 
}

This works, but the map is centered on a fixed location, defined in the HTML.

I have been able to establish a users location using geolocation and then postMessage to the map to centre the map on a users location.

function sendCentre() {
 
        wixWindow.getCurrentGeolocation()
        .then((obj)=>{
 let centreloc = {lat: obj.coords.latitude, lng: obj.coords.longitude}
        $w('#htmlMap').postMessage({centreloc});
 
    });
 
}

The only change I then made to the HTML code was to replace the fixed center location with
event.data.centreloc

I can use this to centre the map on the users location, but then the none of the markers are shown on the map! So I either have all the location makers, but centered on a fixed location or the map centres on a users location but no markers!

What am I doing wrong?

2

Have a read of these previous forum posts to see if they give you any help.
https://www.wix.com/corvid/forum/community-discussion/trying-to-connect-google-maps-to-dynamic-page
https://www.wix.com/corvid/forum/community-discussion/dynamic-item-page-with-google-maps
Wix Code Tutorial | How to Link Google Maps Using Wix Database Coordinates

3

Thanks @givemeawhisky this page is not a dynamic page, but is a map populated from a database. I have multiple markers, which can be filtered, and this works. Currently this centres on the centre of London. I would like the option to have the map centred on the users location. This would then achieve a ‘near me’ type functionality.

This is the page;

https://www.twoterrierssocial.com/the4leggedfoodiemap