Last change
on this file since 0707e4e was 3a58bd6, checked in by Viktor <39170279+Tasevski2@…>, 3 years ago |
Added Frontend
|
-
Property mode
set to
100644
|
File size:
1.1 KB
|
Rev | Line | |
---|
[3a58bd6] | 1 | import GoogleMapReact from 'google-map-react';
|
---|
| 2 |
|
---|
| 3 | import { Wrapper, Marker } from './styles';
|
---|
| 4 |
|
---|
| 5 | const ParkingSpaceMarker = ({ text, free }) => (
|
---|
| 6 | <Marker $free={free}>{text}</Marker>
|
---|
| 7 | );
|
---|
| 8 |
|
---|
| 9 | const GoogleMaps = ({ location, parkingSpacesLocation, zoneAreaColor }) => {
|
---|
| 10 | const defaultProps = {
|
---|
| 11 | zoom: 18,
|
---|
| 12 | };
|
---|
| 13 | const drawZonePolygon = (map, maps) => {
|
---|
| 14 | var zoneArea = new maps.Polygon({
|
---|
| 15 | paths: location.coords,
|
---|
| 16 | strokeColor: zoneAreaColor,
|
---|
| 17 | strokeOpacity: 0.8,
|
---|
| 18 | strokeWeight: 2,
|
---|
| 19 | fillColor: zoneAreaColor,
|
---|
| 20 | fillOpacity: 0.2,
|
---|
| 21 | });
|
---|
| 22 | zoneArea.setMap(map);
|
---|
| 23 | };
|
---|
| 24 | return (
|
---|
| 25 | <Wrapper>
|
---|
| 26 | <GoogleMapReact
|
---|
| 27 | defaultCenter={location.center}
|
---|
| 28 | defaultZoom={defaultProps.zoom}
|
---|
| 29 | yesIWantToUseGoogleMapApiInternals={true}
|
---|
| 30 | onGoogleApiLoaded={({ map, maps }) => drawZonePolygon(map, maps)}
|
---|
| 31 | >
|
---|
| 32 | {parkingSpacesLocation.map((p, index) => (
|
---|
| 33 | <ParkingSpaceMarker
|
---|
| 34 | key={index}
|
---|
| 35 | lat={p.lat}
|
---|
| 36 | lng={p.lng}
|
---|
| 37 | free={p.free}
|
---|
| 38 | text={p.parkingSpaceNumber}
|
---|
| 39 | />
|
---|
| 40 | ))}
|
---|
| 41 | </GoogleMapReact>
|
---|
| 42 | </Wrapper>
|
---|
| 43 | );
|
---|
| 44 | };
|
---|
| 45 |
|
---|
| 46 | export default GoogleMaps;
|
---|
Note:
See
TracBrowser
for help on using the repository browser.