Google Maps API problem – initMap()

Question

This part of the Google Maps script URL is the culprit:

&callback=initMap

It means that when the script is loaded it will attempt to run the initMap() function, but you’re enqueueing your script that contains the function in the footer, after the Google Maps <script> tag, which you’re outputting in the middle of the page. This means that your script won’t be loaded before Google Maps attempts to run initMap().

You should enqueue the Google Maps script using wp_enqueue_script(), with your custom script as a dependency, to make sure they load in the right order.

So remove the <script> tag and add:

wp_enqueue_script( 
    'google-maps', 
    'https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap',
    [ 'my-map-script' ],
    null,
    true
);

This will ensure that the Google Maps script will be loaded after your script, guaranteeing that the initMap() function will be available.