I try to create a map with the addresses (cities only) of our members. Of course, only the public data.
So I succeed to extract city and postalcode from member database. This is done in myQueryMembersFunction as webmethod.
I also succeed to get position (latlng) from Google in memberCoordinate function. But the memberCoordinates array is not immediately filled after push. After a timeout of one second or so its fulfilled. As you can see, I tried to work with async operations, but it doesn’t work.
If you ask yourself, why the code in memberCoordinate function its not integrated in myQueryMembersFunction (as it would by my favourite), the answer is simple: I always get “Bad request” for the fetch command.
Does anybody have a suggestions and help?
My code:
import { myQueryMembersFunction } from ‘backend/domicile.web’;
let address =
$w.onReady(async function () {
myQueryMembersFunction().then(async (memberLocation) => {
address = memberLocation;
await memberCoordinate(address);
})
});
async function memberCoordinate(address) {
let memberCoordinates =
await address.forEach(async member => {
let location
if (member.plz != undefined) {
location = member.city + “,” + member.plz
} else
location = member.city
let url = “https://maps.googleapis.com/maps/api/geocode/json?address=” + location +
“&key=[API-Key]”;
await fetch(url, { method: ‘get’ }).then(async (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json()
} else
console.log(httpResponse.statusText)
})
.then(async (json) => {
await memberCoordinates.push({ title: member.nickname, label: member.city, lat: json.results[0].geometry.location.lat, long: json.results[0].geometry.location.lng })
})
})
setTimeout(function () { console.log(“markers”, memberCoordinates) }, 1000);