Google-Maps-React will not display array of markers

Question

I don't understand why this won't display wildfire data from NASA's api. The latitude and longitude are correct and I can use the Marker Component to make a single Marker appear on the screen just not the array of wildfire events. Why are these markers not displaying? There are over 300 elements in the array

import GoogleMapReact from 'google-map-react';
import { useSelector } from 'react-redux';


function App() {
  const wildfires = useSelector((state: any)=>state.wildfires);
  console.log(wildfires);
  return (
    <div className="App">
      <header className="App-header">
        Wildfires: {wildfires.length}
        <Map
        lat={41.000418}
        lng={-123.0483683}
        zoom={9}
        wildfires={wildfires}/>
      </header>
    </div>
  );
}

const Marker = (props: any) => {
  const { color, name } = props;
  const el = (
      <div className="marker"
        style={{ backgroundColor: color, cursor: 'pointer'}}
        title={name}/>
    )
  return (el)
};

const renderMarkers = (map: any, maps: any, wildfires: any) => {
  for(const item of wildfires){
    let marker = new maps.Marker({
      position: {lat: item.geometry[0].coordinates[0], lng: item.geometry[0].coordinates[1]},
      map,
      title: 'My Marker'
    });
  }
}

const Map = (props: any) => {
  const loading = useSelector((state: any) => state.wildfiresLoading)
    const points = props.wildfires.map((w: any)=>{
      return {
        lat: w.geometry[0].coordinates[0],
        lng: w.geometry[0].coordinates[1]
      }
    })
    console.log(points);
    return (
      <div style={{ height: '100vh', width: '100%' }}>
        {!loading ? <GoogleMapReact
          bootstrapURLKeys={{ key: "YOUR_API_KEY"}}
          defaultCenter={{
              lat: props.lat,
              lng: props.lng
          }}
          yesIWantToUseGoogleMapApiInternals={true}
          defaultZoom={props.zoom}
          // onGoogleApiLoaded={({map, maps}) => renderMarkers(map, maps, props.wildfires)} //Sadly this didn't work
        >
          {props.wildfires.map((w:any, i:any)=><Marker
              key={w.id}
              lat={w.geometry[0].coordinates[0]}
              lng={w.geometry[0].coordinates[1]}
              name={w.title}
              color="red"
            />
          )}
        </GoogleMapReact> : <div>loading</div>}
      </div>
    );
}

// Api / Redux
import axios from 'axios'

export function getWildfires() {
    return function(dispatch: any) {
      dispatch(setWildfiresLoading(true));
      return axios.get("https://eonet.sci.gsfc.nasa.gov/api/v3/events?category=wildfires&status=open")
        .then(( res ) => {
        dispatch(setWildfires(res.data.events));
        dispatch(setWildfiresLoading(false));
      });
    };
  }
  export function setWildfires(wildfires: any) {
    return {
        type: "SET_WILDFIRES",
        payload: wildfires
    }
  }
  export function setWildfiresLoading(loading: Boolean) {
    return {
        type: "SET_WILDFIRES_LOADING",
        payload: loading
    }
  }
  
export const wildfireReducer = function (state = {wildfires: []}, action: any) {
    switch (action.type) {
        case "SET_WILDFIRES":
        return {
            ...state,
            wildfires: action.payload
        };
        case "SET_WILDFIRES_LOADING":
        return {
            ...state,
            wildfiresLoading: action.payload
        };
        default:
        return state;
    }
};

Answer 1

The problem of your google map rendering is you are assigning lat values instead of lng. In your console you will get an error like below,

NaN is an invalid value for the left css style property.

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

Answer 2

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'
  });
}
}