Uncaught TypeError: Illegal constructor in AdvancedMarker nextjs 14

[Lalman888]

I am getting this error in nextjs 14 when I open the page first time . I have a search page for places when I redirect to search It browser gives me this error and If I refresh the page It works fine

 react-dom.development.js:17796 Uncaught TypeError: Illegal constructor
    at new er (js?key=****&v=weekly&callback=initMap:308:369)
    at new _.fr (js?key=****&v=weekly&callback=initMap:311:493)
    at new rR (marker.js:111:365)
    at eval (index.modern.mjs:986:27)
    at commitHookEffectListMount (react-dom.development.js:18071:39)
    at commitHookPassiveMountEffects (react-dom.development.js:19742:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19826:29)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)     

Here is the code.

I want to highlight when hover on placelocation card

{mapSearchData.map((item: any) => {
             return (
               <AdvancedMarker
                 key={item.eventEntityId}
                 zIndex={selected && selected.id === item.id ? 100 : 0}
                 position={{ lat: item.lat ? Number(item.lat) : 0, lng: item.lng ? Number(item.lng) : 0 }}
                 onClick={() => {
                   item === selected ? setSelected(null) : setSelected(item);
                   setHovered(item.id);
                 }}
                 
               >
                 <Pin
                   background={
                       hovered && hovered === item.id
                       ? "red"
                       : "blue"
                   }
                   scale={hovered && hovered === item.id ? 1.5 : 1}
                   borderColor={hovered && hovered === item.id ? "red" : "#2E6AB3"}
                   glyphColor={hovered && hovered === item.id ? "white" : "white"}
                 />
                 {selected && selected.eventEntityId === item.id && (
                   <InfoWindow
                     onCloseClick={() => setSelected(null)}
                     minWidth={200}
                     zIndex={50}
                     position={{ lat: item.lat, lng: item.lng }}

                   >
                 
                     <Place data={selected} />
                   </InfoWindow>
                 )}
               </AdvancedMarker>
             );
           })}

[usefulthink]

A quick note upfront: your API key was visible as part of the stacktrace. I edited it out, but you should probably delete it and create a new one unless it is properly secured and tied to a limited set of APIs and Domains.

As for the error-message, that is something coming from the maps API. I think I've seen something like that before when the maps API was accidentally loaded multiple times. Creating an instance of an unregistered web-component will trigger this error:

This can happen when the maps API is loaded multiple times since the custom elements (<gmp-advanced-marker>) can only be defined once. After loading the api a second time the new element classes can't get registered (they were already registered the first time, and now the code is using the new, unregistered, web-components).

It would be most amazing if you could create a somewhat minimal example for us to reproduce the problem. Without this, I can only give you a couple of hints how you could try to find more information about what's happening:

• check the network-tab and see if there are multiple requests being made to the google mapa api (search for maps.gogleapis.com)
• if that's not the case: in the sources panel, you can switch on "break on uncaught exceptions" and trigger the error. This should have the debugger halt at the exact place the error is created (that will be minified google code, but you can use the autoformatter in the bottom left to make a bit of sense from this). Inspect the type that is being created there (whatever is behind the new would be that "Illegal contructor").

[Lalman888]

Thanks

[MagisterUnivers]

@usefulthink

check the network-tab and see if there are multiple requests being made to the google mapa api (search for maps.gogleapis.com)

On dev it is saved my life. I was sitting 4h to undestand, why my new Marker isnt working, but map is. Then, readed that and launched production, and guess what, it was working entire time :/

*Thank you