Cuando uso google-maps-react para integrar mapas, el mapa se carga correctamente e incluso muestra los marcadores correctos, pero tengo algunos problemas.

1- Un problema de estilo, normalmente, el componente del mapa se superpone al contenido, creo porque tiene una posición absoluta, pero cuando cambio su posición a relativa, no se muestra. Lo coloqué en un div todo lo que se muestra arriba del div pero superpone el contenido debajo del div.

2- esta dando errores en la consola (los enumero abajo)

• No se recomienda usar UNSAFE_componentWillReceiveProps en modo estricto y puede indicar errores en su código. Mueva el código de obtención de datos o los efectos secundarios a componentDidUpdate. Si está actualizando el estado cada vez que cambian los accesorios, refactorice su código para usar técnicas de memorización o muévalo a getDerivedStateFromProps estático.

• No se puede llamar a setState en un componente que aún no está montado. Esto no es operativo, pero podría indicar un error en su aplicación. En su lugar, asigne a this.state directamente o defina un state = {}; propiedad de clase con el estado deseado en el componente Wrapper.

Mi componente de mapa:

 import React from "react"; import { Map, Marker, GoogleApiWrapper } from "google-maps-react"; export function MapContainer({ google, captains = [] }) { const mapStyles = { width: "85%", height: "100%", }; return ( <Map google={google} // containerStyle={{ // position: "absolute", // width: "85%", // height: "40%", // }} // style={mapStyles} containerStyle={mapStyles} initialCenter={{ lat: captains[0].location.coordinates[1], lng: captains[0].location.coordinates[0], }} zoom={captains.length === 1 ? 18 : 13} > {captains.map((captain) => ( <Marker key={captain._id} position={{ lat: captain.location.coordinates[1], lng: captain.location.coordinates[0], }} /> ))} </Map> ); } export default GoogleApiWrapper({ apiKey: "#############################", })(MapContainer);

Aquí es donde lo estoy usando:

 import MapContainer from "../components/MapContainer"; function Captains({ captains }) { return ( <div className=" h-screen overflow-auto"> <div className="pt-24 pl-20 flex flex-col"> <othercontent ..... /> <div className="visible h-1/3 w-10/12 mx-5"> <MapContainer captains={captains} /> </div> <PaginationTable ..... /> </div> </div> </> ); }