Google Maps Reference

# Google Maps API Reference

« Previous
Next Chapter »

## Maps API Map() Constructor

## Example

Create a Google Map:

var map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);
Try it yourself »

## Definition and Usage

The Map() constructor creates a new map inside a specified HTML element (typically a <div> element).

## Syntax

new google.maps.Map(HTMLElement,MapOptions)

## Parameter Values

Parameter | Description
--- | ---
HTMLElement | Specifies in what HTML element to put the map
MapOptions | A MapOptions object that holds the map initialization variables/options

## Methods of Map()

Method | Return Value | Description
--- | --- | ---
fitBounds(LatLngBounds) | None | Sets the viewport to contain the given bounds
getBounds() | LatLng,LatLng | Returns the south-west latitude/longitude and the north-east latitude/longitude of the current viewport
getCenter() | LatLng | Returns the lat/lng of the center of the map
getDiv() | Node | Returns a DOM object that contains the map
getHeading() | number | Returns the compass heading of aerial imagery (for SATELLITE and HYBRID map types)
getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | Returns the current map type
getProjection() | Projection | Returns the current Projection
getStreetView() | StreetViewPanorama | Returns the default StreetViewPanorama bound to the map
getTilt() | number | Returns the angle of incidence for aerial imagery in degrees (for SATELLITE and HYBRID map types)
getZoom() | number | Returns the current zoom level of the map
panBy(xnumber,ynumber) | None | Changes the center of the map by the given distance in pixels
panTo(LatLng) | None | Changes the center of the map to the given LatLng
panToBounds(LatLngBounds) | None | Pans the map by the minimum amount necessary to contain the given LatLngBounds
setCenter(LatLng) | None |
setHeading(number) | None | Sets the compass heading for aerial imagery measured in degrees from cardinal direction North
setMapTypeId(MapTypeId) | None | Changes the kind of map to display
setOptions(MapOptions) | None |
setStreetView(StreetViewPanorama) | None | Binds a StreetViewPanorama to the map
setTilt(number) | None | Sets the angle of incidence for aerial imagery in degrees (for SATELLITE and HYBRID map types)
setZoom(number) | None |

## Properties of Map()

Property | Type | Description
--- | --- | ---
controls | Array.<MVCArray.<Node>> | Additional controls to attach to the map
mapTypes | MapTypeRegistry | A registry of MapType instances by string ID
overlayMapTypes | MVCArray.<MapType> | Additional map types to overlay

## Events of Map()

Event | Arguments | Description
--- | --- | ---
bounds_changed | None | Fired when the viewport bounds have changed
center_changed | None | Fired when the map center property changes
click | MouseEvent | Fired when the user clicks on the map
dblclick | MouseEvent | Fired when the user double-clicks on the map
drag | None | Fired repeatedly while the user drags the map
dragend | None | Fired when the user stops dragging the map
dragstart | None | Fired when the user starts dragging the map
heading_changed | None | Fired when the map heading property changes
idle | None | Fired when the map becomes idle after panning or zooming
maptypeid_changed | None | Fired when the mapTypeId property changes
mousemove | MouseEvent | Fired whenever the user's mouse moves over the map container
mouseout | MouseEvent | Fired when the user's mouse exits the map container
mouseover | MouseEvent | Fired when the user's mouse enters the map container
projection_changed | None | Fired when the projection has changed
resize | None | Fired when the map (div) changes size
rightclick | MouseEvent | Fired when the user right-clicks on the map
tilesloaded | None | Fired when the visible tiles have finished loading
tilt_changed | None | Fired when the map tilt property changes
zoom_changed | None | Fired when the map zoom property changes

## Overlays

Constructor/Object | Description
--- | ---
Marker | Creates a marker. (Note that the position must be set for the marker to display)
MarkerOptions | Options for rendering the marker
MarkerImage | A structure representing a Marker icon or shadow image
MarkerShape | Defines the marker shape to use in determination of a marker's clickable region (type and coord)
Animation | Specifies animations that can be played on a marker (bounce or drop)
InfoWindow | Creates an info window
InfoWindowOptions | Options for rendering the info window
Polyline | Creates a polyline (contains path and stroke styles)
PolylineOptions | Options for rendering the polyline
Polygon | Creates a polygon (contains path and stroke+fill styles)
PolygonOptions | Options for rendering the polygon
Rectangle | Creates a rectangle (contains bounds and stroke+fill styles)
RectangleOptions | Options for rendering the rectangle
Circle | Creates a circle (contains center+radius and stroke+fill styles)
CircleOptions | Options for rendering the circle
GroundOverlay |
GroundOverlayOptions |
OverlayView |
MapPanes |
MapCanvasProjection |

## Events

Constructor/Object | Description
--- | ---
MapsEventListener | It has no methods and no constructor. Its instances are returned from addListener(), addDomListener() and are eventually passed back to removeListener()
event | Adds/Removes/Trigger event listeners
MouseEvent | Returned from various mouse events on the map and overlays

## Controls

Constructor/Object | Description
--- | ---
MapTypeControlOptions | Holds options for modifying a control (position and style)
MapTypeControlStyle | Specifies what kind of map control to display (Drop-down menu or buttons)
OverviewMapControlOptions | Options for rendering of the overview map control (opened or collapsed)
PanControlOptions | Options for rendering of the pan control (position)
RotateControlOptions | Options for rendering of the rotate control (position)
ScaleControlOptions | Options for rendering of the scale control (position and style)
ScaleControlStyle | Specifies what kind of scale control to display
StreetViewControlOptions | Options for rendering of the street view pegman control (position)
ZoomControlOptions | Options for rendering of the zoom control (position and style)
ZoomControlStyle | Specifies what kind of zoom control to display (large or small)
ControlPosition | Specifies the placement of controls on the map

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples