react-google-maps-api Loading google maps JS API

The following warning has started to appear when using the following @react-google-maps/api/src/LoadScriptNext.

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

Is their a fix for this?

Feb 13 '24 14:02 TimWalkidenWebPro

Wow, I've been just looking for this feature :O

Feb 13 '24 19:02 keita-makino

You must update to the latest version and replace useLoadScript with the newer useJsApiLoader

import { useJsApiLoader } from "@react-google-maps/api";

Feb 22 '24 13:02 rhadooqoo

@rhadooqoo I'm not sure that solves the problem because this library is still using v1.16.2 of @googlemaps/js-api-loader, but that library only fixed loading=async as of v1.16.3 here.

Mar 05 '24 06:03 sderrow

@sderrow Updated to latest version and it worked for me. Thanks @nitya-nalamari 👍

Mar 17 '24 03:03 christopherboisvert

This issue should be closed since it is resolved.

Mar 17 '24 03:03 christopherboisvert

Did not work for me (updated to 2.19.3). For now, injecting with the API key till the library is updated.

googleMapsApiKey: `${import.meta.env.VITE_GOOGLE_MAP_KEY}&loading=async`,

Mar 18 '24 00:03 Vitallyz

@Vitallyz loading=async was added for the LoadScript component in my PR. My PR was merged only a few days ago so not sure if it has been released yet.

The fix you mentioned is what I am currently using as well 😅

Mar 18 '24 14:03 nitya-nalamari