Load google maps asynchronously

[nitya-nalamari]

Reason:

The make-load-script-url file does not add loading=async to its script. This results in a warning that google maps api should be loaded asynchronously for optimal performance.

Ref: https://developers.google.com/maps/documentation/javascript/overview

Issue: #3334

[MohammedWaheeb]

This is much needed

[antoniocolelli]

Just change the way you load the api.

Use this:

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

const {isLoaded, loadError} = useJsApiLoader({ id: 'google-map-script', googleMapsApiKey: YOUR_GOOGLE_MAPS_KEY, });

[SweydManaf]

useJsApiLoader

Just change the way you load the api.

Use this:

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

const {isLoaded, loadError} = useJsApiLoader({ id: 'google-map-script', googleMapsApiKey: YOUR_GOOGLE_MAPS_KEY, });

when you use hooks the component must be client. how to protect the api key?

[JustFly1984]

you are setting CORS in google api console per key. so basically limit the key to your domain name