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 ?

The scope of initMap is limited to the callback function that you pass to .ready. You need to define Google maps' callback function as a property of window. — Titus
– Titus, Commented Jan 8, 2019 at 18:47

Ashvin777 · Accepted Answer · 2019-01-08 18:59:34Z

3

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.

answered Jan 8, 2019 at 18:59

Ashvin777

1,48213 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related