CODEWITHSUNDEEP
angulargoogle-maps
Nancy
Nancy

Reputation: 1021

InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an Object

I am using angular google maps to set the current position and agm-direction to set the direction. Below is the code and I am getting the above mentioned error.

Upvotes: 3

Views: 5484

Answers (3)

CodeToLife
CodeToLife

Reputation: 4171

in my case in JS Map API samples for Directions Service I copied this code :

origin: {
    query: document.getElementById("start").value,
  }

where you should use only:

origin: value  //LatLng, String of address or google.maps.Place

Then replaced that {query:..} with LatLng object and the error gone. I found it reasonable to put here this answer because people like me copy past samples' code to gain time and trust it and dont see or understand what is this.

Upvotes: 0

Banny
Banny

Reputation: 111

Note: make sure you call get get direction after setting data to lat ,lon variables to avoid race condition. and parse your values as Float like in the code snippet below

 getDirection() {
    this.origin = { lat: parseFloat(this.startLat), lng: parseFloat(this.startLon) };
    this.destination = { lat:parseFloat(this.endLat), lng: parseFloat(this.endLon) };


    console.log(this.origin, this.destination);

  }

Upvotes: 0

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

This will be probably because your lat, lng of your component aren't populated when you call getDirections(). getUserLocation() won't result in position coordinates synchronously. You can check the code under getUserLocation() by pasting in your browser console. You will see that it takes time to give you positions. If you are calling getDirections() in between the time taken to give the result.. you would be getting the above said errors.

I made the getDirections() like this:

async getDirection() {
    if (typeof this.lat == "undefined" || typeof this.lng == "undefined" || typeof this.zoom == "undefined") {
      await this.getUserLocation();
    }
    // code below will not be executed until getUserLocation() is complete
    this.origin = { lat: this.lat, lng: this.lng };
    this.destination = { lat: 24.799524, lng: 120.975017 };
}

Your getUserLocation() will be called at max twice..

Upvotes: 2

Related Questions