CODEWITHSUNDEEP
javascriptasp.net-coregoogle-mapsblazorgoogle-places-api
RandomUsername
RandomUsername

Reputation: 49

How can I resolve the console warning "Google Maps JavaScript API has been loaded directly without loading=async."?

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?

Upvotes: -1

Views: 100

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

The loading=async is to be added to the url parameters of the script.

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&loading=async" async defer></script>

Upvotes: 1

Related Questions