Google maps API can't find a callback defined in $(document).ready

Question

I have a problem with Jquery and Google Maps API.

Scripts seem to be located correctly in 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>

The problem is that init map is inside $(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)

    }
}

How correctly initMap must be accessed ?

Answer 1

I think you forgot to call initMap function.

Try this - https://jsitor.com/227rClFCE ,

The callback in scripts path https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap will look for global method name initMap , however it is not defined globally and scoped inside document.ready scope so it won't execute. Either call the method inside document.ready callback or else after add this method inside Window object by doing Window.initMap = initMap below initMap function.