I am using google maps autocomplete service to fetch search results for a query.
The sample code is here.
<html>
<head>
<meta charset="UTF-8">
<title>Navigation</title>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=places"></script>
</head>
<body>
<div id="map" class="after-hidden" style="height:100%;width:100%;"></div>
<script>
function initMap() {
try {
autoCompleteService = new google.maps.places.AutocompleteService();
autoCompleteService.getQueryPredictions({}, () => { });
} catch (e) {
console.log(e, "The error should be caught here. But it is not.");
}
}
</script>
</body>
</html>
I am including google javscript library in the head which provides a global variable google for me to use. When google javascript library finished loading it calls the initMap function.
The first parameter to getQueryPredictions method expects a key input (i.e the first parameter must be like { input: 'India' } ). But I am not passing that parameter to it. Therefore i am getting this error on the console.
Error: Missing parameter. You must specify input. places_impl.js:10:330
Now what I was expecting was the catch block in my function to catch this error. But the error is not being caught. Can someone please explain why this is happening and how do I catch this error. I google 'Javscript errors not caught' etc but none of them were able to explain this situation.