CODEWITHSUNDEEP
cssgoogle-mapszooming
questionnaire
questionnaire

Reputation: 9

google map - map zoom with mouse scroll ask for ctrl button

Below is code i use for dispaying Google map. I have a problem if someone resize window to size in this case bellow 1095px. In this case zooming with mouse wheel is posible only if ctrl button is pressed. Is there a way to keep html min-with:1150px and disable this feature of asking for ctrl.

option gestureHandling: 'greedy' is familiar but would like to solve this other way if possible. Thanks!

 <!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 {
            width: 100%;
            height: 100%;
            position: fixed !important;
            left: 0;
            z-index: 2;
            top: 0;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            min-width:1150px;
            width: auto;
            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},
              zoom: 8
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
      </body>
    </html>

Upvotes: 0

Views: 729

Answers (1)

Tobias
Tobias

Reputation: 65

Add gestureHandling: 'greedy' to your map variables. So it will look like this:

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8,
        gestureHandling: 'greedy'
    });
}

Upvotes: 1

Related Questions