title: Cypress & Google Maps dragging moves elements, not the map
body: <p>I am trying to write a test in Cypress (v8):</p>
  <ol>
  <li>When the map loads, we hit an endpoint <code>/myFleet</code> to generate markers.</li>
  <li>Then, the user drags the map.  And <code>onDragEnd</code>, we display a button to &quot;Search Area&quot;</li>
  <li>When user clicks &quot;Drag Area&quot; we again <code>cy.intercept</code> the <code>/myFleet</code> endpoint.</li>
  </ol>
  <p>When I attempt item 2, the Search Area button &amp; the Google Maps zoom controls move &quot;up&quot; the X-axis the same amount as my <code>mousemove</code> event &amp; the <code>click()</code> on the search button does not get triggered.</p>
  <pre><code>cy.get('#live-view-map')
        .trigger('mousedown')
        .trigger('mousemove', { x: 261, y: 0 })
        .trigger('mouseup')
        .wait(500); // just to allow google maps tiles to resettle after drag
  
      cy.findByTestId('button-search-area').click();
  </code></pre>
  <p>Here is a GIF: <a href="https://recordit.co/B6H5iWEyK5" rel="nofollow noreferrer">https://recordit.co/B6H5iWEyK5</a></p>
  <p>and Here is a screen shot of &quot;AFTER&quot;: <a href="https://i.stack.imgur.com/WYPbL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYPbL.jpg" alt="enter image description here" /></a></p>
  <p>Why does my button &amp; google zoom control move up?  I think it's interfering in being able to actually select &amp; click the element.</p>
  <p>Am I not selecting the correct element to drag (<code>cy.get('#live-view-map')</code>)?</p>