'loading=async' warning

[devhkr]

I'm getting the following warning when using the google-maps-react-markers library in React.

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 think I need to add the loading=async parameter to the url, but I don't see a valid property.
Am I doing something wrong?

[giorgiabosello]

Hi @devhkr, the script in the library is loaded with async mode.
Do you have something else loading the Google Maps JavaScript API besides the google-maps-react-markers library?
Besides, I don't think it's an error, but a warning?

[devhkr]

Hi @giorgiabosello
It's not an error, it's a warning.
If it's not a warning from google-maps-react-markers, I'll have to look further in my code for the cause.
Thanks :)

[gcwright90]

I'm seeing this too as of late, I'm fairly certain there was a recent change in expectations on the Google Maps side of things, due to the same issue being raised in some other Github repos only in the past few weeks.

The reference link provided in the warning recommends referencing the script like:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=&loading=async&callback=initMap">
</script>

@giorgiabosello I don't think this is related to the async attribute on the script element, which is being set here. I think Google is now asking that the script url also contain loading=async in the QS params, and I don't see that being provided here.

[giorgiabosello]

@gcwright90 thank you, I'll give it a check!

[dfeokti]

This is still a thing, Using externalApiParams={{ loading: 'async' }} crashes the page. (React 18, Next 13)

[giorgiabosello]

@dfeokti apparently, this is not easy to solve. As specified in the Google documentation, the loading 'async' isn't required if the callback initMap is passed. Since we work with react and the useScript hook to load the Google Maps script is client-side, we can simply ignore the Google warning (which is just a suggestion for performances).

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