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

Ouverte
  • Quelque chose ne va pas ?
#641 1 commentaire 3 réactions 1 personne assignée Voir sur GitHub

@wangela y travaille déjà.

Depuis le 20/3/2023.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

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!

Langage dominant
TypeScript
Étoiles
381
Forks
50
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de googlemaps/react-wrapper

Toutes les issues de googlemaps/react-wrapper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.