[ Map, Marker ] WebGL Uncaught Error: Not initialized. - Next js

Abierto
  • ¿Algo no está bien?
#641 1 comentario 3 reacciones 1 asignado Ver en GitHub

@wangela ya está trabajando en esto.

Desde el 20/3/2023.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

triage me type: bug

Thanks for stopping by to let us know something could be better!

PLEASE READ

If you have a support contract with Google, please create an issue in the support console. This will ensure a timely response.

Discover additional support services for the Google Maps Platform, including developer communities, technical guidance, and expert support at the Google Maps Platform support resources page.

If your bug or feature request is not related to this particular library, please visit the Google Maps Platform issue trackers.

Check for answers on StackOverflow with the google-maps tag.

Please be sure to include as much information as possible:

Environment details
  1. Specify the API at the beginning of the title (for example, "Places: ...")
  2. OS type and version
  3. Library version and other environment information
Steps to reproduce
  1. Refresh
Code example

_app.tsx

<Wrapper
      apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string}
      version={"beta"}
      libraries={["marker"]}
    >
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <AuthWrapper {...props} />
        </QueryClientProvider>
      </RecoilRoot>
    </Wrapper>

some_page.tsx

<Map
          style={{ width: "100%", height: "calc(100vh - 56px - 48px)" }}
          center={{ lat: 37.541, lng: 126.986 }}
          zoom={10}
          disableDefaultUI={true}
          zoomControl={true}
          gestureHandling="greedy"
          mapId={"ffd73acbe75007f4"}
        >
          <MapMarker
            position={{ lat: 37.541, lng: 126.986 }}
            title={"Pin"}
            onClick={(marker, latLng) => console.info(marker, latLng)}
          />
        </Map>
      </div>

Map.tsx

import { useDeepCompareEffectForMaps } from "@/hooks/useDeepCompareEffectForMaps";
import React from "react";
import useDeepCompareEffect from "use-deep-compare-effect";

type MapProps = {
  style: { [key: string]: string };
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onIdle?: (map: google.maps.Map) => void;
} & google.maps.MapOptions &
  React.PropsWithChildren;

const Map = ({ onClick, onIdle, children, style, ...options }: MapProps) => {
  const ref = React.useRef<HTMLDivElement>(null);
  const [map, setMap] = React.useState<google.maps.Map>();

  React.useEffect(() => {
    if (ref.current && !map) {
      setMap(new window.google.maps.Map(ref.current, options));
    }
  }, [ref, map]);

  useDeepCompareEffectForMaps(() => {
    if (map) {
      map.setOptions(options);
    }
  }, [map, options]);

  React.useEffect(() => {
    if (map) {
      ["click", "idle"].forEach((eventName) =>
        google.maps.event.clearListeners(map, eventName)
      );

      if (onClick) {
        map.addListener("click", onClick);
      }

      if (onIdle) {
        map.addListener("idle", () => onIdle(map));
      }
    }
  }, [map, onClick, onIdle]);
  // [END maps_react_map_component_event_hooks]

  // [START maps_react_map_component_return]
  return (
    <>
      <div ref={ref} style={style} />
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          // set the map prop on the child component
          // @ts-ignore
          return React.cloneElement(child, { map });
        }
      })}
    </>
  );
};

export default Map;
Stack trace
Uncaught Error: Not initialized.
    at aZ (webgl.js:182:509)
    at D8a.wj (webgl.js:965:13)
    at C8a.wj (webgl.js:551:262)
    at B8a.m (webgl.js:552:228)
    at Sla (map.js:18:28)
    at Rla (map.js:19:203)
    at Ru (map.js:16:496)
    at Object.Lj (map.js:62:233)
    at HTMLDivElement.<anonymous> (common.js:210:701)

Following these steps will guarantee the quickest resolution possible.

Thanks!

Lenguaje dominante
TypeScript
Estrellas
381
Forks
50
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de googlemaps/react-wrapper

Todos los issues de googlemaps/react-wrapper

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.