Security notice: We have become aware of a security issue that may be affecting websites using specific third-party libraries (including polyfill.io). This issue can sometimes redirect visitors away from the intended website without website owner knowledge or permission. Many of our JavaScript samples previously included a polyfill.io script declaration. We have removed this from our samples. If you have used our JavaScript samples that contain this declaration, we recommend removing the declaration.
Announcement: New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.
Stay organized with collections
Save and categorize content based on your preferences.
This example uses the cooperative value for the
gestureHandling option to control the panning and scrolling
behavior of a map when viewed on a mobile device.
/** * 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. */functioninitMap():void{constcenter={lat:-25.363,lng:131.044};constzoom=4;newgoogle.maps.Map(document.getElementById("map")!,{zoom,center,gestureHandling:"cooperative",});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
/** * 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. */functioninitMap(){constcenter={lat:-25.363,lng:131.044};constzoom=4;newgoogle.maps.Map(document.getElementById("map"),{zoom,center,gestureHandling:"cooperative",});}window.initMap=initMap;
/* * 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;}
<html>
<head>
<title>Cooperative Gesture Handling</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.