I had develop the web application for google map api address search
<script src="https://maps.googleapis.com/maps/api/js?key=apikey&libraries=places&callback=initAutocomplete" async defer></script>
This is googlemap api url
when search the address I had called initAutocomplete callback
window.initAutocomplete = function (searchText, compoent, name) { try { const strictBoundsInputElement = document.getElementById( "use-strict-bounds" ); const options = { fields: ["formatted_address", "address_components", "geometry", "name"], strictBounds: false, types: ["premise"], }; if (name == "Ordering") var autocomplete = new google.maps.places.Autocomplete($("#autocomplete")[0], { options, strictBoundsInputElement }); autocomplete.setComponentRestrictions({ 'country': ['uk'] }); autocomplete.setComponentRestrictions("bounds"); const infowindow = new google.maps.InfoWindow(); const infowindowContent = document.getElementById( "infowindow-content" ); infowindow.setContent(infowindowContent); const marker = new google.maps.Marker({ anchorPoint: new google.maps.Point(0, -29), }); google.maps.event.addListener(autocomplete, 'place_changed', function (e) { infowindow.close(); marker.setVisible(false); place = autocomplete.getPlace(); if (!place.geometry || !place.geometry.location) { window.alert("No details available for input: '" + place.name + "'"); return; } marker.setPosition(place.geometry.location); marker.setVisible(true); var street_addr = autocomplete.getPlace().formatted_address; var latitude = autocomplete.getPlace().geometry.location.lat(); var langitude = autocomplete.getPlace().geometry.location.lng(); var placeResult = autocomplete.getPlace(); var addressComponents = placeResult.address_components; var street = ""; var number = ""; var premise = ""; var postalcode = ""; var administrative_area_level_1 = ""; var administrative_area_level_2 = ""; var locality = ""; var postal_town = ""; var country = ""; }); } catch (error) { console.log(error.message); // Call the error callback function and pass the error message //errorCallback(error.message); } };
#autocomplete is textbox when internet not have i.e offline at the time if we search the address ,
https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions this api failed fetch that means
Failed to load resource: net::ERR_INTERNET_DISCONNECTED . This error find on browser console. I am unable to catch this exception on scriptside using catch block. I want to handle this exception if failed to feacth the api then i want to show user friendly message to enduser. How will handle properly and show the user fridenly message