Disable Default Controls

Learn how to set up a map with the default UI controls disabled.

We'll cover the following

Sometimes, when using Google Maps API in projects, the number of controls the user has on the map may need to be limited or even disabled entirely. Use cases like these might arise when only a particular map section needs to be displayed, but little interaction is needed.

How to disable the default UI controls?

The default UI can be disabled by updating the map’s disableDefaultUI property to true. This property can be found within the MapOptions object. Here’s a code snippet that shows how to update the disableDefaultUI property:

const map = new google.maps.Map(document.getElementById("map"), {
  ...
  disableDefaultUI: true,
});

By disabling the default UI, a map version is displayed with no UI controls on it. However, it’s important to note that the user can still interact with the map using keyboard shortcuts or pointer gestures because only the UI-based controls have been disabled.

In order to disable these too, use the gestureHandling property to disable pointer gestures and the keyboardShortcuts property to disable keyboard shortcuts. Disable gestureHandling by setting it to none, and disable keyboardShortcuts by setting it to false.

Code example

Here’s an example of a map with all default UI controls, pointer gestures, and keyboard shortcuts disabled:

Console
Disabled UI controls, pointer gestures, and keyboard shortcuts
Here’s a brief explanation of the JavaScript file in the above code widget:


    

  • Lines 2–8: We declare a simple Map object called map.
    • 

  • Lines 3–4: To center the map on New Zealand, we pass the center and zoom parameters to the map constructor.
    • 

  • Line 5: We set the disableDefaultUI parameter to true. This will render a map with no UI controls.
    • 

  • Lines 6–7: We disable the pointer gestures and the keyboard shortcuts by changing the gestureHandling property to none and keyboardShortcuts property to false, respectively.
    •