I’m trying to load the Google Maps JavaScript API in a Blazor application. However, the console keeps showing the warning:
Google Maps JavaScript API has been loaded directly without loading=async.This can result in suboptimal performance.For best-practice loading patterns please see https://goo.gle/js-api-loading
I am using async defer (and have also tried loading="lazy") in my tag in App.razor, but the warning persists.
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places" loading="async" async defer></script>I have a Blazor interop function that looks like this:
async function window.initializeGoogleMapsAutocomplete = (autocompleteElement, dotNetRef) => { // Restricting the autocomplete to place type '(cities)' helps // to limit suggestions to geographic locations rather than addresses. const autocomplete = new google.maps.places.Autocomplete(autocompleteElement, { types: ['(cities)'] }); autocomplete.addListener('place_changed', function () { const place = autocomplete.getPlace(); let city = ""; let state = ""; if (place.address_components) { for (const component of place.address_components) { const types = component.types; // "locality" usually indicates city if (types.indexOf("locality") !== -1) { city = component.long_name; } // "administrative_area_level_1" usually indicates state (short name, e.g. "CA") if (types.indexOf("administrative_area_level_1") !== -1) { state = component.short_name; } } } // Call Blazor method to set city & state on the .NET side dotNetRef.invokeMethodAsync("SetCityState", city, state); });};It just runs after the Maps script is loaded, so I don’t think it’s related to the warning. But I’m including it just in case.
How can I make this warning in the console go away?