The
You have to change the rendering wildfires
list like below,
{
props.wildfires.map((w:any, i:any)=><Marker
key={w.id}
lat={w.geometry[0].coordinates[1]}
lng={w.geometry[0].coordinates[0]}
name={w.title}
color="red" />
)}
I created demo project instead of loading data from NASA's REST API
, I mocked couple of data which is coming from the NASA's
api response.
DEMO
CodePudding user response:
Add property to GoogleMapReact label:
onGoogleApiLoaded={({map, maps}) => renderMarkers(map, maps)}
Create function renderMarkers:
const renderMarkers = (map, maps) => {
for(item of props.wildfires){
let marker = new maps.Marker({
position: {lat: item.geometry[0].coordinates[0], lng: item.geometry[0].coordinates[1]},
map,
title: 'My Marker'
});
}
}