Repository navigation
[ Map, Marker ] WebGL Uncaught Error: Not initialized. - Next js #641
Description
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
- Specify the API at the beginning of the title (for example, "Places: ...")
- OS type and version
- Library version and other environment information
Steps to reproduce
- 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!
Activity
wangela commentedon Mar 20, 2023
If you would like to upvote the priority of this issue, please comment below or react with 👍 so we can see what is popular when we triage.
@minemos Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:
google-mapstagThis is an automated message, feel free to ignore.