Tutorials References Exercises VideosMenu
Free WebsiteGet CertifiedPro

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

ParameterDescription
HTMLElementSpecifies in what HTML element to put the map
MapOptionsA MapOptions object that holds the map initialization variables/options

Methods of Map()

MethodReturn ValueDescription
fitBounds(LatLngBounds)NoneSets 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()LatLngReturns the lat/lng of the center of the map
getDiv()NodeReturns a DOM object that contains the map
getHeading()numberReturns the compass heading of aerial imagery (for SATELLITE and HYBRID map types)
getMapTypeId()HYBRID
ROADMAP
SATELLITE
TERRAIN
Returns the current map type
getProjection()ProjectionReturns the current Projection
getStreetView()StreetViewPanoramaReturns the default StreetViewPanorama bound to the map
getTilt()numberReturns the angle of incidence for aerial imagery in degrees (for SATELLITE and HYBRID map types)
getZoom()numberReturns the current zoom level of the map
panBy(xnumber,ynumber)NoneChanges the center of the map by the given distance in pixels
panTo(LatLng)NoneChanges the center of the map to the given LatLng
panToBounds(LatLngBounds)NonePans the map by the minimum amount necessary to contain the given LatLngBounds
setCenter(LatLng)NoneSets the lat/lng of the center of the map
setHeading(number)NoneSets the compass heading for aerial imagery measured in degrees from cardinal direction North
setMapTypeId(MapTypeId)NoneSets the map type to display
setOptions(MapOptions)None 
setStreetView(StreetViewPanorama)NoneBinds a StreetViewPanorama to the map
setTilt(number)NoneSets the angle of incidence for aerial imagery in degrees (for SATELLITE and HYBRID map types)
setZoom(number)NoneSets the zoom level of the map


Properties of Map()

PropertyTypeDescription
controlsArray.<MVCArray.<Node>>Additional controls to attach to the map
mapTypesMapTypeRegistryA registry of MapType instances by string ID
overlayMapTypesMVCArray.<MapType>Additional map types to overlay

Events of Map()

EventArgumentsDescription
bounds_changedNoneFired when the viewport bounds have changed
center_changedNoneFired when the map center property changes
clickMouseEventFired when the user clicks on the map
dblclickMouseEventFired when the user double-clicks on the map
dragNoneFired repeatedly while the user drags the map
dragendNoneFired when the user stops dragging the map
dragstartNoneFired when the user starts dragging the map
heading_changedNoneFired when the map heading property changes
idleNoneFired when the map becomes idle after panning or zooming
maptypeid_changedNoneFired when the mapTypeId property changes
mousemoveMouseEventFired whenever the user's mouse moves over the map container
mouseoutMouseEventFired when the user's mouse exits the map container
mouseoverMouseEventFired when the user's mouse enters the map container
projection_changedNoneFired when the projection has changed
resizeNoneFired when the map (div) changes size
rightclickMouseEventFired when the user right-clicks on the map
tilesloadedNoneFired when the visible tiles have finished loading
tilt_changedNoneFired when the map tilt property changes
zoom_changedNoneFired when the map zoom property changes

Overlays

Constructor/ObjectDescription
MarkerCreates a marker. (Note that the position must be set for the marker to display)
MarkerOptionsOptions for rendering the marker
MarkerImageA structure representing a Marker icon or shadow image
MarkerShapeDefines the marker shape to use in determination of a marker's clickable region (type and coord)
AnimationSpecifies animations that can be played on a marker (bounce or drop)
InfoWindowCreates an info window
InfoWindowOptionsOptions for rendering the info window
PolylineCreates a polyline (contains path and stroke styles)
PolylineOptionsOptions for rendering the polyline
PolygonCreates a polygon (contains path and stroke+fill styles)
PolygonOptionsOptions for rendering the polygon
RectangleCreates a rectangle (contains bounds and stroke+fill styles)
RectangleOptionsOptions for rendering the rectangle
CircleCreates a circle (contains center+radius and stroke+fill styles)
CircleOptionsOptions for rendering the circle
GroundOverlay 
GroundOverlayOptions 
OverlayView 
MapPanes 
MapCanvasProjection 

Events

Constructor/ObjectDescription
MapsEventListenerIt has no methods and no constructor. Its instances are returned from addListener(), addDomListener() and are eventually passed back to removeListener()
eventAdds/Removes/Trigger event listeners
MouseEventReturned from various mouse events on the map and overlays

Controls

Constructor/ObjectDescription
MapTypeControlOptionsHolds options for modifying a control (position and style)
MapTypeControlStyleSpecifies what kind of map control to display (Drop-down menu or buttons)
OverviewMapControlOptionsOptions for rendering of the overview map control (opened or collapsed)
PanControlOptionsOptions for rendering of the pan control (position)
RotateControlOptionsOptions for rendering of the rotate control (position)
ScaleControlOptionsOptions for rendering of the scale control (position and style)
ScaleControlStyleSpecifies what kind of scale control to display
StreetViewControlOptionsOptions for rendering of the street view pegman control (position)
ZoomControlOptionsOptions for rendering of the zoom control (position and style)
ZoomControlStyleSpecifies what kind of zoom control to display (large or small)
ControlPositionSpecifies the placement of controls on the map