Announcement: New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.

Elevation Widget (alpha)

ElevationElement class

google.maps.elevation.ElevationElement class

An HTML element that visually displays elevation data. Set the element's path property to show a graph of elevation along the path.

Custom element:
<gmp-elevation unit-system="imperial"></gmp-elevation>

This class extends HTMLElement.

This class implements ElevationElementOptions.

Access by calling const {ElevationElement} = await google.maps.importLibrary("elevation"). See Libraries in the Maps JavaScript API.

Constructor
`ElevationElement`	`ElevationElement([options])` Parameters: `options`: `ElevationElementOptions optional`

Properties
`path`	Type: `Array<LatLng\|LatLngLiteral\|LatLngAltitude> optional` The path along which to show elevation data. Line segments will be interpolated in between the points of the array; even a small number of points will still produce a detailed elevation graph. If only one point is provided, the widget will show the elevation number for that point.
`unitSystem`	Type: `UnitSystem optional` Determines if elevation will be shown in feet/miles or meters/km. If undefined, the widget will default to the preferred unit system for the region specified in the API loader. HTML attribute: `<gmp-elevation unit-system="imperial"></gmp-elevation>` `<gmp-elevation unit-system="metric"></gmp-elevation>`

Methods
`addEventListener`	Notice: Available only in the v=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\|AddEventListenerOptions optional` See options. Custom events only support `capture` and `passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener
`removeEventListener`	Notice: Available only in the v=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\|EventListenerOptions optional` See options Return Value: `void` Removes an event listener previously registered with addEventListener from the target. See removeEventListener

Methods

addEventListener

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|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener

removeEventListener

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|EventListenerOptions optional See options

Return Value: void

Removes an event listener previously registered with addEventListener from the target. See removeEventListener

Events
`gmp-load`	`function(event)` Arguments: `event`: `Event` This event is fired when the element loads and renders its content. This event does not bubble.
`gmp-requesterror`	`function(event)` Arguments: `event`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

ElevationElementOptions interface

google.maps.elevation.ElevationElementOptions interface

Options for ElevationElement.

Properties
`path optional`	Type: `Array<LatLng\|LatLngLiteral> optional` See `ElevationElement.path`
`unitSystem optional`	Type: `UnitSystem optional` See `ElevationElement.unitSystem`