onMount inside a function won't re-trigger when a reactive variable changes - google-maps

Question

I need to get google maps autocomplete suggestion when I type a word on input.
maps.svelte
function inputChange() {
onMount(() => {
loader
.load()
.then((google) => {
const map = new google.maps.Map(document.getElementById('map'), mapOptions);
const markerPickUp = new google.maps.Marker({
position: {
lat: 14.6012,
lng: 120.975
},
map: map
});
const displaySuggestions = function (predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
predictionsArray = [];
return;
}
predictionsArray = predictions;
console.log(predictionsArray);
};
const service = new google.maps.places.AutocompleteService();
const sessionToken = new google.maps.places.AutocompleteSessionToken();
service.getPlacePredictions(
{ input: $bookDetails.dropOffLocation, sessionToken: sessionToken },
displaySuggestions
);
})
.catch((e) => {
console.log(e);
});
});
}
$: $bookDetails.dropOffLocation, inputChange();
I tried to log $bookDetails.dropOffLocation after inputChange() just to see if it's bind on the input and it is. Also, the code works well without the onMount() but it's giving me errors on my terminal. It says windows not defined and it has to do with google maps. I think it needs to load the dom first that's why it gives error. I'm using #googlemaps/js-api-loader.

Answer 1

onMount registers a callback that executes when the component is mounted. It is not intended to be called multiple times and only ever will invoke the callback once during the lifecycle of a component.
If you just want to make sure that the component is already mounted when executing some logic, you can set a flag and use that as a guard. E.g.
let mounted = false;
onMount(() => mounted = true);
$: {
$bookDetails.dropOffLocation;
if (mounted) inputChange();
}