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.

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?