[3a58bd6] | 1 | import GoogleMapReact from 'google-map-react';
|
---|
[bc20307] | 2 | import { useEffect, useRef } from 'react';
|
---|
[3a58bd6] | 3 |
|
---|
| 4 | import { Wrapper, Marker } from './styles';
|
---|
| 5 |
|
---|
[bc20307] | 6 | const ParkingSpaceMarker = ({ text, isTaken }) => (
|
---|
| 7 | <Marker $isTaken={isTaken}>{text}</Marker>
|
---|
[3a58bd6] | 8 | );
|
---|
| 9 |
|
---|
[bc20307] | 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 | );
|
---|
[3a58bd6] | 63 | };
|
---|
| 64 |
|
---|
| 65 | export default GoogleMaps;
|
---|