title: Trying to animate markers movement with react-google-maps smoothly
body: <p>I'm trying to animate my google maps markers like this...</p>
  <p><a href="https://jsfiddle.net/rcravens/RFHKd/2363/" rel="nofollow noreferrer">Example of markers animated movement</a></p>
  <p>And i tried to replicate this code into react (using, @react-google-maps/api), but couldn't make it work, i'm having multiple problems, number one, would be that, i'm saving the movement using useState, but, since i have to update this data multiple times quickly, that can cause an actual issue in my component, since is it not recommended to call seState inside a for loop, or multiple times in miliseconds in general.</p>
  <p>This is my code so far (<strong>Focus on the useEffect and makeMarkerMove function</strong>)</p>
  <pre><code>interface IProps {
      resourceData: IResourceMarkers;
  }
  
  interface ICustomGeo {
      lat: number;
      lng: number;
  }
  
  interface ICustomMovement {
      newPosition: ICustomGeo;
  }
  
  const ResourceMarkersHero: FC&lt;IProps&gt; = ({
      resourceData: {
          g: {
              geopoint: { _lat, _long },
          },
      },
  }) =&gt; {
      const [selectedMarker, setSelectedMarker] = useState&lt;boolean&gt;(false);
      const [markerMotion, setMarkerMotion] = useState&lt;ICustomMovement&gt;({
          newPosition: { lat: _lat, lng: _long },
      });
  
      const makeMarkerMove = () =&gt; {
          const delay = 10;
  
          const speed = 100; // how fast will the marker move
          const deltaLat = (_lat - markerMotion.newPosition.lat) / speed;
          const deltaLng = (_long - markerMotion.newPosition.lng) / speed;
  
          for (let i = 0; i &lt;= 100; i++) {
              
              const newLat = markerMotion.newPosition.lat + deltaLat;
              const newLng = markerMotion.newPosition.lng + deltaLng;
  
              setTimeout(() =&gt; {
                  setMarkerMotion((prev) =&gt; ({
                      ...prev,
                      newPosition: {
                          ...prev.newPosition,
                          lat: newLat,
                          lng: newLng,
                      },
                  }));
              }, delay);
          }
      };
  
      useEffect(() =&gt; {
          if (_lat !== markerMotion.newPosition.lat) makeMarkerMove();
          // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [_lat, _long]);
  
      return (
          &lt;&gt;
              {disponibilidad &amp;&amp; (
                  &lt;Marker
                      position={markerMotion.newPosition}
                  &gt;
                    
                  &lt;/Marker&gt;
              )}
          &lt;/&gt;
      );
  };
  
  export default ResourceMarkersHero;
  
  </code></pre>
  <p>The code that i wrote is not updating the state, so, how can i animate my markers smoothly, like in the previous example, how can i change my code to make this work.</p>
  <p>Thanks in advance !</p>
  <p><strong>IMPORTANT UPDATE 1.0</strong></p>
  <p>In google maps docs, you usually use the function setPosition, to update marker's position, the problem, is that, how would i be able to access that function in react, if i'm using react-google-maps/api in order to avoid the setState problem ?</p>
  <p>Well, i tried to use useRef hook, to access <code>&lt;Marker /&gt;</code>component like this.</p>
  <pre><code>const ResourceMarkersHero: FC&lt;IProps&gt; = ({
      resourceData: {
          codigo_tipo_vehiculo,
          g: {
              geopoint: { _lat, _long },
          },
          identificacion,
          nombre,
          disponibilidad,
          equipo,
          telefono,
      },
  }) =&gt; {
  
      const [selectedMarker, setSelectedMarker] = useState&lt;boolean&gt;(false);
      const [markerMotion, setMarkerMotion] = useState&lt;ICustomMovement&gt;({
          newPosition: { lat: _lat, lng: _long },
      });
  
      const markerRef = useRef() as RefObject&lt;Marker&gt;;
  
      console.log(markerRef.current);
  
      const makeMarkerMove = () =&gt; {
          const delay = 10;
  
          const speed = 100; // how fast will the marker move
          const deltaLat = (_lat - markerMotion.newPosition.lat) / speed;
          const deltaLng = (_long - markerMotion.newPosition.lng) / speed;
  
          for (let i = 0; i &lt;= 100; i++) {
              const newLat = markerMotion.newPosition.lat + deltaLat;
              const newLng = markerMotion.newPosition.lng + deltaLng;
  
              setTimeout(() =&gt; {
                  setMarkerMotion((prev) =&gt; ({
                      ...prev,
                      newPosition: {
                          ...prev.newPosition,
                          lat: newLat,
                          lng: newLng,
                      },
                  }));
              }, delay);
          }
      };
  
      useEffect(() =&gt; {
          if (_lat !== markerMotion.newPosition.lat) makeMarkerMove();
          // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [_lat, _long]);
  
      return (
          &lt;&gt;
              {disponibilidad &amp;&amp; (
                  &lt;Marker
                      onClick={() =&gt; setSelectedMarker(!selectedMarker)}
                      position={markerMotion.newPosition}
                      ref={markerRef}
                  &gt;
                      {selectedMarker &amp;&amp; (
                          &lt;InfoWindow onCloseClick={() =&gt; setSelectedMarker(false)}&gt;
                              &lt;ResourceMarkersModal
                                  identificacion={identificacion}
                                  nombre={nombre}
                                  equipo={equipo}
                                  telefono={telefono}
                              /&gt;
                          &lt;/InfoWindow&gt;
                      )}
                  &lt;/Marker&gt;
              )}
          &lt;/&gt;
      );
  };
  
  export default ResourceMarkersHero;
  
  </code></pre>
  <p>But, when i <code>console.log(markerRef.current)</code> this is what i get</p>
  <p><a href="https://i.stack.imgur.com/tVquT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tVquT.png" alt="enter image description here" /></a></p>
  <p>Can't find setPosition function yet...</p>