Google Maps Javascript API: TypeError: response.data[0].geometry.location.lat is not a function

Question

I successfully get an answer from the Google Map Javascript Api and try to access the values of the google.maps.GeocoderResult to extract the latitude and longitude from the GeocoderGeometry / LatLng

I implemented response.data[0].geometry.location.lat(), following the TSD definition, which lead, while debugging in Chrome, to the error:

  TypeError: response.data[0].geometry.location.lat is not a function

Having a look at the object in the debugger, show effectively that no method lat() or lng() aren't supported.

I could access to response.data[0].geometry.location.lat to successfully get the value in the debugger, but then my code isn't Typescript conform anymore.

Of course I could cast the result but still would like to understand the reason. Furthermore maybe someone has got an explanation and proposition of solution?

Best regards

For the record, the typescript definition:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0e139d5d4681b71d53a30408efcc64b79eed6354/googlemaps/google.maps.d.ts

Update with chrome debug info:

response.data[0].geometry.location.lat() => <not available>
response.data[0].geometry.location.lat: 47.37793800000001

response.data[0].geometry.location: Object
  lat: 47.37793800000001
  lng: 8.5401898

 response.data[0].geometry: Object
    location:Object
      lat:47.377
      lng: 8.5401898

stacktrace of the error:

TypeError: response.data[0].geometry.location.lat is not a function
at interestsParamsCtrl.js:61
at processQueue (ionic.bundle.js:29127)
at ionic.bundle.js:29143
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$digest (ionic.bundle.js:30211)
at Scope.$apply (ionic.bundle.js:30503)
at done (ionic.bundle.js:24824)
at completeRequest (ionic.bundle.js:25022)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:24963)

Update 2: To query the API I do a GET and let the response be parsed

search(searchLocationTerm:string):ng.IPromise<{}> {
  var deferred = this.$q.defer();

  this.$http.get(Resources.Constants.Default.GOOGLE.API.URL,
    {
      params: {
        address: searchLocationTerm,
        key: Resources.Constants.Default.GOOGLE.API.KEY
      }
    })
    .success((response:Communication.IGeocoder) => {
      deferred.resolve(response);
    }).error((response:Communication.IGeocoder) => {
      deferred.reject(response);
  });

  return deferred.promise;
};

Where IGeocoder is

export interface IGeocoder {
  results:google.maps.GeocoderResult[];
  status:google.maps.GeocoderStatus;
}

Could have a try, but I read that effectively response.data[0].geometry.location.lat() should be use, that's why I would like to figure out why that error happens while debugging — David Dal Busco
– David Dal Busco, Commented Jun 14, 2016 at 10:37
What is response.data[0].geometry.location if you output it to the console? — duncan
– duncan, Commented Jun 14, 2016 at 11:49
I used to have similar error message, when I used LatLngLiteral instead of LatLng object. Maybe your error also comes because of this. — MKiss
– MKiss, Commented Jun 14, 2016 at 15:04
Thx that a good hints. I updated the details of my question. As you see I don't manipulate the answer. I do a get and the response is then parser. That would mean that the response is wrongly parsed to a LatLngLiteral instead of an LatLng? Or that the TSD definition is wrong, where it should use LatLngLiteral instead of LatLng in that case? — David Dal Busco
– David Dal Busco, Commented Jun 14, 2016 at 15:14

xomena · Accepted Answer · 2016-06-15 22:51:27Z

0

You are sending a web service request via AJAX. Please note that response of web service Geocoding API is a JSON object as specified in the documentation:

https://developers.google.com/maps/documentation/geocoding/intro?hl=en#GeocodingResponses

You should use a client side geocoding service instead to get an object compliant with definitions in google.maps.d.ts

Look at this example and client-side geocoder service documentation.

answered Jun 15, 2016 at 22:51

xomena

32.3k6 gold badges97 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Dal Busco Over a year ago

Thx. So if I understand correctly, it would mean I'm "misusing" the google.maps.d.ts typescript definition because this definition describe service objects ("with methods") where my http get "only" returns me JSON objects ("without methods"). So in my case I should write my own tsd definition file right?

David Dal Busco Over a year ago

P.S.: thx for the example, but I don't have a "map" in my client, it's about an autocomplete component. In that case I think I should use the service that way with http.get

xomena Over a year ago

Correct, if you look at the source code of google.maps.d.ts you will see that the first line says Type definitions for Google Maps JavaScript API 3.20. You do not use Maps JavaScript API, you use Geocoding API, so this definition file is not appliable. Do you implement your own autocomplete or use the autocomplete widget of Maps JavaScript API?

David Dal Busco Over a year ago

Thx a lot for the confirmation, fully understand now. I'll mark your answer as the good one. Not my own autocomplete, I followed some tutorial and solutions here on stack overflow.

Collectives™ on Stack Overflow

Google Maps Javascript API: TypeError: response.data[0].geometry.location.lat is not a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related