w3resource

Map options, properties, controls

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
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.

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.

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.

disableDoubleClickZoom boolean

Using disableDoubleClickZoom property you can enable or disable zoom and center on double click. The default value is false.

draggable boolean

Using draggable property you can prevent the map from being dragged. By default, dragging is enabled.

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.
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.

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.
keyboardShortcuts boolean

keyboardShortcuts property enables or disables map from being controlled by the keyboard (e.g. arrow keys). The default value is true.

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.

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.
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.
noClear boolean If true, do not clear the contents of the Map div. The default value of noClear is false.
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
panControl boolean The enabled/disabled state of the Pan control.
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).
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.

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.
zoom number The initial Map zoom level. Required.
zoomControl boolean The enabled/disabled state of the Zoom control.
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
BOTTOM_CENTER Set the map type control position in the center of the bottom row.
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.

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.
LEFT_BOTTOM Set the map type control position on the left, above bottom-left elements, and flow upwards.
LEFT_CENTER Set the map type control position in the center of the left side.
LEFT_TOP Set the map type control position on the left, below top-left elements, and flow downwards.
RIGHT_BOTTOM Set the map type control position on the right, above bottom-right elements, and flow upwards.
RIGHT_CENTER Set the map type control position in the center of the right side.
RIGHT_TOP Set the map type control position on the right, below top-right elements, and flow downwards.
TOP_CENTER Set the map type control position in the center of the top row.
TOP_LEFT Set the map type control position in the top left and flow towards the middle.
TOP_RIGHT Set the map type control position in the top right and flow towards the middle.

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
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.

HORIZONTAL_BAR Set the standard horizontal radio buttons bar.

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
HYBRID Shows a transparent layer of major streets on satellite images.
ROADMAP

This is the default map type. Shows normal street/road map.

SATELLITE Shows satellite images only.
TERRAIN Shows normal street/road map based on terrain and vegetation information.

google.maps.OverviewMapControlOptions object specification

Options for the rendering of the Overview Map control.

Property Type Description
opened boolean Sets the control display in opened mode (true) or collapsed (false) mode. By default, the control is closed (false).

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
BOTTOM_CENTER Set the panControl position in the center of the bottom row.
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.

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.
LEFT_BOTTOM Set the panControl control position on the left, above bottom-left elements, and flow upwards.
LEFT_CENTER Set the panControl control position in the center of the left side.
LEFT_TOP Set the panControl control position on the left, below top-left elements, and flow downwards.
RIGHT_BOTTOM Set the panControl control position on the right, above bottom-right elements, and flow upwards.
RIGHT_CENTER Set the panControl control position in the center of the right side.
RIGHT_TOP Set the panControl control position on the right, below top-right elements, and flow downwards.
TOP_CENTER Set the panControl control position in the center of the top row.
TOP_LEFT Set the panControl control position in the top left and flow towards the middle.
TOP_RIGHT Set the panControl control position in the top right and flow towards the middle.

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
BOTTOM_CENTER Set the rotateControl position in the center of the bottom row.
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.

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.
LEFT_BOTTOM Set the rotateControl control position on the left, above bottom-left elements, and flow upwards.
LEFT_CENTER Set the rotateControl control position in the center of the left side.
LEFT_TOP Set the rotateControl control position on the left, below top-left elements, and flow downwards.
RIGHT_BOTTOM Set the rotateControl control position on the right, above bottom-right elements, and flow upwards.
RIGHT_CENTER Set the rotateControl control position in the center of the right side.
RIGHT_TOP Set the rotateControl control position on the right, below top-right elements, and flow downwards.
TOP_CENTER Set the rotateControl control position in the center of the top row.
TOP_LEFT Set the rotateControl control position in the top left and flow towards the middle.
TOP_RIGHT Set the rotateControl control position in the top right.

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
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.

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.
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
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
BOTTOM_CENTER Set the ZoomControl position in the center of the bottom row.
BOTTOM_LEFT

Set the ZoomControl control position in the bottom left.

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.
LEFT_BOTTOM Set the ZoomControl control position on the left, above bottom-left elements, and flow upwards.
LEFT_CENTER Set the ZoomControl control position in the center of the left side.
LEFT_TOP Set the ZoomControl control position on the left, below top-left elements, and flow downwards.
RIGHT_BOTTOM Set the ZoomControl control position on the right, above bottom-right elements, and flow upwards.
RIGHT_CENTER Set the ZoomControl control position in the center of the right side.
RIGHT_TOP Set the ZoomControl control position on the right, below top-right elements, and flow downwards.
TOP_CENTER Set the ZoomControl control position in the center of the top row.
TOP_LEFT Set the ZoomControl control position in the top left and flow towards the middle.
TOP_RIGHT Set the ZoomControl control position in the top right.

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
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.
LARGE

Displays a larger zoom control, in addition to +/- buttons.

SMALL Displays a small control with buttons to zoom in and out.