w3resource logo


javascript email validation

Google Maps API JavaScript V 3 - Map Options, properties, controls

Secondary Nav

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


Join our Question Answer community to learn and share your programming knowledge.