Cooperative Gesture Handling in Maps

Introduction:

In this tutorial, we will see about the Cooperative Gesture Handling.

When a user scrolls down a page that contains a map, the map may zoom in unintentionally. The gestureHandling map option can be used to control this behavior.

hestureHandling: cooperative

The gestureHandling option is set to cooperative in the map below, allowing the user to scroll the page normally without zooming or panning the map. Users may zoom in and out of the map by using the zoom controls. For touchscreen devices, they can also zoom and pan by utilising two-finger movements on the map.

The cooperative setting for the gestureHandling option is used in this example to manage the panning and scrolling behaviour of a map when viewed on a mobile device.

Code:

/**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap(): void {
  const center = { lat: -25.363, lng: 131.044 };
  const zoom = 4;

  new google.maps.Map(document.getElementById("map")!, {
    zoom,
    center,
    gestureHandling: "cooperative",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
export {};

Explanation:

• The function initMap() is created and it consists of the map properties.
• The line, “map = new google.maps.Map(document.getElementById(“map”)”; creates a new map inside the <div> element with the help of the mentioned id which is ‘map’ as an HTMLElement.
• The ‘centre’ attribute defines where the map should be centered with the help of the latitude and longitude coordinates.
• The ‘zoom’ attribute specifies the map’s zoom level.
• Next, the gestureHandling is set to “cooperative.”
• Lastly, the function is called and executed.

Conclusion:

In this tutorial, we saw how to use Cooperative Gesture Handling.

Live Example