MapElementclass

google.maps.MapElementclass

MapElement is anHTMLElement subclass for rendering maps. After loading themaps library, a map can be created in HTML. For example:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
  <button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>

Custom element:
<gmp-map center="lat,lng" heading-interaction-disabled internal-usage-attribution-ids="id1 id2" map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>

This class extendsHTMLElement.

This class implementsMapElementOptions.

Access by callingconst {MapElement} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

Methods
addEventListener	Notice: Available only in thev=beta channel. addEventListener(type, listener[, options]) Parameters:  type: string A case-sensitive string representing the event type to listen for. listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive. Return Value: void Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
removeEventListener	Notice: Available only in thev=beta channel. removeEventListener(type, listener[, options]) Parameters:  type: string A string which specifies the type of event for which to remove an event listener. listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target. options: boolean|EventListenerOptionsoptional Seeoptions. Return Value: void Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

MapElementOptionsinterface

google.maps.MapElementOptionsinterface

Notice: Available only in thev=beta channel.

MapElementOptions object used to define the properties that can be set on a MapElement.

ZoomChangeEventclass

google.maps.ZoomChangeEventclass

This event is created from monitoring zoom change.

This class extendsEvent.

Access by callingconst {ZoomChangeEvent} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

Mapclass

google.maps.Mapclass

This class extendsMVCObject.

Access by callingconst {Map} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

Methods
fitBounds	fitBounds(bounds[, padding]) Parameters:  bounds: LatLngBounds|LatLngBoundsLiteral Bounds to show. padding: number|Paddingoptional Padding in pixels. The bounds will be fit in the part of the map that remains after padding is removed. A number value will yield the same padding on all 4 sides. Supply 0 here to make a fitBounds idempotent on the result of getBounds. Return Value:  None Sets the viewport to contain the given bounds. Note: When the map is set todisplay: none, thefitBounds function reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map tovisibility: hidden, thereby ensuring the map div has an actual size. For vector maps, this method sets the map's tilt and heading to their default zero values. Calling this method may cause a smooth animation as the map pans and zooms to fit the bounds. Whether or not this method animates depends on an internal heuristic.
getBounds	getBounds() Parameters:  None Return Value: LatLngBounds|undefined The lat/lng bounds of the current viewport. Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized or center and zoom have not been set then the result isundefined. For vector maps with non-zero tilt or heading, the returned lat/lng bounds represents the smallest bounding box that includes the visible region of the map's viewport. SeeMapCanvasProjection.getVisibleRegion for getting the exact visible region of the map's viewport.
getCenter	getCenter() Parameters:  None Return Value: LatLng|undefined Returns the position displayed at the center of the map. Note that thisLatLng object isnot wrapped. SeeLatLng for more information. If the center or bounds have not been set then the result isundefined.
getClickableIcons	getClickableIcons() Parameters:  None Return Value: boolean|undefined Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value istrue, then the icons are clickable on the map.
getDatasetFeatureLayer	Notice: Available only in thev=beta channel. getDatasetFeatureLayer(datasetId) Parameters:  datasetId: string Return Value: FeatureLayer Returns theFeatureLayer for the specifieddatasetId. Dataset IDs must be configured in the Google Cloud Console. If the dataset ID is not associated with the map's map style, or if Data-driven styling is not available (no map ID, no vector tiles, no Data-Driven Styling feature layers or Datasets configured in the Map Style), this logs an error, and the resultingFeatureLayer.isAvailable will be false.
getDiv	getDiv() Parameters:  None Return Value: HTMLElement The mapDiv of the map.
getFeatureLayer	getFeatureLayer(featureType) Parameters:  featureType: FeatureType Return Value: FeatureLayer Returns theFeatureLayer of the specificFeatureType. AFeatureLayer must be enabled in the Google Cloud Console. If aFeatureLayer of the specifiedFeatureType does not exist on this map, or if Data-driven styling is not available (no map ID, no vector tiles, and noFeatureLayer enabled in the map style), this logs an error, and the resultingFeatureLayer.isAvailable will be false.
getHeading	getHeading() Parameters:  None Return Value: number|undefined Returns the compass heading of the map. The heading value is measured in degrees (clockwise) from cardinal direction North. If the map is not yet initialized then the result isundefined.
getHeadingInteractionEnabled	getHeadingInteractionEnabled() Parameters:  None Return Value: boolean|null Returns whether heading interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
getInternalUsageAttributionIds	getInternalUsageAttributionIds() Parameters:  None Return Value: Iterable<string>|null Returns the list of usage attribution IDs, which help Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library.
getMapCapabilities	getMapCapabilities() Parameters:  None Return Value: MapCapabilities Informs the caller of the current capabilities available to the map based on the map ID that was provided.
getMapTypeId	getMapTypeId() Parameters:  None Return Value: MapTypeId|string|undefined
getProjection	getProjection() Parameters:  None Return Value: Projection|undefined Returns the currentProjection. If the map is not yet initialized then the result isundefined. Listen to theprojection_changed event and check its value to ensure it is notundefined.
getRenderingType	getRenderingType() Parameters:  None Return Value: RenderingType Returns the current RenderingType of the map.
getStreetView	getStreetView() Parameters:  None Return Value: StreetViewPanorama The panorama bound to the map. Returns the defaultStreetViewPanorama bound to the map, which may be a default panorama embedded within the map, or the panorama set usingsetStreetView(). Changes to the map'sstreetViewControl will be reflected in the display of such a bound panorama.
getTilt	getTilt() Parameters:  None Return Value: number|undefined Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. For raster maps, the result will be0 for imagery taken directly overhead or45 for 45° imagery. This method does not return the value set bysetTilt. SeesetTilt for details.
getTiltInteractionEnabled	getTiltInteractionEnabled() Parameters:  None Return Value: boolean|null Returns whether tilt interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
getZoom	getZoom() Parameters:  None Return Value: number|undefined Returns the zoom of the map. If the zoom has not been set then the result isundefined.
moveCamera	moveCamera(cameraOptions) Parameters:  cameraOptions: CameraOptions Return Value:  None Immediately sets the map's camera to the target camera options, without animation.
panBy	panBy(x, y) Parameters:  x: number Number of pixels to move the map in the x direction. y: number Number of pixels to move the map in the y direction. Return Value:  None Changes the center of the map by the given distance in pixels. If the distance is less than both the width and height of the map, the transition will be smoothly animated. Note that the map coordinate system increases from west to east (for x values) and north to south (for y values).
panTo	panTo(latLng) Parameters:  latLng: LatLng|LatLngLiteral The new center latitude/longitude of the map. Return Value:  None Changes the center of the map to the givenLatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.
panToBounds	panToBounds(latLngBounds[, padding]) Parameters:  latLngBounds: LatLngBounds|LatLngBoundsLiteral The bounds to pan the map to. padding: number|Paddingoptional Padding in pixels. A number value will yield the same padding on all 4 sides. The default value is 0. Return Value:  None Pans the map by the minimum amount necessary to contain the givenLatLngBounds. It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside{currentMapSizeInPx} - {padding}. For both raster and vector maps, the map's zoom, tilt, and heading will not be changed.
setCenter	setCenter(latlng) Parameters:  latlng: LatLng|LatLngLiteral Return Value:  None
setClickableIcons	setClickableIcons(value) Parameters:  value: boolean Return Value:  None Controls whether the map icons are clickable or not. A map icon represents a point of interest, also known as a POI. To disable the clickability of map icons, pass a value offalse to this method.
setHeading	setHeading(heading) Parameters:  heading: number Return Value:  None Sets the compass heading for map measured in degrees from cardinal direction North. For raster maps, this method only applies to aerial imagery.
setHeadingInteractionEnabled	setHeadingInteractionEnabled(headingInteractionEnabled) Parameters:  headingInteractionEnabled: boolean Return Value:  None Sets whether heading interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
setMapTypeId	setMapTypeId(mapTypeId) Parameters:  mapTypeId: MapTypeId|string Return Value:  None
setOptions	setOptions(options) Parameters:  options: MapOptionsoptional Return Value:  None
setRenderingType	setRenderingType(renderingType) Parameters:  renderingType: RenderingType Return Value:  None Sets the current RenderingType of the map.
setStreetView	setStreetView(panorama) Parameters:  panorama: StreetViewPanoramaoptional The panorama to bind to the map. Return Value:  None Binds aStreetViewPanorama to the map. This panorama overrides the defaultStreetViewPanorama, allowing the map to bind to an external panorama outside of the map. Setting the panorama tonull binds the default embedded panorama back to the map.
setTilt	setTilt(tilt) Parameters:  tilt: number Return Value:  None For vector maps, sets the angle of incidence of the map. The allowed values are restricted depending on the zoom level of the map. For raster maps, controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are0 and45.setTilt(0) causes the map to always use a 0° overhead view regardless of the zoom level and viewport.setTilt(45) causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available forsatellite andhybrid map types, within some locations, and at some zoom levels.Note:getTilt returns the current tilt angle, not the value set bysetTilt. BecausegetTilt andsetTilt refer to different things, do notbind() thetilt property; doing so may yield unpredictable effects.
setTiltInteractionEnabled	setTiltInteractionEnabled(tiltInteractionEnabled) Parameters:  tiltInteractionEnabled: boolean Return Value:  None Sets whether tilt interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
setZoom	setZoom(zoom) Parameters:  zoom: number Larger zoom values correspond to a higher resolution. Return Value:  None Sets the zoom of the map.
Inherited:addListener,bindTo,get,notify,set,setValues,unbind,unbindAll

MapOptionsinterface

google.maps.MapOptionsinterface

MapOptions object used to define the properties that can be set on a Map.

MapTypeStyleinterface

google.maps.MapTypeStyleinterface

TheMapTypeStyle is a collection of selectors and stylers that define how the map should be styled. Selectors specify the map features and/or elements that should be affected, and stylers specify how those features and elements should be modified. For details, see thestyle reference.

MapMouseEventinterface

google.maps.MapMouseEventinterface

This object is returned from various mouse events on the map and overlays, and contains all the fields shown below.

IconMouseEventinterface

google.maps.IconMouseEventinterface

This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more aboutplace IDs in the Places API developer guide.

This interface extendsMapMouseEvent.

ColorSchemeconstants

google.maps.ColorSchemeconstants

Identifiers for map color schemes. Specify these by value, or by using the constant's name. For example,'FOLLOW_SYSTEM' orgoogle.maps.ColorScheme.FOLLOW_SYSTEM.

Access by callingconst {ColorScheme} = await google.maps.importLibrary("core").
SeeLibraries in the Maps JavaScript API.

MapTypeIdconstants

google.maps.MapTypeIdconstants

Identifiers for common MapTypes. Specify these by value, or by using the constant's name. For example,'satellite' orgoogle.maps.MapTypeId.SATELLITE.

Access by callingconst {MapTypeId} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

MapTypeRegistryclass

google.maps.MapTypeRegistryclass

A registry for MapType instances, keyed by MapType id.

This class extendsMVCObject.

Access by callingconst {MapTypeRegistry} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

MapRestrictioninterface

google.maps.MapRestrictioninterface

A restriction that can be applied to the Map. The map's viewport will not exceed these restrictions.

TrafficLayerclass

google.maps.TrafficLayerclass

A traffic layer.

This class extendsMVCObject.

Access by callingconst {TrafficLayer} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

TrafficLayerOptionsinterface

google.maps.TrafficLayerOptionsinterface

TrafficLayerOptions object used to define the properties that can be set on a TrafficLayer.

TransitLayerclass

google.maps.TransitLayerclass

A transit layer.

This class extendsMVCObject.

Access by callingconst {TransitLayer} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

BicyclingLayerclass

google.maps.BicyclingLayerclass

A layer showing bike lanes and paths.

This class extendsMVCObject.

Access by callingconst {BicyclingLayer} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

CameraOptionsinterface

google.maps.CameraOptionsinterface

Notice: Available only in thev=beta channel.

Used for setting the map's camera options.

VisibleRegioninterface

google.maps.VisibleRegioninterface

Contains the four points defining the four-sided polygon that is the visible region of the map. On a vector map this polygon can be a trapezoid instead of a rectangle, when a vector map has tilt.

RenderingTypeconstants

google.maps.RenderingTypeconstants

Access by callingconst {RenderingType} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

MapCapabilitiesinterface

google.maps.MapCapabilitiesinterface

Object containing a snapshot of what capabilities are currently available for the Map. Note that this does not necessarily mean that relevant modules are loaded or initialized, but rather that the current map has permission to use these APIs. See the properties for a list of possible capabilities.