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

Offen
  • Stimmt etwas nicht?
#641 1 Kommentar 3 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@wangela arbeitet bereits daran.

Seit 20.3.2023.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

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!

Vorherrschende Sprache
TypeScript
Sterne
381
Forks
50
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus googlemaps/react-wrapper

Alle Issues in googlemaps/react-wrapper

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.