Stay organized with collectionsSave and categorize content based on your preferences.
You can programmatically adjust tilt and rotation (heading) on a vector map. In
this example, we add some buttons to programmatically adjust tilt and heading.
Understand the code
Setting tilt and heading
CallsetTilt()to set the tilt angle of the map. UsegetTilt()to get the
current tilt value.
CallsetHeading()to set the heading of the map. UsegetHeading()to get
the current heading value.
/** 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;}.ui-button{background-color:#fff;border:0;border-radius:2px;box-shadow:01px4px-1pxrgba(0,0,0,0.3);margin:10px;padding:00.5em;font:40018pxRoboto,Arial,sans-serif;overflow:hidden;height:40px;cursor:pointer;}.ui-button:hover{background:rgb(235,235,235);}
<html>
<head>
<title>Tilt and Rotation</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 theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis sample demonstrates how to programmatically adjust the tilt and rotation (heading) of a vector map using the Google Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eYou can control the map's tilt using \u003ccode\u003esetTilt()\u003c/code\u003e and \u003ccode\u003egetTilt()\u003c/code\u003e, and the heading using \u003ccode\u003esetHeading()\u003c/code\u003e and \u003ccode\u003egetHeading()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe sample provides interactive buttons to adjust the map's tilt and rotation, allowing users to explore different perspectives.\u003c/p\u003e\n"],["\u003cp\u003eThe code includes examples in both TypeScript and JavaScript, showcasing how to implement this functionality in either language.\u003c/p\u003e\n"]]],["The provided code demonstrates how to programmatically adjust the tilt and heading of a Google vector map. It initializes a map and adds buttons for \"Rotate Left,\" \"Rotate Right,\" \"Tilt Down,\" and \"Tilt Up.\" Clicking these buttons calls `setTilt()` or `setHeading()` to modify the map's view. `getTilt()` and `getHeading()` retrieve the current values for the tilt and the heading. The map's size is defined using CSS.\n"],null,["# Tilt and Rotation\n\nYou can programmatically adjust tilt and rotation (heading) on a vector map. In\nthis example, we add some buttons to programmatically adjust tilt and heading.\n\nUnderstand the code\n-------------------\n\n### Setting tilt and heading\n\n- Call `setTilt()` to set the tilt angle of the map. Use `getTilt()` to get the current tilt value.\n- Call `setHeading()` to set the heading of the map. Use `getHeading()` to get the current heading value.\n\n### TypeScript\n\n```typescript\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n center: {\n lat: 37.7893719,\n lng: -122.3942,\n },\n zoom: 16,\n heading: 320,\n tilt: 47.5,\n mapId: \"90f87356969d889c\",\n }\n );\n\n const buttons: [string, string, number, google.maps.ControlPosition][] = [\n [\"Rotate Left\", \"rotate\", 20, google.maps.ControlPosition.LEFT_CENTER],\n [\"Rotate Right\", \"rotate\", -20, google.maps.ControlPosition.RIGHT_CENTER],\n [\"Tilt Down\", \"tilt\", 20, google.maps.ControlPosition.TOP_CENTER],\n [\"Tilt Up\", \"tilt\", -20, google.maps.ControlPosition.BOTTOM_CENTER],\n ];\n\n buttons.forEach(([text, mode, amount, position]) =\u003e {\n const controlDiv = document.createElement(\"div\");\n const controlUI = document.createElement(\"button\");\n\n controlUI.classList.add(\"ui-button\");\n controlUI.innerText = `${text}`;\n controlUI.addEventListener(\"click\", () =\u003e {\n adjustMap(mode, amount);\n });\n controlDiv.appendChild(controlUI);\n map.controls[position].push(controlDiv);\n });\n\n const adjustMap = function (mode: string, amount: number) {\n switch (mode) {\n case \"tilt\":\n map.setTilt(map.getTilt()! + amount);\n break;\n case \"rotate\":\n map.setHeading(map.getHeading()! + amount);\n break;\n default:\n break;\n }\n };\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/webgl-tilt-rotation/index.ts#L8-L62\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: {\n lat: 37.7893719,\n lng: -122.3942,\n },\n zoom: 16,\n heading: 320,\n tilt: 47.5,\n mapId: \"90f87356969d889c\",\n });\n const buttons = [\n [\"Rotate Left\", \"rotate\", 20, google.maps.ControlPosition.LEFT_CENTER],\n [\"Rotate Right\", \"rotate\", -20, google.maps.ControlPosition.RIGHT_CENTER],\n [\"Tilt Down\", \"tilt\", 20, google.maps.ControlPosition.TOP_CENTER],\n [\"Tilt Up\", \"tilt\", -20, google.maps.ControlPosition.BOTTOM_CENTER],\n ];\n\n buttons.forEach(([text, mode, amount, position]) =\u003e {\n const controlDiv = document.createElement(\"div\");\n const controlUI = document.createElement(\"button\");\n\n controlUI.classList.add(\"ui-button\");\n controlUI.innerText = `${text}`;\n controlUI.addEventListener(\"click\", () =\u003e {\n adjustMap(mode, amount);\n });\n controlDiv.appendChild(controlUI);\n map.controls[position].push(controlDiv);\n });\n\n const adjustMap = function (mode, amount) {\n switch (mode) {\n case \"tilt\":\n map.setTilt(map.getTilt() + amount);\n break;\n case \"rotate\":\n map.setHeading(map.getHeading() + amount);\n break;\n default:\n break;\n }\n };\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/webgl-tilt-rotation/docs/index.js#L7-L52\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\n### CSS\n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n.ui-button {\n background-color: #fff;\n border: 0;\n border-radius: 2px;\n box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);\n margin: 10px;\n padding: 0 0.5em;\n font: 400 18px Roboto, Arial, sans-serif;\n overflow: hidden;\n height: 40px;\n cursor: pointer;\n}\n.ui-button:hover {\n background: rgb(235, 235, 235);\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/webgl-tilt-rotation/docs/style.css#L7-L40\n```\n\n### HTML\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eTilt and Rotation\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/webgl-tilt-rotation/docs/index.html#L8-L30\n```\n\n### Try Sample\n\n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/webgl-tilt-rotation/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-webgl-tilt-rotation&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\n### Clone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-webgl-tilt-rotation https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
