Cooperative Gesture Handling

This example uses the cooperative value for the gestureHandling option to control the panning and scrolling behavior of a map when viewed on a mobile device.

Read the documentation.

TypeScript

/**
 * 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 myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
      gestureHandling: "cooperative"
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!"
  });
}

JavaScript

/**
 * 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() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: "cooperative"
  });
  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!"
  });
}

CSS

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Cooperative Gesture Handling</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Cooperative Gesture Handling</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      "use strict";

      /**
       * 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() {
        const myLatLng = {
          lat: -25.363,
          lng: 131.044
        };
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: "cooperative"
        });
        new google.maps.Marker({
          position: myLatLng,
          map,
          title: "Hello World!"
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

"use strict"; /** * 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() { const myLatLng = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: myLatLng, gestureHandling: "cooperative" }); new google.maps.Marker({ position: myLatLng, map, title: "Hello World!" }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Cooperative Gesture Handling</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&callback=initMap&libraries=&v=weekly" defer ></script>  </head> <body> <div id="map"></div> </body> </html>