CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Andy
Andy

Reputation: 1293

How To Disable Panning With Arrow Keys On Google Maps API

Using the Google Maps API on a web page, I'm able to use the keyboard's up/down and right/left arrow keys to pan the map. I want to allow the user to drag/pan the map via the mouse as normal, but want to disable panning from the keyboard arrow presses that is occurring after the map is clicked. How can I do this?

For background, I'm using the arrow keys on the web page for other functionality (to move up and down an HTML list), and don't want the map to move around when the user presses arrow keys.

Upvotes: 0

Views: 1297

Answers (1)

Preston
Preston

Reputation: 876

You can set the keyboardShortcuts option in MapOptions to false to disable keyboard actions on the map

Simple sample JSBin

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* 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>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          keyboardShortcuts: false,
          gestureHandling: "greedy",
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY"
    async defer></script>
  </body>
</html>

Upvotes: 4

Related Questions