Lo que quiero:
Tener una aplicación ReactJS predeterminada con un mapa de Google
Problema:
El marcador no se muestra
Razón posible:
El marcador se ha agregado antes de que el mapa finalice la carga.
Archivos:
App.js, (archivo ReactJS predeterminado)
Map.js, (Componente ReactJS personalizado)
./estilo/mapa.css
Mapa.js:
import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api"; import React from "react"; import "./style/map.css"; const Map = ({ zoomLevel, map_lat, map_lng, mark_lat, mark_lng }) => { const center = { lat: map_lat, lng: map_lng }; const { isLoaded } = useLoadScript({ googleMapsApiKey: "---USE API KEY HERE---", }); //Return maps if (!isLoaded) { return <div>Loading...</div>; } else { return ( <GoogleMap mapContainerClassName="map-container" zoom={zoomLevel} center={center} onLoad={() => { console.log("Map is loaded!"); }} > {/* Debug Purpose */} {console.warn("Marker been added!")} {/* Add Marker */} <Marker position={{ lat: mark_lat, lng: mark_lng }} /> </GoogleMap> ); } }; Map.defaultProps = { zoomLevel: 14, map_lat: 50, map_lng: -100, mark_lat: 50, mark_lng: -100, }; export default Map;Información extra:
Como puede notar, tengo un registro de consola y una advertencia para indicar el orden de procesamiento, según tengo entendido,
Parece que el marcador se agregó antes de que el mapa se cargara por completo.
Resultado de la depuración: se agregó el marcador antes de que se llamara a Map onLoad.
Y logré representar el marcador en el mapa manualmente (host local):
elimine el Marcador en tiempo de ejecución y guarde los cambios (así que deje que el Mapa termine de cargarse primero).
agregar marcador. (El mapa ya terminó de cargarse)
Y ahora tengo el marcador, pero no estará aquí la próxima vez.
Agregar marcador manualmente después de renderizar el mapa, aparece el marcador.
Finalmente rendericé mi marcador en la página web.
En caso de que enfrente el mismo problema, aquí hay un código de ejemplo de la documentación de instalación de @react-google-maps/api:
No me preguntes cuál es el problema ni ningún detalle, porque yo tampoco lo sé.
import React from 'react' import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; const containerStyle = { width: '400px', height: '400px' }; const center = { lat: -3.745, lng: -38.523 }; function MyComponent() { const { isLoaded } = useJsApiLoader({ id: 'google-map-script', googleMapsApiKey: "YOUR_API_KEY" }) const [map, setMap] = React.useState(null) const onLoad = React.useCallback(function callback(map) { const bounds = new window.google.maps.LatLngBounds(center); map.fitBounds(bounds); setMap(map) }, []) const onUnmount = React.useCallback(function callback(map) { setMap(null) }, []) return isLoaded ? ( <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={onLoad} onUnmount={onUnmount} > { /* Child components, such as markers, info windows, etc. */ } <></> </GoogleMap> ) : <></> } export default React.memo(MyComponent)