title: Custom marker popup moves with map instead of staying above a map pin
body: <p>I've made a custom pop up for a google maps marker but the pop up won't stay in place (above the marker) after I drag the map, instead it moves to a new position on the map.</p>
  <p>The popup stays above the marker when I'm dragging but when I release it moves away from the marker.</p>
  <p>I think the popup moves by the dragged distance away from the marker but I can't figure out how to fix it.</p>
  <p>here's the code responsible for positioning popups.</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
    if (marker &amp;&amp; options.position &amp;&amp; boxRef.current) {
      marker.addListener(&quot;click&quot;, () =&gt; {
        // get marker pane
        const floatPane = overlayView.getPanes()?.floatPane;
        const overlayProjections = overlayView.getProjection();
        // get `x` and `y` coordinates relative to the marker
        const divPosition = overlayProjections.fromLatLngToDivPixel(
          marker.getPosition() as google.maps.LatLng
        )!;
        // set popup's `top` and `left` properties to `y` and `x` of `divPosition`
        setPos(divPosition);
        // add container to DOM
        floatPane?.appendChild(boxRef.current);
        // at this moment it all works
        // the problem appears when I'm dragging the map
  
        options.map?.addListener(&quot;drag&quot;, () =&gt; {
          const overlayProjections = overlayView.getProjection();
          if (!overlayProjections) return;
          // divPosition now have wrong coordinates        
          const divPosition = overlayProjections.fromLatLngToDivPixel(
            marker.getPosition() as google.maps.LatLng
          )!;
  
          setPos(divPosition);
          });
        });
  
      return () =&gt; {
        google.maps.event.clearListeners(options.map, &quot;click&quot;);
        google.maps.event.clearListeners(options.map, &quot;drag&quot;);
      };
    }
  }, [marker, overlayView, options]);
  </code></pre>
  <p>full working code is here in a <a href="https://codesandbox.io/s/fervent-tamas-de8bl8?file=/components/Marker.tsx" rel="nofollow noreferrer">Codesandbox</a></p>
  <p>How do I make popup stay with marker after drag?</p>