import GoogleMapReact from 'google-map-react';
import { useEffect, useRef } from 'react';
import { Wrapper, Marker } from './styles';
const ParkingSpaceMarker = ({ text, isTaken }) => (
{text}
);
const GoogleMaps = ({
location = {},
parkingSpaces = [],
zoneAreaColor = '',
zoom,
}) => {
let refMap = useRef(null);
let refZone = useRef(null);
const defaultProps = {
zoom: 15,
};
const drawZonePolygon = (map, maps) => {
if (!maps) return;
var zoneArea = new maps.Polygon({
paths: location?.coords ?? [],
strokeColor: zoneAreaColor ?? '',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: zoneAreaColor ?? '',
fillOpacity: 0.2,
});
refZone.current = zoneArea;
zoneArea.setMap(map);
};
useEffect(() => {
if (refMap.current) {
refZone.current.setMap(null);
drawZonePolygon(refMap.current.map, refMap.current.maps);
}
}, [location?.centre]);
return (
{
refMap.current = { map, maps };
drawZonePolygon(map, maps);
}}
>
{parkingSpaces.map((p, index) => (
))}
);
};
export default GoogleMaps;