Stay organized with collections Save and categorize content based on your preferences.
This example demontrates custom positioning of the map controls. The zoom control options are placed on the left of the map and the map type controls are placed along the top of the map.
/* * 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>Control Positioning</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.
[[["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-08-20 UTC."],[[["\u003cp\u003eThis example demonstrates how to customize the positioning of map controls using the Google Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eYou can position controls like zoom and map type selection using \u003ccode\u003emapTypeControlOptions\u003c/code\u003e and \u003ccode\u003ezoomControlOptions\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code snippets showcase this customization in TypeScript, JavaScript, CSS, and HTML.\u003c/p\u003e\n"],["\u003cp\u003eThe zoom control is positioned on the left, while the map type control is at the top center of the map.\u003c/p\u003e\n"],["\u003cp\u003eYou can explore the sample code via provided links to JSFiddle, Google Cloud Shell, or by cloning and running it locally.\u003c/p\u003e\n"]]],["This code demonstrates custom placement of Google Maps controls. It initializes a map with the zoom control on the left (using `LEFT_CENTER` position), and the map type control at the top center (using `TOP_CENTER`). Additionally, it sets the street view control to the left top and includes the option for a full screen. The provided CSS sets the map height and makes the page fill the window. HTML loads the CSS, JavaScript, and the Maps API.\n"],null,["This example demontrates custom positioning of the map controls. The zoom\ncontrol options are placed on the left of the map and the map type controls are\nplaced along the top of the map.\n\nRead the\n[documentation](/maps/documentation/javascript/controls#ControlPositioning). \n\nTypeScript \n\n```typescript\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 12,\n center: { lat: -28.643387, lng: 153.612224 },\n mapTypeControl: true,\n mapTypeControlOptions: {\n style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,\n position: google.maps.ControlPosition.TOP_CENTER,\n },\n zoomControl: true,\n zoomControlOptions: {\n position: google.maps.ControlPosition.LEFT_CENTER,\n },\n scaleControl: true,\n streetViewControl: true,\n streetViewControlOptions: {\n position: google.maps.ControlPosition.LEFT_TOP,\n },\n fullscreenControl: true,\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/control-positioning/index.ts#L8-L38\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 12,\n center: { lat: -28.643387, lng: 153.612224 },\n mapTypeControl: true,\n mapTypeControlOptions: {\n style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,\n position: google.maps.ControlPosition.TOP_CENTER,\n },\n zoomControl: true,\n zoomControlOptions: {\n position: google.maps.ControlPosition.LEFT_CENTER,\n },\n scaleControl: true,\n streetViewControl: true,\n streetViewControlOptions: {\n position: google.maps.ControlPosition.LEFT_TOP,\n },\n fullscreenControl: true,\n });\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/control-positioning/docs/index.js#L7-L29\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \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}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/control-positioning/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eControl Positioning\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/control-positioning/docs/index.html#L8-L30\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/control-positioning/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-control-positioning&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nClone 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-control-positioning 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"]]
