Uncaught TypeError: Cannot read property 'x' of undefined Google Map and jquery

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.

Possible duplicate of [Detecting an undefined object property](https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — Liam, Nov 20 '18 at 12:04

Zakaria Acharki · Answer 1 · 2015-12-12T23:47:37.933

2

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.

edited Dec 12 '15 at 23:47

answered Dec 12 '15 at 23:40

Zakaria Acharki

66,747
15
75
101

when i call init function inside load the map does not appear at all. – F. Fo Dec 13 '15 at 03:38
what could be the reason for this error? because everything seems work fine even the drag and zoom it also work perfect. – F. Fo Dec 13 '15 at 22:35

score 1 · Answer 2 · edited May 20 '17 at 05:42

1

Try set center with object type LatLng.

For your case, use the code below:

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

edited May 20 '17 at 05:42

Pang

9,564
146
81
122

answered Aug 02 '16 at 18:16

ZSFS

81
1
5

var centerLatLng = new google.maps.LatLng(lat, lan); – ZSFS Aug 02 '16 at 18:16
map = new google.maps.Map(document.getElementById('locMapDiv'), { center: centerLatLng, zoom: 13 }); – ZSFS Aug 02 '16 at 18:17

Uncaught TypeError: Cannot read property 'x' of undefined Google Map and jquery

2 Answers2