Google Maps Controls

shape Introduction

The chapter demonstrates about the Google maps JavaScript API Controls and following are the concepts covered.

  • Controls.
  • Adding Map Controls.
  • Options for Controls

Controls

shape Description

The user interaction with the map in Google Maps JavaScript API is done with the help of UI elements which are known as controls, though which the user can include some variation to control the map applications.

Following are the list of controls used in Google maps.

These map controls cannot be modified directly by the user but can modify in MapOptions filed in the application.

shape Example 1

The example below demonstrate the Default UI controls displayed in Google maps API.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Default controls</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 17.3700, lng: 78.4800},
    zoom: 8
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer></script>
  </body>
</html>

shape Example 2

If the user want to disable the Google Maps API default UI controls can do by adding a property called disableDefaultUI in the MapOptions object filed and ensure the property set to be true.

The example below demonstrate the code for disabling the entire UI Controls.

!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Disabling the default UI controls</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 17.3700, lng: 78.4800},
    disableDefaultUI: true
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
    </script>
  </body>
</html>

Adding Map Controls

shape Description

The controls can be add, remove or modified by the user, before editing the controls ensure that the future updates do not disturb this controls behavior.
In Google Maps API applications some controls appear by default on the map and whereas other controls appear on the user request.

The MapOption object in the application used to remove or add the controls on the map. To make the controls visible, set the option to be true and for hiding the controls set the option as false.

The following are the some of the MapOptions object fields used in Google Maps API Controls.

{
zoomControl: boolean,
mapTypeControl: boolean,
streetViewControl: boolean,
fullscreenControl: Boolean,
scaleControl: boolean,
rotateControls: boolean
}

shape Example

The example below demonstrate the code, which hide the scale view and display the street view and zoom control on the map.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Adding controls to the map</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 17.3700, lng: 78.4800},
    zoomControl: true,
    streetViewControl: true,
    scaleControl: false
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer></script>
  </body>
</html>

Options for Controls

shape Description

Google Maps API provide some Options to the user to change or edit the behavior of the controls using mapTypeControlOptions filed.

The controls like drop down menu or horizontal bar can be modified using the control options. Following are the style options in which the Map Type control may appear.

shape Example

The example below demonstrate the code for managing the control options style.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Control style options</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
  <div id="map"></div>
  <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 17.3700, lng: 78.4800},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      mapTypeIds: [
      google.maps.MapTypeId.ROADMAP,
      google.maps.MapTypeId.SATELLITE,
      google.maps.MapTypeId.HYBRID,
      google.maps.MapTypeId.TERRAIN
      ]
    }
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
    </script>
  </body>
</html>

Positions for Control Options

shape Description

Google Maps support the Control Options positioning. User can position the control options at different places on the map by using the ControlPosition property.

The following are the positions for Control Options in Google Maps.

shape Example

The example below demonstrate the code for positioning the control options in Google Maps API.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Positioning Control Options</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 17.3700, lng: 78.4800},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.RIGHT_CENTER,
      mapTypeIds: [
	google.maps.MapTypeId.ROADMAP,
	google.maps.MapTypeId.SATELLITE,
	google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.TERRAIN,
      ]
    },
	zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_CENTER
	  },
	scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
		},
		fullscreenControl: true
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
    </script>
  </body>
</html>

Summary

shape Key Points

  • The appearance or behavior of controls in Google Maps API is same in both the desktop and mobile devices.
  • User should ensure that appropriate MapOptions value to be true before modifying the control options.

shape Programming
Tips

  • Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
  • Set the required Map Properties for better output.
  • Make sure the latitude and longitudes of the required location mentioned to be correct.
  • Use MapOption object filed for modifying are positioning the control options on a map.