未捕获的TypeError：无法读取未定义的Google Map和jquery的属性'x'

Question

I looked for many answers on this exception, but all solution that I found did not solve my problem.

I'm using jQuery and google map. I have html page contains some elements, and a .js file that contains many functions and ajax calls.

In HTML: I place my script at the end of the body:

<!-- here my .js file--> 
<script type="text/javascript" src="js/myFunctions.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey" async defer>
</script>
</body>

In myFunctions.js file:

I have an ajax call that return the latitude and longitude which I send it to the function that create the map:

initMap(parseFloat($(this).find("latitude").text()),
        parseFloat($(this).find("longitude").text()));

Then I call the map function to create the map:

var map;
initMap = function (lat, lan) {
    console.log(lat);
    map = new google.maps.Map(document.getElementById('locMapDiv'), {
        center: {lat:lat , lng: lan},
        zoom: 13
    });
}

Everything is work fine, however in console it shows error when I drag on map: Uncaught TypeError: Cannot read property 'x' of undefined. I do not know why I got this error, while the drag is work fine.

what could be the reason for this error? because everything seems work fine even the drag and zoom it also work perfect.

Answer 1

Try to reverse the order of included scripts :

<script src="https://maps.googleapis.com/maps/api/js?key=MyKey" async defer>
<script type="text/javascript" src="js/myFunctions.js"></script>

And try to call your init function inside a load function to make sure that the DOM is loaded completely :

google.maps.event.addDomListener(window, "load", , function () {
     initMap(parseFloat($(this).find("latitude").text()),
             parseFloat($(this).find("longitude").text()));
);

Hope this helps.

Answer 2

Try set center with object type LatLng.

For your case, use the code below:

var centerLatLng = new google.maps.LatLng(lat, lan);