Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, andshare your input to help shape the future of GMP!

Elevation Widget (alpha)

ElevationElementclass

google.maps.elevation.ElevationElementclass

Notice: Available only in thev=alpha channel.

An HTML element that visually displays elevation data. Set the element'spath property to show a graph of elevation along the path. To use the Elevation Element, enable thePlaces UI Kit API for your project in the Google Cloud console.

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

This class extendsHTMLElement.

This class implementsElevationElementOptions.

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

Constructor

ElevationElement
ElevationElement([options])
Parameters: 

Properties

path
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: UnitSystemoptional
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

BetaaddEventListener

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.
BetaremoveEventListener

Notice: Available only in thev=beta channel.

removeEventListener(type, listener[, options])
Parameters: 
Return Value: void
Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events

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

ElevationElementOptionsinterface

google.maps.elevation.ElevationElementOptionsinterface

Notice: Available only in thev=alpha channel.

Options forElevationElement.

Properties

pathoptional
Type: Array<LatLng|LatLngLiteral>optional
unitSystemoptional
Type: UnitSystemoptional

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-18 UTC.