Working through this tutorial from Google: https://developers.google.com/codelabs/maps-platform/google-maps-simple-store-locator
Github code here: https://github.com/googlecodelabs/google-maps-simple-store-locator
file: app.js functions: initMap(), calculateDistances();
My specific issue is that the latlng properties get lost somewhere. The map loads and all the map points load. However when I use the search/autocomplete the map.data is passed as parameter through this function (line 218)
const rankedStores = await calculateDistances(map.data, originLocation);
and is parsed with this function (line 234)
async function calculateDistances(data, origin) {
const stores = [];
const destinations = []
// Build parallel arrays for the store IDs and destinations
data.forEach((store) => {
const storeNum = store.getProperty('storeid');
const storeLoc = store.getGeometry().get();
console.log(storeLoc);
stores.push(storeNum);
destinations.push(storeLoc);
});
in the console.log no geometries appear. the objects and respective latlng properties are there just not the actual coordinates. when I view the storeNum in console. they display as they should. I have verified the coordinates exist in jSON and they map points prove that the map.data.loadGeoJSON is working correctly. I am just going crazy trying to find where the coordinates went and how to ensure they get passed to the calculateDistances function. Any help is appreciated.
Screenshot B:
To retrieve the coordinates from a google.maps.LatLng object (which is what is returned by store.getGeometry().get()), use the .lat() function for latitude, the .lng() function for longitude, or the .toUrlValue() function for a comma separated string containing both.
async function calculateDistances(data, origin) {
const stores = [];
const destinations = []
// Build parallel arrays for the store IDs and destinations
data.forEach((store) => {
const storeNum = store.getProperty('storeid');
const storeLoc = store.getGeometry().get();
console.log(storeLoc.toUrlValue(6));
stores.push(storeNum);
destinations.push(storeLoc);
});