Google maps react multiple markers by mapping

I am trying to use google-map-react with multiple markers.

I have a useState

  const [onlineUsers, setOnlineUsers] = useState([]);

But when I iterate it with the map function, it doesnt show any markers.

return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{
          key: 'PRIVATE',
        }}
        defaultCenter={{ lat: 39.8097343, lng: -98.5556199 }}
        defaultZoom={4.8}
      >
        {/* <AnyReactComponent lat={onlineUsers[0]?.lat} lng={onlineUsers[0]?.lon} text='My Marker' /> */}

  {onlineUsers.map((user) => {
    console.log(user);
    <AnyReactComponent lat={user.lat} lng={user.lon} text={'please work'}/>
  })}
      </GoogleMapReact>
    </div>
  );

Seems to work just fine when I use only one marker at a time. But I need dynamic markers in a useState

Thanks!

Source: Ask Javascript Questions

LEAVE A COMMENT