CODEWITHSUNDEEP
javascriptreactjs
hi brian
hi brian

Reputation: 21

InvalidValueError: in property destination: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; and unknown property lat

InvalidValueError: in property destination: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; and unknown property lat

I'm making directions for my application. but when i take lat and lng values ​​i get error like above. lat and lng data are Number. here is my code

I got the reference from here react hook google maps

const MyDirection = () => {
 const [lat, setLat] = useState("");
 const [lng, setLng] = useState("");
 const [status, setStatus] = useState(null);
 const { id } = useParams();
 const [point, setPoint] = useState(null)
 const prevMarkersRef = useRef([]);

 useEffect(() => {
      getUserById();
 }, []);

 const getUserById = async () => {
      const response = await axios.get(`http://localhost:5000/api/datas/${id}`);
      setLat(response.data.lat);
      setLng(response.data.lng);
 };

 useEffect(() => {
      getLocation();
 }, []);

 const getLocation = () => {
      if (!navigator.geolocation) {
           setStatus('Geolocation isn't support your browser');
      } else {
           setStatus('Locating...!!');
           navigator.geolocation.getCurrentPosition((position) => {
                setStatus(null);
                setPoint({
                     lat: position.coords.latitude,
                     lng: position.coords.longitude
                })
           }, () => {
                setStatus('Can't get location!!');
           });
      }
 }
 
 const dest = {
      lat: lat,
      lng: lng
 };

 // Map options
 const { ref, map, google } = useGoogleMaps(
      "https://maps.googleapis.com/maps/api/js?key=my_api_key",
      {
           zoom: 6,
           center: point
      }
 );
 useEffect(() => {
      if (map) {
           // ADD MARKER
           const m = addMarker();
           clearMarkers(prevMarkersRef.current); //clear prev markers
           prevMarkersRef.current.push(m);
           map.setCenter(point);
           //Add Directions
           let directionsService = new google.maps.DirectionsService();
           let directionsRenderer = new google.maps.DirectionsRenderer();
           directionsRenderer.setMap(map);
           calcRoute(directionsService, directionsRenderer);
      }
 }, [point]);

 // SIDE FUNCTIONS
 function clearMarkers(markers) {
      for (let m of markers) {
           m.setMap(null);
      }
 }

 function calcRoute(directionsService, directionsRenderer) {
      let request = {
           origin: point,
           destination: dest,
           travelMode: "DRIVING"
      };
      directionsService.route(request, function (result, status) {
           if (status == "OK") {
                directionsRenderer.setDirections(result);
           }
      });
 }

 return (
      <div>
           <div ref={ref} style={{ width: 600, height: 800 }} />
      </div>
 );
};

export default MyDirection;

Upvotes: 0

Views: 424

Answers (3)

user19483449
user19483449

Reputation:

I don't know if that was it but there was ' in this sentence, 'Geolocation isn't support your browser'

replace the ' with ` where you have sentences like ins't.

and could be causing isnt conflict as js doesn't know where it started and where it ended the string.

const getLocation = () => {
          if (!navigator.geolocation) {
               setStatus(`Geolocation isn't support your browser`); //replace the ' with ` where you have sentences like ins't.
          } else {
               setStatus('Locating...!!');
               navigator.geolocation.getCurrentPosition((position) => {
                    setStatus(null);
                    setPoint({
                         lat: position.coords.latitude,
                         lng: position.coords.longitude
                    })
               }, () => {
                    setStatus(`Can't get location!!`);
               });
          }
     }

Upvotes: 0

user19483449
user19483449

Reputation:

to see what is actually coming from these answers

const getUserById = async () => {
          const response = await axios.get(`http://localhost:5000/api/datas/${id}`);
          setLat(response.data.lat);
          setLng(response.data.lng);

          console.log(response.data.lat, typeof(response.data.lat))
          console.log(response.data.lng, typeof(response.data.lng))
     };

Upvotes: 0

user19483449
user19483449

Reputation:

try this to see what happens.

const [lat, setLat] = useState();
const [lng, setLng] = useState();

Upvotes: 0

Related Questions