Search code examples
javascriptreactjsgoogle-mapsreact-google-maps

Preventing map from dragging while mouse is within InfoBox (but also allowing text highlighting)

I'm using react-google-maps, and I have an InfoBox that opens on marker click, with some text, input fields within it.

I have a dilemma and am quite stuck. I would like to allow the user to highlight text in the input fields (within the InfoBox).

Currently, highlighting/dragging the mouse within an InfoBox will pan the underlying map.

I understand that google maps has a gestureHandling option that if set to 'none', will prevent dragging. This is not possible for me since settting gestureHandling to 'none' while mouse is inside InfoBox will also prevent clicking and selection of input fields.

I have tried <GoogleMap onDrag />, but drag events do not expose an 'event' for me to somehow do event.stopPropagation(). Hence, is it possible to selectively turn off only map panning, while allowing text highlighting within an InfoBox component?

Example: https://codesandbox.io/s/l2mymj912m

I do have enableEventPropagation set to true. Setting it to false does enable highlighting, but prevents events like onClick.

Solution

  • I modified this solution and integrated it into your example. This included:

    • Setting enableEventPropagation to false on the InfoBox component.
    • Adding an id to the button inside the InfoBox (id="counter-button").

    • Adding the following prop to the InfoBox component:

      onDomReady={() => {
  let counterButton = document.getElementById("counter-button");
  counterButton.addEventListener("click", props.onButtonClick);
}}

    Check it out: https://codesandbox.io/s/24w0m8m5wj

    Also, here are some links for further reading on the issue: