Map options, properties, controls

Last update on February 26 2020 08:09:10 (UTC/GMT +8 hours)

google.maps.Map class - constructor

Constructor: Map(mapDiv:Node, opts?: MapOptions )

The constructor creates a new map inside the given HTML container, which is typically a reference to a <div>. The MapOptions object contains some properties that control the behavior of this map container.

Here we are referring the introductory map once again, see the mapOptions part.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
   html { height: 100% }
   body { height: 100%; margin: 0; padding: 0 }
   #map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true">
</script>
<script type="text/javascript">
   function initialize() 
   {
	  var mapOptions = {
	  center: new google.maps.LatLng(52.5167, 13.3833),
	  zoom: 10, 
	  };
var map = new google.maps.Map (document.getElementById("map-canvas"),  mapOptions ;
   }
google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>
 <body>
 <div id="map-canvas"></div>
 </body>
 </html>

google.maps.MapOptions object specification

In this page, we have discussed all the properties of the above object except streetView, streetViewControl and streetViewControlOptions properties which will be discussed in a separate page. In almost all properties there are examples with online edit and practice facilities.

Properties

The following table shows the properties of the Map object:

Property	Type	Description	Example / Online Practice
backgroundColor	string	Use the backgroundColor property for the background of the Map <div> containing the map. This color will be visible when the tiles have not yet loaded as the user pans. The backgroundColor property cannot be changed dynamically, it must be set during initialization of the map.	Click me to see and practice the example
center	LatLng	Determines the initial center of the map. Required. Constructor : LatLng(lat:number, lng:number, noWrap?:boolean) Creates a LatLng object (google.maps.LatLng class) representing a geographic point. Latitude is specified in degrees within the range [-90, 90]. Longitude is specified in degrees within the range [-180, 180]. Set no Wrap to true to enable values outside of this range.	Click me to see and practice the example
disableDefaultUI	boolean	Using disableDefaultUI property you can enable or disable all default UI (user interface). Setting property value true you can still enable these controls individually. The default value is false.	Click me to see and practice the example
disableDoubleClickZoom	boolean	Using disableDoubleClickZoom property you can enable or disable zoom and center on double click. The default value is false.	Click me to see and practice the example
draggable	boolean	Using draggable property you can prevent the map from being dragged. By default, dragging is enabled.	Click me to see and practice the example
draggableCursor	string	Using draggableCursor property, the name (e.g. move,no-drop,help etc.) or url of the cursor to display, when mousing over a draggable map.	Click me to see and practice the example
draggingCursor	string	Using draggingCursor, the name (e.g. move,no-drop,help etc.) or url of the cursor to display when the map is being dragged.	Click me to see and practice the example
heading	number	The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available.	Click me to see and practice the example
keyboardShortcuts	boolean	keyboardShortcuts property enables or disables map from being controlled by the keyboard (e.g. arrow keys). The default value is true.	Click me to see and practice the example
mapMaker	boolean	True if Map Maker tiles should be used instead of regular tiles.
mapTypeControl	boolean	The mapTypeControl property enables or disables the map type (Map, Satellite) control, positioned at the top right corner on the map. The default value is true.	Click me to see and practice the example
mapTypeControlOptions	MapTypeControlOptions	The initial display options for the Map type control. Go to google. maps. MapTypeControlOptions object specification
mapTypeId	MapTypeId	The initial Map mapTypeId. The default value is ROADMAP. Go to google.maps.MapTypeId class
maxZoom	number	The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead.	Click me to see and practice the example
minZoom	number	The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead.	Click me to see and practice the example
noClear	boolean	If true, do not clear the contents of the Map div. The default value of noClear is false.	Click me to see and practice the example
overviewMapControl	boolean	The enabled/disabled state of the Overview Map control.
overviewMapControlOptions	OverviewMapControlOptions	The display options for the Overview Map control. Go to google.maps.OverviewMapControlOptions object specification	Click me to see and practice the example
panControl	boolean	The enabled/disabled state of the Pan control.	Click me to see and practice the example
panControlOptions	PanControlOptions	The display options for the Pan control. Go to google.maps.PanControlOptions object specification
rotateControl	boolean	The display options for the Rotate control. rotateControl enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. By default, the control's appearance is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You may alter the control's behavior by setting the map's rotateControlOptions to specify the RotateControlOptions to use (though you cannot make the control appear if no 45° imagery is currently available).	Click me to see and practice the example
rotateControlOptions	RotateControlOptions	The initial enabled/disabled state of the Scale control. Go to google.maps.RotateControlOptions object specification
scaleControl	boolean	scaleControl property enabled/disabled state of the Scale control that provides a map scale. By default, this control is not visible.
scaleControlOptions	ScaleControlOptions	The initial display options for the Scale control. Go to google.maps.ScaleControlOptions object specification
scrollwheel	boolean	Disables scrollwheel (mouse wheel) zooming on the map when it is false. The property is enabled by default.	Click me to see and practice the example
streetView	StreetViewPanorama	A StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped.
streetViewControl	boolean	The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set to false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type).
streetViewControlOptions	StreetViewControlOptions	The initial display options for the Street View Pegman control.
styles	Array.<MapTypeStyle>	Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain modes, these styles will only apply to labels and geometry.
tilt	number	Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45.	Click me to see and practice the example
zoom	number	The initial Map zoom level. Required.	Click me to see and practice the example
zoomControl	boolean	The enabled/disabled state of the Zoom control.	Click me to see and practice the example
zoomControlOptions	ZoomControlOptions	The display options for the Zoom control. Go to google.maps.ZoomControlOptions object specification

google.maps.MapTypeControlOptions object specification

Following options are available for rendering the map type control :

Property	Type	Description
mapTypeIds	Array.<MapTypeId>\|Array.<string>	An array containing the IDs of map types, available in the control.
position	ControlPosition	Position id. Specify the position of the control on the map. The default position is TOP_RIGHT. Go to google.maps.ControlPosition class
style	MapTypeControlStyle	Style id. Specify the style of map type control to display. Go to google.maps.MapTypeControlStyle class

ControlPosition class

This class contains the placement of controls on the map.

Constant: The following table describes the constants of the ControlPosition class.

Constant	Description	Example / Online Practice
BOTTOM_CENTER	Set the map type control position in the center of the bottom row.	Click me to see and practice the example
BOTTOM_LEFT	Set the map type control position in the bottom left and flow towards the middle. Elements are positioned to the right of the Google logo.	Click me to see and practice the example
BOTTOM_RIGHT	Set the map type control position in the bottom right and flow towards the middle. Elements are positioned to the left of the copyrights.	Click me to see and practice the example
LEFT_BOTTOM	Set the map type control position on the left, above bottom-left elements, and flow upwards.	Click me to see and practice the example
LEFT_CENTER	Set the map type control position in the center of the left side.	Click me to see and practice the example
LEFT_TOP	Set the map type control position on the left, below top-left elements, and flow downwards.	Click me to see and practice the example
RIGHT_BOTTOM	Set the map type control position on the right, above bottom-right elements, and flow upwards.	Click me to see and practice the example
RIGHT_CENTER	Set the map type control position in the center of the right side.	Click me to see and practice the example
RIGHT_TOP	Set the map type control position on the right, below top-right elements, and flow downwards.	Click me to see and practice the example
TOP_CENTER	Set the map type control position in the center of the top row.	Click me to see and practice the example
TOP_LEFT	Set the map type control position in the top left and flow towards the middle.	Click me to see and practice the example
TOP_RIGHT	Set the map type control position in the top right and flow towards the middle.	Click me to see and practice the example

MapTypeControlStyle class

This class contains the style of controls on the map.

Constant : The following table describes the constants of the MapTypeControlStyle class.

Constant	Description	Example / Online Practice
DEFAULT	Set the map type control position in the center of the bottom row.
DROPDOWN_MENU	Set a dropdown menu for the screen realestate conscious.	Click me to see and practice the example
HORIZONTAL_BAR	Set the standard horizontal radio buttons bar.	Click me to see and practice the example

google.maps.MapTypeId class

This class contains the identifiers for common MapTypes.

Constant:The following table describes the constants of the MapTypeId class.

Constant	Description	Example / Online Practice
HYBRID	Shows a transparent layer of major streets on satellite images.	Click me to see and practice the example
ROADMAP	This is the default map type. Shows normal street/road map.	Click me to see and practice the example
SATELLITE	Shows satellite images only.	Click me to see and practice the example
TERRAIN	Shows normal street/road map based on terrain and vegetation information.	Click me to see and practice the example

google.maps.OverviewMapControlOptions object specification

Options for the rendering of the Overview Map control.

Property	Type	Description	Example / Online Practice
opened	boolean	Sets the control display in opened mode (true) or collapsed (false) mode. By default, the control is closed (false).	Click me to see and practice the example

google.maps.PanControlOptions object specification

Following options are available for rendering the pan control.

Property	Type	Description
position	ControlPosition	Position id. Used to specify the position of the control on the map. The default position is TOP_RIGHT. Go to google.maps.ControlPosition class

google.maps.ControlPosition class

This class contains the placement of controls on the map.

Constant: The following table describes the constants of the ControlPosition class.

Constant	Description	Example / Online Practice
BOTTOM_CENTER	Set the panControl position in the center of the bottom row.	Click me to see and practice the example
BOTTOM_LEFT	Set the panControl control position in the bottom left and flow towards the middle. Elements are positioned to the right of the Google logo.	Click me to see and practice the example
BOTTOM_RIGHT	Set the panControl control position in the bottom right and flow towards the middle. Elements are positioned to the left of the copyrights.	Click me to see and practice the example
LEFT_BOTTOM	Set the panControl control position on the left, above bottom-left elements, and flow upwards.	Click me to see and practice the example
LEFT_CENTER	Set the panControl control position in the center of the left side.	Click me to see and practice the example
LEFT_TOP	Set the panControl control position on the left, below top-left elements, and flow downwards.	Click me to see and practice the example
RIGHT_BOTTOM	Set the panControl control position on the right, above bottom-right elements, and flow upwards.	Click me to see and practice the example
RIGHT_CENTER	Set the panControl control position in the center of the right side.	Click me to see and practice the example
RIGHT_TOP	Set the panControl control position on the right, below top-right elements, and flow downwards.	Click me to see and practice the example
TOP_CENTER	Set the panControl control position in the center of the top row.	Click me to see and practice the example
TOP_LEFT	Set the panControl control position in the top left and flow towards the middle.	Click me to see and practice the example
TOP_RIGHT	Set the panControl control position in the top right and flow towards the middle.	Click me to see and practice the example

google.maps.RotateControlOptions object specification

Following options are available for rendering the rotate control.

Property	Type	Description
position	ControlPosition	Position id. Used to specify the position of the control on the map. The default position is TOP_LEFT.. Go to google.maps.ControlPosition class

google.maps.ControlPosition class

This class contains the placement of controls on the map.

Constant: The following table describes the constants of the ControlPosition class.

Constant	Description	Example / Online Practice
BOTTOM_CENTER	Set the rotateControl position in the center of the bottom row.	Click me to see and practice the example
BOTTOM_LEFT	Set the rotateControl control position in the bottom left and flow towards the middle. Elements are positioned to the right of the Google logo.	Click me to see and practice the example
BOTTOM_RIGHT	Set the rotateControl control position in the bottom right and flow towards the middle. Elements are positioned to the left of the copyrights.	Click me to see and practice the example
LEFT_BOTTOM	Set the rotateControl control position on the left, above bottom-left elements, and flow upwards.	Click me to see and practice the example
LEFT_CENTER	Set the rotateControl control position in the center of the left side.	Click me to see and practice the example
LEFT_TOP	Set the rotateControl control position on the left, below top-left elements, and flow downwards.	Click me to see and practice the example
RIGHT_BOTTOM	Set the rotateControl control position on the right, above bottom-right elements, and flow upwards.	Click me to see and practice the example
RIGHT_CENTER	Set the rotateControl control position in the center of the right side.	Click me to see and practice the example
RIGHT_TOP	Set the rotateControl control position on the right, below top-right elements, and flow downwards.	Click me to see and practice the example
TOP_CENTER	Set the rotateControl control position in the center of the top row.	Click me to see and practice the example
TOP_LEFT	Set the rotateControl control position in the top left and flow towards the middle.	Click me to see and practice the example
TOP_RIGHT	Set the rotateControl control position in the top right.	Click me to see and practice the example

google.maps.ScaleControlOptions object specification

The ScaleControlOptions object contains options for displaying the scale control.

Property	Type	Description
position	ControlPosition	Specify the position of the control on the map. The default position is BOTTOM_LEFT when google.maps.visualRefresh is set to false. When google.maps.visualRefresh is true the scale control will be fixed at the BOTTOM_RIGHT. Go to google.maps.ControlPosition class
style	MapTypeControlStyle	The property is used to select what style of scale control to display.

google.maps.ControlPosition class

This class contains the placement of controls on the map.

Constant: The following table describes the constants of the ControlPosition class.

Constant	Description	Example / Online Practice
BOTTOM_CENTER	Set the scaleControl position in the center of the bottom row.
BOTTOM_LEFT	Set the scaleControl control position in the bottom left and flow towards the middle.	Click me to see and practice the example
BOTTOM_RIGHT	Set the scaleControl control position in the bottom right and flow towards the middle. Elements are positioned to the left of the copyrights.	Click me to see and practice the example
LEFT_BOTTOM	Set the scaleControl control position on the left, above bottom-left elements, and flow upwards.
LEFT_CENTER	Set the scaleControl control position in the center of the left side.
LEFT_TOP	Set the scaleControl control position on the left, below top-left elements, and flow downwards.
RIGHT_BOTTOM	Set the scaleControl control position on the right, above bottom-right elements, and flow upwards.
RIGHT_CENTER	Set the scaleControl control position in the center of the right side.
RIGHT_TOP	Set the scaleControl control position on the right, below top-right elements, and flow downwards.
TOP_CENTER	Set the scaleControl control position in the center of the top row.
TOP_LEFT	Set the scaleControl control position in the top left and flow towards the middle.
TOP_RIGHT	Set the scaleControl control position in the top right and flow towards the middle.

Identifiers for common MapTypesControls.

Constant	Description	Example / Online Practice
DEFAULT	Set the map type control position in the center of the bottom row.

google.maps.ZoomControlOptions object specification

The ScaleControlOptions object contains options for displaying the scale control.

Property

Type	Description
position	ControlPosition	Specify the position of the control on the map. The default position is BOTTOM_LEFT when google.maps.visualRefresh is set to false. When google.maps.visualRefresh is true the scale control will be fixed at the BOTTOM_RIGHT. Go to google.maps.ControlPosition class
style	MapTypeControlStyle	The property is used to select what style of scale control to display. Go to google.maps.ZoomControlStyle class

google.maps.ControlPosition class

This class contains the placement of controls on the map.

Constant	Description	Example / Online Practice
BOTTOM_CENTER	Set the ZoomControl position in the center of the bottom row.	Click me to see and practice the example
BOTTOM_LEFT	Set the ZoomControl control position in the bottom left.	Click me to see and practice the example
BOTTOM_RIGHT	Set the ZoomControl control position in the bottom right and flow towards the middle. Elements are positioned to the left of the copyrights.	Click me to see and practice the example
LEFT_BOTTOM	Set the ZoomControl control position on the left, above bottom-left elements, and flow upwards.	Click me to see and practice the example
LEFT_CENTER	Set the ZoomControl control position in the center of the left side.	Click me to see and practice the example
LEFT_TOP	Set the ZoomControl control position on the left, below top-left elements, and flow downwards.	Click me to see and practice the example
RIGHT_BOTTOM	Set the ZoomControl control position on the right, above bottom-right elements, and flow upwards.	Click me to see and practice the example
RIGHT_CENTER	Set the ZoomControl control position in the center of the right side.	Click me to see and practice the example
RIGHT_TOP	Set the ZoomControl control position on the right, below top-right elements, and flow downwards.	Click me to see and practice the example
TOP_CENTER	Set the ZoomControl control position in the center of the top row.	Click me to see and practice the example
TOP_LEFT	Set the ZoomControl control position in the top left and flow towards the middle.	Click me to see and practice the example
TOP_RIGHT	Set the ZoomControl control position in the top right.	Click me to see and practice the example

google.maps.ZoomControlStyle class

The following sections related to the ZoomControlStyle class.

Constant: The following table describes the constants of the ZoomControlStyle class.

Constant	Description	Example / Online Practice
DEFAULT	The default zoom control. The control which DEFAULT maps to will vary according to map size and other factors. It may change in future versions of the API.	Click me to see and practice the example
LARGE	Displays a larger zoom control, in addition to +/- buttons.	Click me to see and practice the example
SMALL	Displays a small control with buttons to zoom in and out.	Click me to see and practice the example

Previous: YouTube API Tutorial
Next: Creating your first app with Flickr API