inside direction renderer when we click on marker that time how can show custom details InfoWindow data react js

[ajshilshatech]

// In this code, I want to show custom details inside an Infowindow when I click on the directionRenderer marker. I have tried a lot, but //it is not working. Please give me a solution.

import React, { useState } from "react"; import { GoogleMap, DirectionsRenderer, Marker, InfoWindow, } from "@react-google-maps/api"; import { AiFillHome } from "react-icons/ai";

const MarkerDetails = () => { const [directions, setDirections] = useState(null); const [infoWindowOpen, setInfoWindowOpen] = useState(false); const [selectedMarker, setSelectedMarker] = useState(null);

const waypoints = [ { address: "215 Emily St, MountainView, CA", description: "Single family house with modern design", price: "$ 3,889,000", type: "home", bed: 5, bath: 4.5, size: 300, position: { lat: 28.6284537, lng: 77.3769437 }, customIcon: <AiFillHome size={30} />, }, { address: "215 Emily St, MountainView, CA", description: "Single family house with modern design", price: "$ 3,889,000", type: "home", bed: 5, bath: 4.5, size: 300, position: { lat: 28.6213088, lng: 77.3467996 }, customIcon: <AiFillHome size={30} />, }, { address: "215 Emily St, MountainView, CA", description: "Single family house with modern design", price: "$ 3,889,000", type: "home", bed: 5, bath: 4.5, size: 300, position: { lat: 28.5773799, lng: 77.31449359999999 }, customIcon: <AiFillHome size={30} />, }, { address: "215 Emily St, MountainView, CA", description: "Single family house with modern design", price: "$ 3,889,000", type: "home", bed: 5, bath: 4.5, size: 300, position: { lat: 28.570317, lng: 77.3218196 }, customIcon: <AiFillHome size={30} />, }, ];

const handleMarkerClick = (markered) => { alert("HI"); setSelectedMarker(markered); setInfoWindowOpen(true); };

const calculateAndDisplayRoute = () => { const directionsService = new google.maps.DirectionsService(); const waypointsData = waypoints.map((waypoint) => ({ location: waypoint.position, stopover: true, }));

directionsService.route(
  {
    origin: waypointsData[0].location,
    destination: waypointsData[waypointsData.length - 1].location,
    waypoints: waypointsData.slice(1, -1),
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    var infowindow2 = new google.maps.InfoWindow();
    console.log(infowindow2);
    if (status === google.maps.DirectionsStatus.OK) {
      setDirections(result);
    } else {
      console.error("Directions request failed due to " + status);
    }
  }
);

};

useState(() => { calculateAndDisplayRoute(); }, []); const directionsRendererOptions = { markerOptions: { icon: { url: "http://maps.google.com/mapfiles/ms/micons/red.png", // URL of custom icon image scaledSize: new window.google.maps.Size(50, 50), }, }, };

return (

<div style={{ height: "500px", width: "100%" }}> <GoogleMap center={{ lat: 41.85, lng: -87.65 }} zoom={15} mapContainerStyle={{ height: "500px", width: "100%" }} > {directions !== null && ( <DirectionsRenderer directions={directions} // options={{ // markerOptions: { // icon: "http://maps.google.com/mapfiles/kml/paddle/blu-blank.png", // }, // }} /> )}

      {waypoints.map((waypoint, index) => (
        <Marker
          key={index}
          position={waypoint.position}
          icon={"http://maps.google.com/mapfiles/kml/paddle/blu-blank.png"}
          label={"W"}
          onClick={() => handleMarkerClick(waypoint)}   // This is my onclick function is not working here please give me solution asap 
        >
          {selectedMarker === waypoint && infoWindowOpen && (
            <InfoWindow onCloseClick={() => setInfoWindowOpen(false)}>
              <div>HEllo</div>
              <div>here I want to set some Cutome details</div>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </GoogleMap>
  </div>
</div>

); };

export default MarkerDetails;