Aktualizacja w Zoom nie działa Google-Map-React
import { useState, useEffect, useRef } from "react";
import "./App.css";
import GoogleMapReact from "google-map-react";
import json from "./json/dataValue.json";
import marker from "./asset/marker.png";
const InfoWindow = (props) => {
const { place } = props;
const infoWindowStyle = {
position: "relative",
bottom: 150,
left: "-45px",
width: 220,
backgroundColor: "white",
boxShadow: "0 2px 7px 1px rgba(0, 0, 0, 0.3)",
padding: 10,
fontSize: 14,
zIndex: 100,
};
return (
<div style={infoWindowStyle}>
<div style={{ fontSize: 16 }}>{place.name}</div>
<div style={{ fontSize: 14 }}>
<span style={{ color: "grey" }}>{place.rating} </span>
<span style={{ color: "orange" }}>
{String.fromCharCode(9733).repeat(Math.floor(place.rating))}
</span>
<span style={{ color: "lightgrey" }}>
{String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
</span>
</div>
<div style={{ fontSize: 14, color: "grey" }}>{place.types[0]}</div>
<div style={{ fontSize: 14, color: "grey" }}>
{"$".repeat(place.price_level)}
</div>
<div style={{ fontSize: 14, color: "green" }}>
{place.opening_hours.open_now ? "Open" : "Closed"}
</div>
</div>
);
};
// Marker component
const Marker = ({ show, place }) => {
const markerStyle = {
border: "1px solid white",
borderRadius: "50%",
height: 10,
width: 10,
backgroundColor: show ? "red" : "blue",
cursor: "pointer",
zIndex: 10,
};
return (
<>
{/* <div style={markerStyle} /> */}
{/* {show && <InfoWindow place={place} />} */}
<img src={marker} alt="marker" width={20} style={{ cursor: "pointer" }} />
</>
);
};
function App() {
const [data, setData] = useState({});
const [defaultProps, setDefault] = useState({
center: {
lat: 34.0522,
lng: -118.2437,
},
zoom: 10,
});
const mapRef = useRef();
useEffect(() => {
setData(json);
}, []);
const onChildClickCallback = (key, childProps) => {
setDefault({
center: {
lat: childProps?.lat,
lng: childProps?.lng,
},
zoom: 14,
});
};
const onChange = ({ center, zoom }) => {
setDefault({
center: {
lat: center?.lat,
lng: center?.lng,
},
zoom: zoom,
});
};
return (
<div style={{ height: "100vh", width: "100%" }}>
{data?.length !== undefined && (
<GoogleMapReact
bootstrapURLKeys={{
key: "key",
libraries: ["places", "geometry", "drawing", "visualization"],
}}
center={defaultProps.center}
zoom={defaultProps?.zoom}
onChildClick={onChildClickCallback}
onChange={onChange}
ref={mapRef}
options={{
streetViewControl: true,
draggable: true, // make map draggable
zoomControlOptions: { position: 9 },
keyboardShortcuts: true, // disable keyboard shortcuts
scaleControl: true, // allow scale controle
scrollwheel: true, // allow scroll wheel
// styles: mapsStyle, // change default map styles,
zoomControl: true,
minZoom: 3,
maxZoom: 16,
}}
>
{data?.map((place) => (
<Marker
key={place?.["Project#"]}
lat={place?.Latitude}
lng={place?.Longitude}
show={true}
place={place}
/>
))}
</GoogleMapReact>
)}
</div>
);
}
export default App;
