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 | 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. |
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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. | 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
- New Content published on w3resource:
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- React - JavaScript Library
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework