0

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.

F. Fo
  • 123
  • 6
  • 18
  • 2
    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

2 Answers2

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.

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
1

Try set center with object type LatLng.

For your case, use the code below:

var centerLatLng = new google.maps.LatLng(lat, lan);
Pang
  • 9,564
  • 146
  • 81
  • 122
ZSFS
  • 81
  • 1
  • 5