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="" 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.

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./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.

• javascript
• jquery
• ajax
• google-maps

Share Improve this question Follow edited Dec 13, 2015 at 22:35 F. Fo asked Dec 12, 2015 at 23:31 F. FoF. Fo 12377 silver badges1818 bronze badges 1

• 2 Possible duplicate of Detecting an undefined object property – Liam Commented Nov 20, 2018 at 12:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Try to reverse the order of included scripts :

<script src="https://maps.googleapis./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 pletely :

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

Hope this helps.

Try set center with object type LatLng.

For your case, use the code below:

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