I am currently in the process of developing a website that utilizes two APIs.
One issue I encountered is ensuring that my Google Maps initialization function waits for a response from one of the APIs before executing.
Here is a snippet of my code:
let Url = "https://ipinfo.io/json";
async function getInfo(url) {
const response = await fetch(url);
// console.log(response);
const data = await response.json();
return data;
}
let ipInfo = getInfo(Url);
console.log(ipInfo);
//Google maps
function initMap() {
var place = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: place
});
var marker = new google.maps.Marker({
position: place,
map: map
});
}
My current challenge lies in synchronizing the execution of the initMap() function with the completion of the getInfo() function. I attempted to resolve this by implementing the following:
let ipInfo = getInfo(Url).then(function(){initMap()...Rest of code});
Unfortunately, this approach did not yield the desired result.