Controlling Zoom and Pan On Google Maps

Introduction

In this post, we will see how to control zoom and pan for Google Maps. Pan is another word for drag. We will learn:
  • How to control zoom and pan while scrolling the page, giving more priority to page scrolling action over zoom and pan actions.
  • How to interact with Google Maps using these options.
  • How to disable zoom and pan options.
  • Enable zoom and pan interaction in desktop and mobile devices.

Zoom and Pan Options

First, we will see how to use zoom and pan options to interact with the map.
  • Zoom - This option is used to zoom/scale the map.
    For Desktop Devices - We will have + or - zoom control buttons to zoom in or zoom out the map. These controls appear on the bottom right corner of the map. Double click using mouse or trackpad. Scrolling using a mouse also will zoom in or zoom out.
    For Mobile Devices - Double tap on the screen or pinch the screen to zoom in or zoom out.
  • Pan - Pan/drag is dragging the map on the same scale size.
    For Desktop Devices - Click and hold the mouse and then pan using a finger on the mouse. We can also perform drag action using navigation keys on the keyboard. Use up for north, down key for the south, left key for the west and right key for the east.
    For Mobile Devices - Use fingers to drag the map on mobile devices. Two fingers will pan the map if gesturehandling is set to Cooperative. We can drag using one finger if the 
    gesturehandling option is set to greedy.

Map Controls

Zoom controls - We will have + or - zoom control buttons to zoom in or zoom out the map. These controls appear on the bottom right corner of the map. 
gestureHandling - This is an option in Map Javascript API that allows us to handle the gestures on Google Maps and how gestures are related to pan actions. We have to use gestureHandling option in Map options to have a good user experience rather than false zooming of the map during page scroll. The values are as follows:
  • greedy - If gestureHandling option is set to greedy, then the map will always pan when the user drags the screen. On a mobile device, both one finger and two fingers allow the map to drag/pan.
  • cooperative - If gestureHandling option is set to cooperative, then the map will not pan with one finger. Instead, the page will scroll using one finger. We have to use two fingers to make the map drag. If we swipe the map using one finger then an overlay will appear stating to use two fingers to drag the map. We can pan using two fingers.
  • auto(default value) - Google Maps API automatically sets the value to greedy or cooperative based on whether the page is scrollable or not.
    Sets to cooperative if the page or body of the page is bigger than the map window. If it is an iframe the also gestureHandling is set to cooperative.
    Sets to greedy if the page body is small or the same as the map window. 
  • none - Disables the panning on mobile device and dragging of map on the desktop device.

Controlling Map Pan and Zoom On Page Scroll

Sometimes when we scroll the page, unintentionally maps get zoom. So now we will see how to scroll the page without zooming the map. Zoom action should be performed only when we use two fingers on a touch device and zoom controls + or -. 
Check on the desktop devices using navigation keys. When we use cooperative value for gestureHandling, navigation keys will scroll the page. If we remove this option, then the map will scroll. Use two fingers in mobile devices to scroll or drag the map.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 1000px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="Gmap"></div>
  <script>
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,

      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      var marker = new google.maps.Marker({
        position: { lat: -45.67677, lng: -90.253456 },
        map: map,
        gestureHandling: 'cooperative'
      });
    }
  </script>
  <script
    src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDShdMS18_xwv3VHpzQlGgr10v0SmD7SyE&callback=initMap">
    </script>
</body>
</html>

Disabling Zoom Controls And Pan

We can disable zoom controls by setting the zoomControl option to false. gestureHandling: none disables the panning on mobile device and dragging of map on the desktop device.

    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        zoomControl: false,
        gestureHandling: none
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
}


Comments