我用谷歌地图脚本和php代码定制wordpress temple网站。我有问题加载它，他们并不总是工作，有时我必须刷新网站十次，直到它开始工作。

如果它们不起作用，我会出错

"initMap is not a function"

Code of my temple site:

<?php /* Template Name: Mapy */ ?>

<?php get_header(); ?>


<style>
    #colophon{
        display: none;
    }
    .page-template {
        background-color: black!important;
    }
    .gm-style-iw {
        height: 165px!important;
        width: 300px!important;
    }
</style>

<section style="padding-top:70px; padding-bottom:0px;">
    <div id="map" class="no-transition"></div>
    <div class="legend">
        <ul>
            <li>Wielki format</li>
            <li>Citylight</li>
            <li>Backlight</li>
        </ul>
    </div>
</section>

<?php 

    wp_enqueue_script( \'my-map-script\', get_template_directory_uri() . \'/js/my-map-script.js\', array(), \'1.0.0\', true );

    $storeData = [];
    $args = array( \'post_type\' => \'product\');
    $loop = new WP_Query( $args );

    foreach ($loop->posts as $post){
        $storeData[] = [
            \'title\' => apply_filters(\'the_title\', $post->post_title),
            \'url\' => get_permalink(),
            \'num\'   => get_field(\'numer_katalogowy\'),
            \'lat\'   => get_field(\'gps_dlugosc\'),
            \'long\'  => get_field(\'szerokosc_gps\'),
            \'surface\'  => get_field(\'powierzchnia\'),
            \'height\'  => get_field(\'dlugosc\'),
            \'width\'  => get_field(\'szerokosc\'),
            \'light\'  => get_field(\'oswietlenie\'),
        ];
    }
    wp_localize_script(\'my-map-script\', \'storeData\', $storeData);
?>


<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap"></script>


<?php get_footer(); ?>

Code of my js file:

function initMap() {
  // The location of Uluru
    var poznan = {lat: 52.402684, lng: 16.9213905};
    var j = storeData.length;
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    var marker, i;

    var map = new google.maps.Map(document.getElementById(\'map\'), {
          zoom: 15,
          center: poznan,
      }
    );

    for (i = 0; i < j; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(storeData[i].lat, storeData[i].long),
            map: map
        });

        google.maps.event.addListener(marker, \'click\', (function(marker, i) {
            return function() {
                infowindow.setContent(
                    \'<div class="marker-window-content">\' +
                        \'<h3>\' + storeData[i].title + \'</h3>\' +
                        \'<span>\' + storeData[i].num + \'</span>\' +
                        \'<p>\' + \'Wysokość: \' + storeData[i].height + \' m\'+ \'</p>\' +
                        \'<p>\' + \'Szerokość: \' + storeData[i].width + \' m\'+ \'</p>\' +
                        \'<p>\' + \'Powierzchnia: \' + storeData[i].surface + \' m2\'+ \'</p>\' +
                        \'<p>\' + \'Oświetlenie: \' + storeData[i].light + \'</p>\' +
                        \'<a href="\'+ storeData[i].url + \'">\' + \'Przejdź do powierzchni\' + \'</a>\' +
                    \'</div>\'


                );
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

My site