Google Maps - UI Controls - Adglob Infosystem Pvt Ltd

Google Maps provides a User Interface(UI) controls to let the user interact with the map. We can add, customize, and disable these controls.

Default Controls

Here is a list of the default controls provided by Google Maps −

Zoom − To increase and decease the zoom level of the map, we will have a slider with + and − buttons, by default. This slider will be located at the corner of left hand side of the map.
Pan − Just above the zoom slider, there will be a pan control for panning the map.
Map Type − You can locate this control at the top right corner of the map. It provides map type options such as Satellite, Roadmap, and Terrain. Users can choose any of these maps.
Street view − Between the pan icon and the zoom slider, we have a pegman icon. Users can drag this icon and place at a particular location to get its street view.

Disabling the UI Default Controls

We can disable the default UI controls provided by Google Maps simply by making the disableDefaultUI value true in the map options.

Example

The following example shows how to disable the default UI controls provided by Google Maps.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Enabling/Disabling All the Controls

In addition to these default controls, Google Maps also provides three more controls as listed below.

Scale − The Scale control displays a map scale element. This control is not enabled by default.
Rotate − The Rotate control contains a small circular icon which allows you to rotate maps containing oblique imagery. This control appears by default at the top left corner of the map. (See 45° Imagery for more information.)
Overview − To increase and decease the zoom level of the map, we have a slider with + and − buttons, by default. This slider is located at the left corner of the map.

In the map options, we can enable and disable any of the controls provided by Google Maps as shown below −

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Example

The following code shows how to enable all the controls −

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Control Options

We can change the appearance of Google Maps controls using its control options. For example, the zoom control can be either reduced or enlarged in size. The MapType control appearance can be varied to a horizontal bar or a drop-down menu. Given below is a list of Control options for Zoom and MapType controls.

Sr.No.	Control Name	Control Options
1	Zoom control	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType control	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Example

The following example demonstrates how to use the control options −

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Control Positioning

You can change the position of the controls by adding the following line in the control options.

position:google.maps.ControlPosition.Desired_Position,

Here is the list of available positions where a control can be placed on a map −

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

Example

The following example shows how to place the MapTypeid control at the top centre of the map and how to place the zoom control at the bottom centre of the map.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Next Topic:-Click Here