L'utilisation d'une carte sur une page Web peut nécessiter des options spécifiques afin de contrôler la façon dont les utilisateurs interagissent avec la carte pour zoomer et faire un panoramique. Ces options, comme gestureHandling, minZoom, maxZoom et restriction, sont définies dans l'interface MapOptions.
Comportement par défaut
La carte suivante illustre le comportement par défaut des interactions avec une carte instanciée, dont seules les options zoom et center sont définies.
Lorsque l'utilisateur fait défiler une page contenant une carte, il peut la zoomer par inadvertance. Ce comportement peut être contrôlé à l'aide de l'option de carte gestureHandling.
gestureHandling : cooperative
La carte ci-dessous utilise l'option gestureHandling définie sur cooperative. Elle permet à l'utilisateur de faire défiler la page normalement, sans zoomer ni faire un panoramique. Les utilisateurs peuvent zoomer sur la carte en cliquant sur les commandes de zoom. Ils peuvent également zoomer et faire un panoramique sur la carte en effectuant des mouvements avec deux doigts sur les appareils à écran tactile.
La carte en haut de la page sans l'option gestureHandling se comporte de la même façon que la carte précédente, avec gestureHandling défini sur cooperative, car toutes les cartes sur cette page se trouvent dans un <iframe>. La valeur par défaut de gestureHandling (auto) passe de greedy à cooperative, selon que la carte est ou non contenue dans un <iframe>.
Carte contenue dans <iframe>
Comportement
oui
cooperative
non
greedy
gestureHandling : greedy
Vous trouverez ci-dessous une carte avec gestureHandling défini sur greedy. Contrairement à cooperative, cette carte réagit à tous les gestes tactiles et événements de défilement.
gestureHandling : none
L'option gestureHandling peut également être définie sur none pour désactiver les gestes sur la carte.
Désactiver le panoramique et le zoom
Pour désactiver complètement les fonctions de panoramique et de zoom de la carte, vous devez inclure deux options : gestureHandling et zoomControl.
La carte ci-dessous illustre la combinaison de gestureHandling et de zoomControl dans le code ci-dessus.
Restreindre les limites et le zoom de la carte
Il peut être souhaitable d'autoriser les gestes et les commandes de zoom, mais de restreindre la carte à des limites particulières ou de définir un zoom minimal et maximal. Pour ce faire, vous pouvez définir les options restriction, minZoom et maxZoom. Le code et la carte suivants illustrent ces options.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/17 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/08/17 (UTC)."],[[["\u003cp\u003eThis documentation explains how to control user interactions, such as zoom and pan, on Google Maps using options like \u003ccode\u003egestureHandling\u003c/code\u003e, \u003ccode\u003eminZoom\u003c/code\u003e, \u003ccode\u003emaxZoom\u003c/code\u003e, and \u003ccode\u003erestriction\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003egestureHandling\u003c/code\u003e option allows you to manage how the map responds to scroll events and touch gestures, with options like \u003ccode\u003ecooperative\u003c/code\u003e, \u003ccode\u003egreedy\u003c/code\u003e, \u003ccode\u003eauto\u003c/code\u003e, and \u003ccode\u003enone\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eYou can completely disable panning and zooming by setting \u003ccode\u003egestureHandling\u003c/code\u003e to "none" and \u003ccode\u003ezoomControl\u003c/code\u003e to false.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003erestriction\u003c/code\u003e, \u003ccode\u003eminZoom\u003c/code\u003e, and \u003ccode\u003emaxZoom\u003c/code\u003e options can be used to limit the map's viewable area and zoom levels, providing further control over user interaction.\u003c/p\u003e\n"]]],["This content explains how to control user interactions with Google Maps on a webpage. Key actions include using the `MapOptions` interface to define `gestureHandling`, `minZoom`, `maxZoom`, and `restriction`. `gestureHandling` controls how scrolling affects the map, with options like `cooperative`, `auto`, `greedy`, and `none`. To disable map panning and zooming, both `gestureHandling: \"none\"` and `zoomControl: false` must be set. Map boundaries and zoom levels can be restricted using `restriction`, `minZoom`, and `maxZoom` options.\n"],null,["# Controlling Zoom and Pan\n\nSelect platform: [Android](/maps/documentation/android-sdk/controls \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/controls \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/interaction \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nOverview\n--------\n\nThe usage of a map on a web page may require specific options to control the way users interact with the map to zoom and pan. These options, such as `gestureHandling`, `minZoom`, `maxZoom` and `restriction`, are defined within the [MapOptions interface](/maps/documentation/javascript/reference/map#MapOptions).\n\nDefault Behavior\n----------------\n\nThe following map demonstrates the default behavior for map interactions with a map instantiated with only the `zoom` and `center` options defined.\n\n\nThe code for this map is below.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-default/index.ts#L18-L21\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-default/docs/index.js#L17-L20\n```\n\n\u003cbr /\u003e\n\nControlling Gesture Handling\n----------------------------\n\nWhen a user scrolls a page that contains a map, the scrolling action can\nunintentionally cause the map to zoom. This behavior can be controlled using the\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) map option.\n\n### gestureHandling: `cooperative`\n\nThe map below uses the [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) option set\nto `cooperative`, allowing the user to scroll the page normally, without zooming\nor panning the map. Users can zoom the map by clicking the zoom controls. They\ncan also zoom and pan by using two-finger movements on the map for touchscreen\ndevices.\n\n\nThe code for this map is below.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n gestureHandling: \"cooperative\",\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-cooperative/index.ts#L18-L22\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n gestureHandling: \"cooperative\",\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-cooperative/docs/index.js#L17-L21\n```\n\n\u003cbr /\u003e\n\n[View Sample](/maps/documentation/javascript/examples/interaction-cooperative)\n\n### gestureHandling: `auto`\n\nThe map at the top of the page without the `gestureHandling` option has the same\nbehavior as the preceding map with [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling)\nset to `cooperative` because all of the maps on this page are within an\n`\u003ciframe\u003e`. The default [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) value\n`auto` switches between `greedy` and `cooperative` based upon whether the map is\ncontained within an `\u003ciframe\u003e`.\n\n| Map contained within `\u003ciframe\u003e` | Behavior |\n|---------------------------------|---------------|\n| yes | `cooperative` |\n| no | `greedy` |\n\n### gestureHandling: `greedy`\n\nA map with [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) set to `greedy` is\nbelow. This map reacts to all touch gestures and scroll events unlike\n`cooperative`.\n\n\n### gestureHandling: `none`\n\nThe [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) option can also be set to\n`none` to disable gestures on the map.\n| **Note:** The `gestureHandling` option does not apply to the Street View service.\n\nDisabling Pan and Zoom\n----------------------\n\nTo entirely disable the ability to pan and zoom the map, two options,\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) and\n[zoomControl](/maps/documentation/javascript/reference/map#MapOptions.zoomControl), must be included.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n gestureHandling: \"none\",\n zoomControl: false,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-disable-pan-zoom/index.ts#L13-L18\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n gestureHandling: \"none\",\n zoomControl: false,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-disable-pan-zoom/docs/index.js#L12-L17\n```\n\n\u003cbr /\u003e\n\nThe map below demonstrates the combination of\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) and\n[zoomControl](/maps/documentation/javascript/reference/map#MapOptions.zoomControl) in the code above.\n\n\nRestricting Map Bounds and Zoom\n-------------------------------\n\nIt may be desireable to allow gestures and zoom controls but restrict the map to\na particular bounds or a minimum and maximum zoom. To accomplish this you may\nset the [restriction](/maps/documentation/javascript/reference/map#MapOptions.restriction), [minZoom](/maps/documentation/javascript/reference/map#MapOptions.minZoom),\nand [maxZoom](/maps/documentation/javascript/reference/map#MapOptions.maxZoom) options. The following code and map\ndemonstrate these options.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n minZoom: zoom - 3,\n maxZoom: zoom + 3,\n restriction: {\n latLngBounds: {\n north: -10,\n south: -40,\n east: 160,\n west: 100,\n },\n },\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-restricted/index.ts#L13-L26\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n minZoom: zoom - 3,\n maxZoom: zoom + 3,\n restriction: {\n latLngBounds: {\n north: -10,\n south: -40,\n east: 160,\n west: 100,\n },\n },\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-restricted/docs/index.js#L12-L25\n```\n\n\u003cbr /\u003e"]]
