48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
|
|
|
|
function InputGoogleMaps(props) {
|
|
const containerStyle = {
|
|
width: "500px",
|
|
height: "500px",
|
|
};
|
|
|
|
const center = {
|
|
lat: props.coordinates[0],
|
|
lng: props.coordinates[1],
|
|
};
|
|
const [visibility, setVisibility] = useState(true);
|
|
|
|
const handleMapClick = (event) => {
|
|
const location = {
|
|
lat: event.latLng.lat(),
|
|
lng: event.latLng.lng(),
|
|
};
|
|
if (event.placeId) {
|
|
setVisibility(false);
|
|
props.setCoordinates([location.lat, location.lng], event.placeId);
|
|
} else {
|
|
setVisibility(true);
|
|
props.setCoordinates([location.lat, location.lng]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<LoadScript googleMapsApiKey="AIzaSyDAlZSiBanP52qpZ1kaH06XkuA2zndLUd8">
|
|
<GoogleMap
|
|
mapContainerStyle={containerStyle}
|
|
center={center}
|
|
zoom={7}
|
|
onClick={handleMapClick}
|
|
>
|
|
<Marker
|
|
position={{ lat: props.coordinates[0], lng: props.coordinates[1] }}
|
|
visible={visibility}
|
|
/>
|
|
</GoogleMap>
|
|
</LoadScript>
|
|
);
|
|
}
|
|
|
|
export default React.memo(InputGoogleMaps);
|