You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are encountering an intermittent TypeError with the Map component in our application. The error appears to be related to the Google Maps API, specifically with the instantiation of an object in the Map library.
Error Details
Error Type: TypeError
Error Message: undefined is not an object (evaluating 'new Ja.OC')
Google Maps API Version: @googlemaps/js-api-loader": "1.16.8
Browser Compatibility: Occurs across all major browsers.
Map Library: @googlemaps/js-api-loader
Steps to Reproduce
This error occurs sporadically across different parts of the application where the Map component is used. There are no specific steps to reliably reproduce it, but it seems to be triggered when loading or interacting with the Map component.
Custom Map Component (React)
import{useEffect,useRef,useState,FC,ReactNode,useCallback}from'react';import{Space,useMantineTheme,Box,ActionIcon,rem,Sx,}from'@mantine/core';import{Loader}from'@googlemaps/js-api-loader';import{config}from'../../config';importInputfrom'../Input';import{IconXClose}from'../../icons';importstylesfrom'./styles';constdefaultZoom=15;constdefaultCenter={lat: 52.3727,lng: 4.8931,};interfaceCustomInputContainerProps{children: ReactNode;}constAUTOCOMPLETE_OPTIONS={fields: ['formatted_address','geometry','name','place_id'],strictBounds: false,types: ['geocode'],};constARROW_DOWN_KEY={bubbles: true,cancelable: true,key: 'Down',code: 'Down',keyCode: 40,which: 40,};constENTER_KEY={bubbles: true,cancelable: true,key: 'Enter',code: 'Enter',keyCode: 13,which: 13,triggered: true,};constMap=({
currentLocation,
currentCoordinates,
updateInput,
inputPlaceholder,
error,
disableInput,
inputTooltipPosition,
inputTooltipTitle,
inputTooltipDescription,
CustomInputContainer,
center =defaultCenter,
zoom =defaultZoom,
isHidden,
readOnly,
mapSx ={},
noPaddings =false,
...props}: {currentLocation?: string|null;currentCoordinates?: {lat: number;lng: number}|null;updateInput?: (location: string,placeId?: string)=>void;inputPlaceholder?: string;error?: string;disableInput?: boolean;inputTooltipPosition?: string;inputTooltipTitle?: ReactNode;inputTooltipDescription?: string|null;center?: google.maps.LatLngLiteral;zoom?: number;CustomInputContainer?: FC<CustomInputContainerProps>;isHidden?: boolean;readOnly?: boolean;sx?: Sx;mapSx?: Sx;noPaddings?: boolean;})=>{consttheme=useMantineTheme();constref=useRef<HTMLDivElement>(null);constinputRef=useRef<HTMLInputElement>(null);constautocomplete=useRef<google.maps.places.Autocomplete|null>(null);constmarker=useRef<google.maps.marker.AdvancedMarkerElement>();constcircle=useRef<google.maps.Circle>();constmapRef=useRef<google.maps.Map>();constgeocoder=useRef<google.maps.Geocoder>();constmarkerSvg=document.createElement('div');markerSvg.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="none"> <path fill=${theme.colors[theme.primaryColor][7]} d="M19 34.833c6.333-6.333 12.667-12.004 12.667-19 0-6.995-5.671-12.666-12.667-12.666-6.996 0-12.667 5.67-12.667 12.666S12.667 28.5 19 34.833Z"/> <path fill="#FFFFFF" d="M19 20.583a4.75 4.75 0 1 0 0-9.5 4.75 4.75 0 0 0 0 9.5Z"/> </svg>`;const[address,setAddress]=useState<string>(currentLocation||'');const[coordinates,setCoordinates]=useState<{lat: number;lng: number}|undefined|null>(currentCoordinates);const[isScriptLoaded,setIsScriptLoaded]=useState(false);const{ language }=config.i18n;consthandleBlur=()=>{if(!isScriptLoaded)return;if(!inputRef.current?.value||inputRef.current?.value.length===0){if(updateInput){updateInput('');}setAddress('');setCoordinates(null);return;}// to always select the first option from the search// because we do not have an exact list of options - simulate the choiceconstarrowDownKeyEvent=newKeyboardEvent('keydown',ARROW_DOWN_KEY);google.maps.event.trigger(inputRef.current,'keydown',arrowDownKeyEvent);constenterKeyEvent=newKeyboardEvent('keydown',ENTER_KEY);google.maps.event.trigger(inputRef.current,'keydown',enterKeyEvent);};consthandleLocationChange=useCallback(()=>{if(!isScriptLoaded||!mapRef.current||!google.maps.marker.AdvancedMarkerElement)return;constplace=autocomplete?.current?.getPlace();if(!place?.geometry||!place?.geometry.location){// User entered the name of a Place that was not suggested and// pressed the Enter key, or the Place Details request failed.return;}// If the place has a geometry, then present it on a map.if(place?.geometry.viewport){mapRef.current.fitBounds(place?.geometry.viewport);}else{mapRef.current.setCenter(place?.geometry.location);mapRef.current.setZoom(zoom);}if(marker.current){marker.current.map=null;// Remove marker from the map}if(marker.current){marker.current=newgoogle.maps.marker.AdvancedMarkerElement({position: isHidden
? null
: newgoogle.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()),map: mapRef.current,content: markerSvg,});}circle.current?.setCenter(null);if(updateInput)updateInput(place.formatted_address||'',place.place_id);setAddress(place.formatted_address||'');setCoordinates({lng: place.geometry.location.lng(),lat: place.geometry.location.lat(),});if(place.formatted_address&&inputRef.current){inputRef.current.value=place.formatted_address;}},[isScriptLoaded,updateInput,zoom]);useEffect(()=>{constloader=newLoader({apiKey: config.googleMapsApiKey,
language,version: 'beta',libraries: ['places','marker'],});loader.load().then(()=>{if(!google?.maps?.Map||!ref.current)return;mapRef.current=newgoogle.maps.Map(ref.current,{
center,
zoom,
styles,fullscreenControl: false,mapTypeControl: false,streetViewControl: false,keyboardShortcuts: false,mapId: 'ofcorz_map',});geocoder.current=newgoogle.maps.Geocoder();setIsScriptLoaded(true);});return()=>{setIsScriptLoaded(false);if(!window.google?.maps?.Map)return;(Loaderasany).instance=null;loader.deleteScript();delete(windowasany).google;marker.current=undefined;mapRef.current=undefined;circle.current=undefined;};},[center,language,zoom]);useEffect(()=>{if(!isScriptLoaded||!google.maps?.marker?.AdvancedMarkerElement)return;if(!coordinates&¤tCoordinates){setCoordinates(currentCoordinates);}if(currentLocation){if(marker.current){marker.current.map=null;}marker.current=newgoogle.maps.marker.AdvancedMarkerElement({position: isHidden ? null : center,map: mapRef.current,content: markerSvg,});}circle.current=newgoogle.maps.Circle({map: mapRef.current,radius: 100,center: isHidden ? center : null,fillColor: theme.colors[theme.primaryColor][7],strokeWeight: 0,});},[isHidden,center,zoom,currentLocation,isScriptLoaded,theme.colors,theme.primaryColor,]);useEffect(()=>{if(currentLocation&&isScriptLoaded&&geocoder.current&&google.maps?.marker?.AdvancedMarkerElement){constlocation=coordinates||currentCoordinates
? {location: coordinates||currentCoordinates}
: {address: currentLocation};geocoder.current.geocode(location,(results,status)=>{if(results&&results[0]&&status==='OK'&&mapRef.current){mapRef.current.fitBounds(results[0]?.geometry.viewport);mapRef.current.setCenter(results[0].geometry.location);if(marker.current){marker.current.map=null;// Remove marker from the mapmarker.current=newgoogle.maps.marker.AdvancedMarkerElement({position: isHidden
? null
: newgoogle.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()),map: mapRef.current,content: markerSvg,});}}}).catch((e)=>console.log(e));if(inputRef&&inputRef.current){inputRef.current.value=currentLocation;}}elseif(inputRef&&inputRef.current){inputRef.current.value='';}},[currentLocation,isScriptLoaded,language]);useEffect(()=>{if(!readOnly&&updateInput&&isScriptLoaded&&google.maps?.places?.Autocomplete){autocomplete.current=newgoogle.maps.places.Autocomplete(inputRef.currentasHTMLInputElement,AUTOCOMPLETE_OPTIONS);if(mapRef.current){autocomplete.current.bindTo('bounds',mapRef.current);}autocomplete.current.addListener('place_changed',handleLocationChange);}},[isScriptLoaded]);constInputContainer=CustomInputContainer||Box;return(<Box{...props}><Boxsx={{borderRadius: rem(8), ...mapSx}}ref={ref}id="map"h={140}/>
{updateInput&&(<>{!noPaddings&&<Spaceh="sm"/>}<InputContainersx={noPaddings
? {width: '100%',marginTop: rem(10)}
: {margin: rem(16)}}><InputdefaultValue={address}ref={inputRef}placeholder={inputPlaceholder}error={error}disabled={disableInput}tooltipPosition={inputTooltipPosition}tooltipTitle={inputTooltipTitle}tooltipDescription={inputTooltipDescription}onBlur={handleBlur}readOnly={readOnly}customRightSection={!readOnly&&(<ActionIcononClick={()=>{if(inputRef&&inputRef.current){inputRef.current.value='';inputRef.current.focus();updateInput('');setAddress('');setCoordinates(null);}}}><IconXClosewidth={rem(20)}height={rem(20)}/></ActionIcon>)}/></InputContainer>
{!noPaddings&&<Spaceh="sm"/>}</>)}</Box>
);};exportdefaultMap;
Stack Trace
TypeError ?(maps-api-v3/api/js/58/8-beta/intl/nl_ALL/map)
undefined is not an object (evaluating 'new Ja.OC')
app:///maps-api-v3/api/js/58/8-beta/intl/nl_ALL/map.js at line 123:56
The text was updated successfully, but these errors were encountered:
Oigen43
added
triage me
I really want to be triaged.
type: bug
Error or flaw in code with unintended results or allowing sub-optimal usage patterns.
labels
Oct 14, 2024
This could be either a problem within the maps API or an issue in your code, but it seems unlikely that this has something to do with the @googlemaps/js-api-loader package.
To further diagnose the issue, can you provide a full stack trace of the error so we can see where in your code the error originated?
usefulthink
added
needs more info
This issue needs more information from the customer to proceed.
and removed
type: bug
Error or flaw in code with unintended results or allowing sub-optimal usage patterns.
triage me
I really want to be triaged.
labels
Oct 18, 2024
Issue Report
Summary
We are encountering an intermittent
TypeError
with the Map component in our application. The error appears to be related to the Google Maps API, specifically with the instantiation of an object in the Map library.Error Details
TypeError
undefined is not an object (evaluating 'new Ja.OC')
(maps-api-v3/api/js/58/8-beta/intl/nl_ALL/map)
Environment Details
@googlemaps/js-api-loader": "1.16.8
@googlemaps/js-api-loader
Steps to Reproduce
This error occurs sporadically across different parts of the application where the Map component is used. There are no specific steps to reliably reproduce it, but it seems to be triggered when loading or interacting with the Map component.
Custom Map Component (React)
Stack Trace
The text was updated successfully, but these errors were encountered: