Google Maps Reference
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
Google Maps Reference
❮ Previous
Next ❯
The Map() Constructor
Example
Create a Google Map:
var map = new google.maps.Map(mapCanvas, mapOptions);
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 | 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 |
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });
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 ❯
