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: , }, { 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: , }, { 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: , }, { 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: , }, ];

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 (

{directions !== null && ( )} {waypoints.map((waypoint, index) => ( handleMarkerClick(waypoint)} // This is my onclick function is not working here please give me solution asap > {selectedMarker === waypoint && infoWindowOpen && ( setInfoWindowOpen(false)}>

HEllo

here I want to set some Cutome details

)} ))}

</div>

); };

export default MarkerDetails;