How to Add Controls to a Google Map

Google Maps have certain controls enabled by default. By using the JavaScript API, you can change which controls are displayed and add your own custom controls. Here's how to work with controls in Google Maps.

Start with the following basic Google Map. Make sure to replace YOUR_API_KEY in the script tag with your API key that you got from https://developers.google.com/maps.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
	function initMap() {
		var mapOptions = {
			zoom: 8,
			center: new google.maps.LatLng(44, -110),
			mapTypeId: 'roadmap'
		};
		var map = new google.maps.Map(document.getElementById('map'), mapOptions);
	}
	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Notice that the map features certain default controls, such as the scale control and the zoom control.
Map with default controls

Disable the default UI controls by setting disableDefaultUI to true in the options object.

function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(44, -110),
		mapTypeId: 'roadmap',
		disableDefaultUI: true
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

The resulting map will look like this: Map without default controls

You can also selectively disable or enable controls. To enable the Zoom control, set zoomControl to true.

function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(44, -110),
		mapTypeId: 'roadmap',
		disableDefaultUI: true,
		zoomControl: true
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

To enable the Full Screen control, set fullscreenControl to true.

function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(44, -110),
		mapTypeId: 'roadmap',
		disableDefaultUI: true,
		fullscreenControl: true
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

Selectively adding and removing controls is one way to customize the appearance of your map. Here's a complete list of the options for adding a removing controls that are available in the Google Maps JavaScript API:

zoomControl - enables or disables the Zoom control.
mapTypeControl - enables or disables the control that lets the user switch between map types (such as Map and Satellite).
streetViewControl - enables or disables the "Pegman" control for activating Google Street View.
rotateControl - enables or disables the Rotate control.
scaleControl - enables or disables the Scale control that shows the map scale.
fullscreenControl - enables or disables the control for opening the map in fullscreen mode.

Other options, such as adding custom controls or changing the location of controls are available as well. You can find detailed documentation at developers.google.com/maps/documentation/javascript/controls.