API карт Google не может найти обратный вызов, определенный в $ (document) .ready

Question

У меня проблема с Jquery и Google Maps API.

Сценарии, кажется, правильно расположены в HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

Проблема в том, что карта инициализации находится внутри $ (document) .ready

$(document).ready(function () {
    let url = "ws://localhost:61614/";
    let topic = "stomp.topic";
    let client;

    let map, trackers = {};

    $("#connect_button").click(function () {
        connect(url);
        return false;
    });

    $("#disconnect_button").click(function () {
        disconnect();
        return false;
    });

    function initMap() {
        let mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(30, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions)

    }
}

Насколько правильно должен быть доступен initMap?

Answer 1

Я думаю, вы забыли вызвать функцию initMap.

Попробуйте это - https://jsitor.com/227rClFCE,

Обратный вызов в пути сценариев https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap будет искать глобальное имя метода initMap, однако оно не определено глобально и находится в области действия document.ready, поэтому не будет выполняться. Либо вызовите метод внутри document.ready callback, либо после добавления этого метода в Window объект, выполнив Window.initMap = initMap ниже initMap функцию.