How to set the Google Map Attribute to 'greedy' programatically without having to reloadreconstruct the map in j

I have the following code in javascript which is my default, I have a button for the user to move the map more easily (without having to use both fingers/or CTRL) I know there's an attribute called gestureHandling: "greedy" but I can't figure out how to set it programatically with javascript without presetting the attribute or rebuild/reconstruct the map, how do I do that ?

map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng,
          disableDefaultUI: true,
          mapTypeControl: false
});

I have the following code in javascript which is my default, I have a button for the user to move the map more easily (without having to use both fingers/or CTRL) I know there's an attribute called gestureHandling: "greedy" but I can't figure out how to set it programatically with javascript without presetting the attribute or rebuild/reconstruct the map, how do I do that ?

map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng,
          disableDefaultUI: true,
          mapTypeControl: false
});

• javascript
• google-maps-api-3

Share Improve this question Follow asked Mar 28, 2019 at 17:42 GregoGrego 2,25099 gold badges4545 silver badges6565 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Store your settings in an object and apply them when you need to using the setOptions() function on the map object;

// The Settings Object
let mapSettings = {
    zoom: 15,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: false
}

// Your initial Map load
window.onload(function(){
    map = new google.maps.Map(document.getElementById('map'), mapSettings);
});

// Used when you want to apply different gesture handling
function greedyMap(){
    mapSettings.gestureHandling = 'greedy';
    map.setOptions(mapSettings);
}

<button onclick="greedyMap()">Example</button>

Per the documentation, gestureHandling is a MapOptions property.

MapOptions that don't have a dedicated setter/getter can be set using setOptions

google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
  map.setOptions({
    gestureHandling: 'greedy'
  });
});

code snippet:

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

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    console.log("before:" + map.gestureHandling);
    map.setOptions({
      gestureHandling: 'greedy'
    });
    console.log("after:" + map.gestureHandling);

  });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 80%;
}

<input type="button" value="click" id="btn" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>