1 | import GoogleMapReact from 'google-map-react';
|
---|
2 | import { useEffect, useRef } from 'react';
|
---|
3 |
|
---|
4 | import { Wrapper, Marker } from './styles';
|
---|
5 |
|
---|
6 | const ParkingSpaceMarker = ({ text, isTaken }) => (
|
---|
7 | <Marker $isTaken={isTaken}>{text}</Marker>
|
---|
8 | );
|
---|
9 |
|
---|
10 | const GoogleMaps = ({
|
---|
11 | location = {},
|
---|
12 | parkingSpaces = [],
|
---|
13 | zoneAreaColor = '',
|
---|
14 | zoom,
|
---|
15 | }) => {
|
---|
16 | let refMap = useRef(null);
|
---|
17 | let refZone = useRef(null);
|
---|
18 | const defaultProps = {
|
---|
19 | zoom: 15,
|
---|
20 | };
|
---|
21 | const drawZonePolygon = (map, maps) => {
|
---|
22 | if (!maps) return;
|
---|
23 | var zoneArea = new maps.Polygon({
|
---|
24 | paths: location?.coords ?? [],
|
---|
25 | strokeColor: zoneAreaColor ?? '',
|
---|
26 | strokeOpacity: 0.8,
|
---|
27 | strokeWeight: 2,
|
---|
28 | fillColor: zoneAreaColor ?? '',
|
---|
29 | fillOpacity: 0.2,
|
---|
30 | });
|
---|
31 | refZone.current = zoneArea;
|
---|
32 | zoneArea.setMap(map);
|
---|
33 | };
|
---|
34 | useEffect(() => {
|
---|
35 | if (refMap.current) {
|
---|
36 | refZone.current.setMap(null);
|
---|
37 | drawZonePolygon(refMap.current.map, refMap.current.maps);
|
---|
38 | }
|
---|
39 | }, [location?.centre]);
|
---|
40 | return (
|
---|
41 | <Wrapper>
|
---|
42 | <GoogleMapReact
|
---|
43 | center={location?.centre}
|
---|
44 | zoom={zoom ?? defaultProps.zoom}
|
---|
45 | yesIWantToUseGoogleMapApiInternals={true}
|
---|
46 | onGoogleApiLoaded={({ map, maps, ref }) => {
|
---|
47 | refMap.current = { map, maps };
|
---|
48 | drawZonePolygon(map, maps);
|
---|
49 | }}
|
---|
50 | >
|
---|
51 | {parkingSpaces.map((p, index) => (
|
---|
52 | <ParkingSpaceMarker
|
---|
53 | key={index}
|
---|
54 | lat={p.lat}
|
---|
55 | lng={p.lng}
|
---|
56 | isTaken={p.taken}
|
---|
57 | text={p.psName}
|
---|
58 | />
|
---|
59 | ))}
|
---|
60 | </GoogleMapReact>
|
---|
61 | </Wrapper>
|
---|
62 | );
|
---|
63 | };
|
---|
64 |
|
---|
65 | export default GoogleMaps;
|
---|