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.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. |
| 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. |
Previous: YouTube API Tutorial
Next:
Creating your first app with Flickr API