Passing waypoint but their not showing in the map instance

[yosiaLukumai]

I am using direction route api, I am passing the waypoints to the component below but the waypoint won't be shown it just show the initial and the last point

import { useEffect, useState } from 'react';
import { useMapsLibrary, useMap } from '@vis.gl/react-google-maps';
import { MapPin, Clock, ArrowRight } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface DirectionProps {
  cordinateFrom: google.maps.LatLng;
  cordinateTo: google.maps.LatLng;
  wayPointsBtn?: google.maps.DirectionsWaypoint[]
}

export function Directions({ cordinateFrom, cordinateTo, wayPointsBtn }: DirectionProps) {
  const map = useMap("map_order");
  const routesLibrary = useMapsLibrary('routes');
  const [directionsService, setDirectionsService] = useState<google.maps.DirectionsService>();
  const [directionsRenderer, setDirectionsRenderer] = useState<google.maps.DirectionsRenderer>();
  const [routes, setRoutes] = useState<google.maps.DirectionsRoute[]>([]);
  const [routeIndex, setRouteIndex] = useState(0);
  const selected = routes[routeIndex];
  const leg = selected?.legs[0];

  useEffect(() => {
    if (!routesLibrary || !map) return;
    setDirectionsService(new routesLibrary.DirectionsService());
    setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map, preserveViewport: true }));
  }, [routesLibrary, map]);

  useEffect(() => {
    if (!directionsService || !directionsRenderer) return;
    try {
      directionsService
        .route({
          origin: cordinateFrom,
          destination: cordinateTo,
          waypoints: wayPointsBtn,
          // optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING,
          provideRouteAlternatives: true
        })
        .then(response => {
          directionsRenderer.setDirections(response);
          setRoutes(response.routes);
        });
    } catch (error) {
      console.log("Error", error);
    }

    return () => directionsRenderer.setMap(null);
  }, [directionsService, directionsRenderer, cordinateFrom, cordinateTo]);


  useEffect(() => {
    if (!directionsRenderer) return;
    directionsRenderer.setRouteIndex(routeIndex);
  }, [routeIndex, directionsRenderer]);

  if (!leg) return null;

  const calculatePrice = (distance: number) => {
    return ((distance * 200).toFixed(2));
  };

  const distanceInKm = leg.distance?.value ? leg.distance.value / 1000 : 0;
  const price = calculatePrice(distanceInKm);

  return (
    <div className="bg-white border relative border-gray-200 rounded-md p-4 my-2 mx-auto text-sm">
      <div className="mb-4">
        <h2 className="text-lg font-semibold text-black mb-2">{selected.summary}</h2>
        <div className="flex items-center text-gray-600 text-xs">
          <MapPin className="w-3 h-3 mr-1" />
          <p>{leg.start_address.split(',')[0]}</p>
          <ArrowRight className="w-3 h-3 mx-1" />
          <p>{leg.end_address.split(',')[0]}</p>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-2 mb-4 text-xs">
        <div>
          <p className="text-gray-500">Distance</p>
          <p className="font-medium text-black">{leg.distance?.text}</p>
        </div>
        <div>
          <p className="text-gray-500">Duration</p>
          <div className="flex items-center">
            <Clock className="w-3 h-3 mr-1 text-gray-600" />
            <p className="font-medium text-black">{leg.duration?.text}</p>
          </div>
        </div>
        <div>
          <p className="text-gray-500">Price</p>
          <div className="flex items-center">
            <p className="font-medium text-black">{price}</p>
          </div>
        </div>
      </div>

      <div>
        <p className="text-xs text-gray-500 mb-1">Select Route</p>
        <Select value={routeIndex.toString()} onValueChange={(value) => setRouteIndex(parseInt(value))}>
          <SelectTrigger className="w-full text-xs">
            <SelectValue placeholder="Select a route" />
          </SelectTrigger>
          <SelectContent>
            {routes.map((route, index) => (
              <SelectItem key={index} value={index.toString()}>
                {route.summary}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

[mrMetalWood]

Are the waypoints completely ignored by the directions calculation? Or are they just not shown on the map but the polyline is correct?

I noticed you don't have the wayPointsBtn listed in the dependency array of the useEffect. So if they are passed in later the effect won't run again.

Try

[directionsService, directionsRenderer, cordinateFrom, cordinateTo, wayPointsBtn]

on the effect that does the route calculation.

If that does not work, could you console.log the wayPointsBtn and share how those look like?

[yosiaLukumai]

Thanks @mrMetalWood , the waypoints when I try to console them the they do exists, also they are passed initially to the component but the map show the first and last point neglecting the midpoints and there are not included in the distance. Also this time I have passed the wayPointsBtn in dependecy array

[mrMetalWood]

That looks like it "should" be working. The directions seem to have 3 locations as well. Otherwise it would be "A"& "B" and not "A" & "C" markers.

The only thing that i can think of at this point is:
Can you check if for some reason the endpoint and the waypoint are exactly the same location? In that case the waypoint marker ("B") would be under the "C" marker and not be visible and it would look like the waypoint is being ignored.

So just to be sure can you console.log the actual lat/lng value of the start/end/waypoint.

[yosiaLukumai]

Thanks @mrMetalWood yeah it happened I was passing incorrectly the destination.