Advanced Marker is far away from the cursor on the map in FullSize mode

[DidukhV]

Description

How does it work, guys? Why is this happening? In the video you can see that the advanced marker is far away from the cursor, but actually it's not only the marker problem, the same problem also with street view draggable control. It's happening only when the map is in full size.

I WANT TO NOTE THAT MARKER COMPONENT WORKS FINE UNDER THE SAME CONDITIONS

https://www.loom.com/share/5d41d860f6ac470da23be40eba6bf0a4?sid=278e7ad7-083c-4301-80b0-ee977ede368d

Code (PS: APIProvider is used but in the outer component):

export function VisGoogleMap(props: VisGoogleMapProps) {
    const map = useMap(props.mapId);
    const [markerRef, marker] = useAdvancedMarkerRef();
    const geocoder = useGoogleGeocode();

    const [geolocation, setGeolocation] = useState<ExtendedGeolocation>(INITIAL_GEO);
    const [infoWindowShown, setInfoWindowShown] = useState(false);

    useLayoutEffect(() => {
        if (!map) {
            return;
        }
        map.setCenter({ lat: geolocation.latitude, lng: geolocation.longitude } as google.maps.LatLngLiteral);
    }, [geolocation, map]);

    // Used to trigger local state update thus re-rendering of the map and position of the marker
    useEffect(() => {
        if (!props.geolocation) {
            return;
        }
        setGeolocation(props.geolocation);
    }, [props.geolocation]);

    useEffect(() => {
        // WE DON'T NEED TO UNNECESSARY CALL GEOCODER IF THE PROPS GEOLOCATION EQUALS TO THE SET ONE,
        // BUT ONLY IF THE USER SELECTED ITS CURRENT LOCATION
        if (
            geocoder &&
            geolocation &&
            (props.geolocation !== geolocation ||
                (!props.geolocation.text && props.geolocation.locationOrigin === GeolocationOrigin.ReportingUserLocation))
        ) {
            // WHEN THE MARKER IS DRAGGED TO ANOTHER LOCATION IT IS USED TO DETERMINE THE ADDRESS TEXT
            geocoder.geocode({ location: { lat: geolocation.latitude, lng: geolocation.longitude } }).then(e => {
                if (e.results.length > 0) {
                    const formattedAddress = e.results[0].formatted_address;
                    props.onGeoChange({
                        text: formattedAddress,
                        latitude: geolocation.latitude,
                        longitude: geolocation.longitude,
                        locationOrigin: GeolocationOrigin.ManuallySelected
                    });
                }
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [geolocation]);

    const handleMarkerClick = useCallback(() => setInfoWindowShown(isShown => !isShown), []);
    const handleClose = useCallback(() => setInfoWindowShown(false), []);
    const handleDragEnd = useCallback((e: google.maps.MapMouseEvent) => {
        setGeolocation({
            latitude: e.latLng?.lat() ?? 0,
            longitude: e.latLng?.lng() ?? 0
        });
    }, []);

    return (
        <Map
            mapId={props.mapId}
            id={props.mapId}
            defaultCenter={{ lng: INITIAL_GEO.longitude, lat: INITIAL_GEO.latitude }}
            defaultZoom={props.defaultZoom}
            disableDefaultUI={props.disableDefaultControls}
            streetViewControl={false}
            mapTypeControl={false}
        >
            <AdvancedMarker
                ref={markerRef}
                draggable={true}
                position={{ lng: geolocation?.longitude ?? INITIAL_GEO.longitude, lat: geolocation?.latitude ?? INITIAL_GEO.latitude }}
                onDragEnd={handleDragEnd}
                onClick={handleMarkerClick}
            />
            {infoWindowShown && geolocation?.text && (
                <InfoWindow anchor={marker} onClose={handleClose}>
                    {geolocation.text}
                </InfoWindow>
            )}
        </Map>
    );

Steps to Reproduce

Use the code above and check the video, and you will be able to reproduce

Environment

• Library version: Latest
• Google maps version: weekly
• Browser and Version: Chrome, Edge
• OS: Windows

Logs

No response

[DidukhV]

@jezmck @aemkei @morgler @usefulthink I need answers asap please to decide whether to go with your library or not.

[morgler]

Hey @DidukhV thanks for reporting this issue. I'm with the family for Xmas right now and can't look into it in time.

I've also not been a core developer up until now - just using the library like you and fixing a bug along the way.

If you investigate further it would be a great idea to add a failing automated test for your example above. Might also help other devs investigate even faster.

In case you can't fix it in time for you, you can also move to the Google library directly. Fewer features, but might still have all you need.

[DidukhV]

Hey, thanks for the answer, but I don't have the time digging into library, would be nice if you guys could take a look into this one. Thanks in advance and Merry Christmas 🎊

[usefulthink]

What would help immensely (save me some time and make it a lot more likely I will find the time to look into it during my vacation) would be an example that I can just open and look at. You can use any of our examples as a starting point (there's a "Try in CodeSandbox" link in every example).

[DidukhV]

I attached the code and video, please use this as a reference. You can even just set up a project yourself, use advanced market and street view = true option on the map and you can reproduce it easily yourself. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Martin Schuhfuss ***@***.***> Sent: Thursday, December 26, 2024 2:00:29 PM To: visgl/react-google-maps ***@***.***> Cc: Volodymyr Didukh ***@***.***>; Mention ***@***.***> Subject: Re: [visgl/react-google-maps] [Bug] Advanced Marker is far away from the cursor on the map in FullSize mode (Issue #648) What would help immensely (save me some time and make it a lot more likely I will find the time to look into it during my vacation) would be an example that I can just open and look at. You can use any of our examples as a starting point (there's a "Try in CodeSandbox" link in every example). — Reply to this email directly, view it on GitHub<#648 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BDVR6UWUCTNK26MMOGTOMOT2HP4W3AVCNFSM6AAAAABUGCAVMOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRSGY3TMMRTG4>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[usefulthink]

That's what I'm saying :D

I can of course do that myself, but it would save me some time and effort if you provided your example in codesandbox instead.

[usefulthink]

@DidukhV I tried, and can't see the behavior seen in the video. The code you posted doesn't work that well for me since it omits some pieces of information (type-definitions, how is it used, css-styles, etc) and contains things that aren't related to the problem in question.

Can you please try to provide a minimal, reproducible example that shows this problem (preferably in CodeSandbox or similar)? That way I should be able to help you solve it.