About advancedMarker Animation

[abb438]

I want to reproduce the Drop and Bounce animation of the old Marker class using advancedMarker + Pin Component.
In the code below, .bounce is added to div.GMAMP-maps-pin-view and the bounce animation is working correctly, but when I click on the Marker, the .bounce is removed and the animation stops.
I could not find a method to animate AdvancedMarkerComponent in the docs, example, so I used https://developers.google.com/maps/documentation/javascript/examples/ advanced-markers-animation
as a reference.
Is this the wrong method to begin with?

 const [instance, setInstance] = useState<google.maps.marker.AdvancedMarkerElement | null>(null);
 const setMarkerRef = (markerRef: google.maps.marker.AdvancedMarkerElement | null) => {
    if (instance === null) {
      if (markerRef) {
        setInstance(markerRef);
      }
    }
  };

useEffect(() => {
    if (instance) {
     const markerContent = instance.content as HTMLElement;
     markerContent.classList.add('bounce');
    }
  }, [instance]);
 
 return(
  <AdvancedMarker
      position={position}
      ref={setMarkerRef}
    >
      <Pin>
          <Box
            className='el_mapsMarker'
            width="max-content"
            color="#fff"
            fontFamily="sans-serif"
            fontSize="1.2rem"
            fontWeight="bold"
          >
            {labelText}
          </Box>
        </Pin>
    </AdvancedMarker>
 )

css

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.bounce {
  animation: bounce .75s ease-out infinite;
}

[usefulthink]

A small addition, we have a useAdvancedMarkerRef hook, that can replace your instance and setMarkerRef callback.

So instead of

 const [instance, setInstance] = useState<google.maps.marker.AdvancedMarkerElement | null>(null);
 const setMarkerRef = (markerRef: google.maps.marker.AdvancedMarkerElement | null) => {
    if (instance === null) {
      if (markerRef) {
        setInstance(markerRef);
      }
    }
  };

You can use

import {useAdvancedMarkerRef} from '@vis.gl/react-google-maps';

// ...

const [markerRef, marker] = useAdvancedMarkerRef();

Then you can pass markerRef as ref to the marker component and use marker in your effect.

Besides that the code looks pretty good, and the animation stopping when clicked it doesn't seem to have anything to do with the code you shared. In the future it should be as simple as specifying the className prop for the marker, but that isn't implemented yet.

[abb438]

Thanks for the reply, I see there is a Hook that handles marker refs.
I rewrote it there and wrote it with the minimum configuration.

const [markerRef, marker] = useAdvancedMarkerRef();
  useEffect(() => {
    if (marker) {
      const markerContent = marker.content as HTMLElement;
      markerContent.classList.add('bounce');
    }
  }, [marker]);
return(
 <AdvancedMarker
  position={pos}
  ref={markerRef}
 >
  <Pin>
   Test
  </Pin>
 </AdvancedMarker>
);

In this case, the marker animates only for a split second when it appears on the map, and then stops working without clicking.
When I look at it with devTool, I see that .bounce is not added.
Why is the .bounce class that I added being removed...?

[usefulthink]

maybe it's being removed or replaced by something in the code I'm not seeing, because this seems to work just fine: https://codesandbox.io/p/devbox/objective-bell-9ld9y9?file=%2Fsrc%2Fapp.tsx%3A38%2C26

[abb438]

Certainly the code sample you presented is working fine.
The following code is also working fine in my environment.
The parent component of the MyMap component is routing using reactRouter, but I am not passing anything to the MyMap component.
(I have omitted the memoization, but it is also done.

const MyMap = () => {
 const [markerRef, marker] = useAdvancedMarkerRef();
 useEffect(() => {
  if(!marker) return;
  (marker.content as HTMLElement).className = 'bounce';
 }, [marker]);
 return (
 <Box
  id="mapContainer"
  w="100%"
  h="100%"
  position="relative"
 >
  <APIProvider apiKey={import.meta.env.VITE_MAP_API_KEY}>
   <Map
    mapId={import.meta.env.VITE_MAP_ID}
    defaultZoom={11}
    defaultCenter={{ lat: 35.86344472724575, lng: 139.77477234566504 }}
    gestureHandling="greedy"
    disableDefaultUI
   >
    <AdvancedMarker
     position={{ lat: 35.86344472724575, lng: 139.77477234566504 }}
     ref={markerRef}
    >
　  <Pin
　   scale={2}
　   borderColor="#1e89a1"
　   glyphColor="#0f677a"
  　>
  　 BounceTest
  　</Pin>
    </AdvancedMarker>
   </Map>
  </Box>
 );
}

However, if I add the following code for data acquisition, the class assignment will not work properly.
This code is to get the data for Marker that we originally want to display using rtkQuery, but we do not use any of the acquired data in this sample.
Since it is a very mundane acquisition of data, there is probably no problem...
Even if I were to uncomment out the Hook for other data acquisition, the same symptoms would occur.

const {
 getBranchListResponse,
 getBranchListIsLoading,
} = useBranchList();

Since the symptoms occur whether I comment out my code or not, there is probably a problem with my code and it would be difficult to reply, but I am at a loss to strike because the problem is occurring even with almost minimal configuration.
Please let me know if you find any issues

[usefulthink]

Since #374 is now published in v1.0.1, you can now use the <AdvancedMarker className="..."> prop instead of the effect to add the className.

I'd still be interested to know what is happening in your environment, so if you happen to figure it out, please let me know, maybe there's some learning there that could help us improve the documentation or something like that.

[JCM00N]

@usefulthink The issue still persists when using a Pin component under the AdvancedMarker with className specified.
After investigating into it I found out the issue lies with this line in the Pin component, which overrides the className added in the parent AdvancedMarker.

After adding the following quick fix in my local environment:

+ const {className} = advancedMarker.content;
advancedMarker.content = pinElement.element;
+ advancedMarker.content.className = className;

The className feature does work.
It wasn't tested in multiple use cases, however.
Please let me know if you intend to add it or if I should open a PR myself, thanks

[usefulthink]

Hmm. You're right... But now I'm thinking if it would've been better to apply the class and style to advancedMarker.element (the marker itself), not advancedMarker.content.

Anyway, that would be a breaking change and I don't want to deal with that for now. Your suggestion sounds good and a PR would be more than welcome. We still need to think about if this leaves any room for situations where the className isn't properly initialized. But the PR would be a great place for that discussion.