0
904
VistasEl marcador no muestra @react-google-maps/api en localhost next.js
Soy consciente de que hay preguntas similares a esta... pero nada ha respondido a mi pregunta
Estoy tratando de agregar un marcador a mi mapa de Google, pero no aparece cuando ejecuto el proyecto localmente (funciona bien cuando estoy en mi sitio en vivo)
Aquí está mi componente
import { React, useMemo } from "react"; import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api"; import MapContainerStyles from "./styles/MapContainerStyles"; const Map = () => { const { isLoaded } = useJsApiLoader({ googleMapsApiKey: API_KEY, }); const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []); const onLoad = (marker) => { console.log("marker: ", marker); }; const options = { mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }; if (!isLoaded) return <div>Loading...</div>; return ( <GoogleMap zoom={15} options={options} center={center} mapContainerClassName="map-container"> <Marker onLoad={onLoad} position={center} /> </GoogleMap> ); }; export default Map;Los registros de la consola para los marcadores onLoad devuelven lo siguiente
No hay errores en la consola.
He mirado varios recursos y parece que estoy haciendo todo correctamente... pero el marcador simplemente no se muestra
Cualquier ayuda sería apreciada
3 Respuestas
Responde la pregunta0
El problema que está teniendo es algo introducido por React 18 relacionado con el modo estricto. Si elimina el modo estricto de su aplicación, deberían aparecer los marcadores. Eso también explica por qué la aplicación de Smokey Dawson funcionó en producción. Supongo que eliminaron el modo estricto.
Aquí hay una pequeña documentación al respecto en un problema cerrado del repositorio: https://github.com/JustFly1984/react-google-maps-api/issues/2978
Espero que ya hayas resuelto esto, pero si no, pensé en responderlo ya que me encontré con el mismo problema esta semana.
0
Tuve el mismo problema al usar @react-google-maps/api@2.10.2
Para resolver el problema bajé a @react-google-maps/api@2.7.0
0
Así es como lo implementé:
Puede deberse a que no especificó la posición de apoyo, que la mayoría de las veces toma las mismas coordenadas que las coordenadas del centro.
const markerCoors = { lat: x, lng: y, };