Tutorials References Exercises Videos Menu
Free Website Get Certified Pro

Google Maps Reference


The Map() Constructor

Example

Create a Google Map:

var map = new google.maps.Map(mapCanvas, mapOptions);

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 Sets the lat/lng of the center of the map
setHeading(number) None Sets the compass heading for aerial imagery measured in degrees from cardinal direction North
setMapTypeId(MapTypeId) None Sets the map type 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 Sets the zoom level of the map


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