Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API a.lat is not a function error

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>
like image 663
Kenken Avatar asked Apr 15 '16 07:04

Kenken


People also ask

Is Google Maps API no longer free?

Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).


1 Answers

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>
like image 166
geocodezip Avatar answered Oct 12 '22 05:10

geocodezip