I have a problem with my react google maps component. Even when I switch between different routes and fetch new data, my component won’t refresh markers. I tried to create a state and change it in useEffect to see if the map is rendered again when changing events and it does. So I assume that something needs to be done with the renderMarkers function but I have no idea what, though. I tried console logging markers and they’re displayed only once during application’s first run.
Parent component:
const EventsPage: React.FC<Props> = ({ page_filter }) => {
const { data: Events_data, isFetching } = useGetEventsQuery(page_filter.toLowerCase());
return (
<div className={classes.Main_container}>
<h2 className={classes.Header}>
{page_filter} Events:
</h2>
<Map data={Events_data} />
<div className={classes.Events_container}>
{isFetching && <Loader />}
{Events_data?.length === 0 ?
(
<h2>No Events found in this category.</h2>
) :
(
<Events data={Events_data} />
)
}
</div>
</div>
)
}
Map component (child):
const Map: React.FC<Props> = ({ data }) => {
const events = data?.events;
const center = { lat: 51.107, lng: 17.04 };
const zoom = 14;
const renderMarkers = (map: any, maps: any) => {
events?.map(event => {
const pos = { lat: Number(event.lat), lng: Number(event.lng) };
let color = "";
let path = "";
if (event.type === "Basketball") {
color = "#dd7e01";
path = PathType.BASKETBALL
} else if (event.type === "Volleyball") {
color = "#2160d4";
path = PathType.VOLLEYBALL
} else if (event.type === "Football") {
color = "#30bf1c";
path = PathType.FOOTBALL
} else if (event.type === "Chess") {
color = "#a88253";
path = PathType.CHESS
} else if (event.type === "Tennis") {
color = "#ceff19";
path = PathType.TENNIS
}
let marker = new maps.Marker({
position: pos,
map,
icon: {
path: path,
fillColor: color,
fillOpacity: 1,
strokeColor: color,
scale: 1.15
},
title: `${event.type} by ${event.creator.username}. People: ${event.number_of_people}/${event.people_needed}`
});
console.log(marker);
})
}
return (
<div className={classes.Map_container} id={center.toString()}>
<GoogleMapReact
bootstrapURLKeys={{ key: {API.key} }}
defaultCenter={center}
center={center}
defaultZoom={zoom}
margin={[50, 50, 50, 50]}
// onChange={}
// onChildClick={}
onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}
options={{
backgroundColor: "#282C35",
styles: [
{ elementType: "geometry", stylers: [{ color: "#282C35" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: '#242f3e' }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [{ color: "#E4AD38" }],
},
{
featureType: "transit",
elementType: "labels.icon",
stylers: [{ visibility: "off" }]
},
{
featureType: "road",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi",
stylers: [{ visibility: "off" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ color: "#191919" }],
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [{ color: "#212a37" }],
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{ color: "#9ca5b3" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ color: "#746855" }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{ color: "#1f2835" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#f3d19c" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#191919" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#17263c" }],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [{ color: "#515c6d" }],
},
{
featureType: "water",
elementType: "labels.text.stroke",
stylers: [{ color: "#17263c" }],
},
]
}}
/>
</div>
)
}
