In Brief...
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.
Instructions
- Start with the following basic Google Map. Make sure to replace
YOUR_API_KEYin thescripttag with your API key that you got from https://developers.google.com/maps. - Disable the default UI controls by setting
disableDefaultUItotruein the options object. - 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.
<!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.
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:
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:
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.
Need Ajax Training?
Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.