how using MarkerClusterer with My components

[Eng1Mahmoud]

import { APIProvider, Map, AdvancedMarker, InfoWindow } from '@vis.gl/react-google-maps';
import { useState } from 'react';
import { useFetchProducts } from './useFetchProducts';
import { ProductItem } from '../../general/ProductItem';
import { Box } from '@mui/material';
const MapComponent = () => {

// get API key from environment
const API_KEY = import.meta.env.VITE_VERCEL_MAP_API_KEY;

return (
<Box style={{ width: '100%', height: '60vh' }}>

<Map
mapId={'bf51a910020fa25a'}
defaultZoom={1}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI
style={{ width: '100%', height: '100%' }}
>




);
};
const Markers = () => {
// get products from useFetchProducts
const products = useFetchProducts();
console.log(products);
const [selectedProduct, setSelectedProduct] = useState(null);
// handle click event on marker
const handleClicked = (product) => {
setSelectedProduct(product);
};
return (

{products.map((product, i) => (
<AdvancedMarker
key={i}
position={product.location}
onClick={() => handleClicked(product)}
>
<span style={{
fontSize: '25px',
cursor: 'pointer',
}}>
📦


))}
{selectedProduct && (
<InfoWindow
position={selectedProduct?.location}
onCloseClick={() => setSelectedProduct(null)}

    >
      <Box style={{ width: '300px', height: '300px' }}>
        <ProductItem product={selectedProduct} />
      </Box>

    </InfoWindow>
  )}
</div>

);
};

export default MapComponent;

[Eng1Mahmoud]

up

[Eng1Mahmoud]

up

[zourdyzou]

Next time please create a discussion panel with thorough explanation if you want to be answered.