Google Maps JavaScript API has been loaded directly without loading=async

[kaloraat]

I have been gettin this warning in console, anyone having the same issue?

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

[SiRoCu1976]

Add "loading=async" into your googlemap script tag.

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

This's solve for me.

[JosueBCe]

How to achieve that but without using an API key, just by putting the iframe and PB parameter?
<iframe class="d-block h-100" src='https://www.google.com/maps/embed?pb=@mapValue' callback="Function.prototype" style="border: 0; min-height: 300px;" allowfullscreen="" loading="lazy" title="Map"></iframe>

[JosueBCe]

Here's the solution in razor pages and piranha cms, where the pb is taken from the share>"copy html" code in google maps
If you're using another framework or language, just focus in the js

`
@if (!string.IsNullOrEmpty(Model.Map))
{

<script>
    async function loadMap() {
        const mapValue = '@Html.Raw(Model.Map)';

        const iframe = document.createElement('iframe');
        iframe.classList.add('d-block', 'h-100');
        iframe.src = `https://www.google.com/maps/embed?pb=${mapValue}`;
        iframe.style.border = '0';
        iframe.allowFullscreen = true;
        iframe.loading = 'lazy';
        iframe.title = 'Map';

        document.getElementById('mapContainer').appendChild(iframe);
    }

    window.addEventListener('load', async () => {
        await loadMap();
    });
</script>

}
`

[ashishFld]

But what if we are using react-google-maps/api instead of script?
Then what to do?

[sebastian-meckovski]

But what if we are using react-google-maps/api instead of script? Then what to do?

Replace import useLoadScript with useJsApiLoader in your import from "@react-google-maps/api";

[BALBINOJLC]

Estoy usando agm para cargar mis mapas y me aparece error ahora el mismo y no he podido resolverlo, alguien mas usa angular y me pueda ayudar?

[codmitu]

Estoy usando agm para cargar mis mapas y me aparece error ahora el mismo y no he podido resolverlo, alguien mas usa angular y me pueda ayudar?

add this to your index.html in the head tag

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=YOUR_LIBRARIES&v=weekly"></script>

or

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=YOUR_initMap_FUNCTION&libraries=YOUR_LIBRARIES&v=weekly"></script>

[rodrigoqueiroz01]

if we are using angular js with angular-google-maps?

[emaborsa]

For who is working with React, follow this:

import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';

const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "YOUR_API_KEY"
})

[MarceRios]

Para los que estamos usando @angular/google-maps como resolvemos este problema, he intentado con <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script> y me sale este error Uncaught (in promise) InvalidValueError

[Tintef]

Doesn't seem to be an issue with this repos code, closing to keep issue neat and tidy.