Question

I am having a problem with using the Google Maps API.

One page load is get the error window.handleApiReady is not a function, where it most certainly is. Looking at the code below you can see I use it as a callback function:

    /**
    * Load GoogleMaps API
    */
    $(function(){
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady';
        document.body.appendChild(script);
    });

    /**
         * Show map once GoogleMaps API is ready
         */
    function handleApiReady() {     
        if ( $("#map_canvas").length > 0 ) {                
            var latlng = $("#store_lat_long").html();
            var details = latlng.split(',');
            initialize(Number(details[0]), Number(details[1]), 'map_canvas');
        }
    }

Sticking an alert or console.log out on the first line of handleApiReady shows that it doesn’t seem to find the function. Why would that be?

Answer 1

The problem was caused with the code I provided being located in a document.ready. Moving it outside of the document.ready solved the problem.