Google Maps API a.lat is not a function error

javascript arrays google-maps latitude-longitude

11,424

You are passing numbers (actually, strings) into the calcDistanc function. It is using the google.maps.geometry.spherical.computeDistanceBetween method which expects two google.maps.LatLng objects (which have a .lat() method). You need to calculate the distance between two google.maps.LatLng objects.

function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

for(var e=0;e<4;e++){
  var coor=byline[e].split(',');
  alert(calcDistance(coor[0],coor[1]));
}

code snippet:

function calcDistance(p1, p2) {
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

var allText = "-6.168454914420734, 106.7574467\n-6.16897225004169, 106.7570443";
var byline = allText.split('\n');
var path = [];
for (var e = 0; e < byline.length; e++) {
  var coor = byline[e].split(',');
  path.push(new google.maps.LatLng(coor[0], coor[1]));
  if (path.length > 1)
    alert(calcDistance(path[0], path[1]));
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

11,424

Author by

Kenken

Updated on June 09, 2022

Comments

Kenken almost 2 years

I was creating a code that can coordinate data from CSV file by using a split as the separator, and will calculate the distance between two input coordinates. But the result always shows the error a.lat is not a function. I already surf the web about this particular error type and can't seem to find the correct solution, can anyone please help me with this error.

Here is my coordinate example :

-6.168454914420734, 106.7574467
-6.16897225004169, 106.7570443

And here is my code :

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>

<script>
function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

function encodeLatLngPolygon(array) {

var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);

var path = poly.getPath();

for(var i=0;i<array.length;i++) {
    var xyz = new google.maps.LatLng(parseFloat(array[i][0]).toFixed(2), parseFloat(array[i][1]).toFixed(2));
    path.push(xyz);            

}

var code = google.maps.geometry.encoding.encodePath(path)

return code;
}

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;

                var byline = allText.split('\n');

                for(var e=0;e<4;e++){
                var coor=byline[e].split(',');
                alert(calcDistance(coor[0],coor[1]));

                }



            }
        }
    }
    rawFile.send(null);
}

function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

  readTextFile("DaerahG.csv");


}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>kenny</title>
</head>

<body>
<div id="googleMap" style="width:1000px;height:700px; float:left;"></div>

</body>

</html>