Source: pages-sections/Routeplanner-Sections/MarkerToggle.js

import { useState, useRef, useEffect } from "react";

// Data retrieval
import { getAllToilets, toiletLink } from "/data/retrievetoilets";
import { Marker } from "@react-google-maps/api";

/**
 * The function `POIMarkers` maps through an array of points of interest (POI) and renders markers on a
 * map with specified properties and click functionality.
 * @param props - The `POIMarkers` function takes in a `props` object as a parameter. The `props`
 * object contains the following properties:
 * @returns The `POIMarkers` function returns a list of `Marker` components based on the `allPOI` array
 * provided in the `props`. Each `Marker` component is positioned at the latitude and longitude
 * coordinates specified in each `waypoint` object within the `allPOI` array. The title of each marker
 * is set to a combination of the `waypoint.Name` and `p
 */
export function POIMarkers(props) {
  const {
    allPOI,
    setClickLocation,
    image = null,
    poiname = null,
    ...rest
  } = props;
  //   console.log("toiletImage: ", toiletImage);
  return allPOI.map((waypoint) => {
    // console.log(waypoint);
    return (
      <Marker
        position={{
          lat: parseFloat(waypoint.Y),
          lng: parseFloat(waypoint.X),
        }}
        title={waypoint.Name + " " + poiname}
        label={""} // For some reason, if there are no labels, it will be damn laggy
        onClick={() => {
          setClickLocation({
            name: waypoint.Name + " " + poiname,
            location: {
              lat: parseFloat(waypoint.Y),
              lng: parseFloat(waypoint.X),
            },
          });
        }}
        icon={`${image}`}
      />
    );
  });
}