<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/reference/routes-elements_c1b4b9d76f47750cd4ba4d15d82ab3e0a23eacb9c114e7f9c9bfad5b9f7ad1ad.frame" class="framebox inherit-locale redirect-iframe" allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## [Route3DElement](https://developers.google.com/maps/documentation/javascript/reference/routes-elements.md.txt#Route3DElement)
class


class
`google.maps.routes.Route3DElement`
extends `HTMLElement`
implements `Route3DElementOptions`

library `"routes"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).

A web component for 3D route rendering. Currently support origin and destination parameters to render a polyline in 3D space in a 3D map.

```html
<gmp-route-3d
  autofits-camera
  departure-time="####-##-##T##:##Z"
  destination="lat,lng"
  internal-usage-attribution-ids="space separated strings"
  origin="lat,lng"
  routing-preference="value-name"
  traffic-polylines-disabled
  travel-mode="value-name">
</gmp-route-3d>
```

```javascript
const {Route3DElement} = await google.maps.importLibrary("routes");
```

| ### Constructor ||
|---|---|
| `Route3DElement` | `Route3DElement([options])` **Parameters:** - `options: Route3DElementOptions optional` Creates a `Route3DElement` with the options specified. |

| ### Properties ||
|---|---|
| `autofitsCamera` attr: autofits-camera | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If provided, the specified route will be made visible within the map viewport, alongside any other elements that have opted in. **HTML attribute:** `autofits-camera` |
| `departureTime` attr: departure-time | **Input type:** `Date optional` **Output type:** `Date optional` If provided, the route will be computed with the specified departure time. When specifying via HTML attribute, use the ISO 8601 format for reliable results across browsers. For information on usage requirements, see `ComputeRoutesRequest.departureTime`. **HTML attribute:** `departure-time="####-##-##T##:##Z"` |
| `destination` attr: destination | **Input type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` **Output type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` The destination of the route. **HTML attribute:** - `destination="lat,lng"` - `destination="places/###"` - `destination="address"` |
| `fallbackInfo` readonly | **Type:** `FallbackInfo optional` Fallback info for the computed routes. |
| `geocodingResults` readonly | **Type:** `GeocodingResults optional` Geocoding results for the origin and destination. |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable<string> optional` **Output type:** `Array<string> optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `origin` attr: origin | **Input type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` **Output type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` The origin of the route. **HTML attribute:** - `origin="lat,lng"` - `origin="places/###"` - `origin="address"` |
| `routes` readonly | **Type:** `Array<Route> optional` The primary route along with optional alternate routes, computed from the Routes API. |
| `routingPreference` attr: routing-preference | **Input type:** `RoutingPreference optional` **Output type:** `RoutingPreference optional` If provided, the route will be computed with traffic information along the route that's based on the `RoutingPreference` specified, and use traffic-specific coloring. **HTML attribute:** `routing-preference="value-name"` |
| `trafficPolylinesDisabled` attr: traffic-polylines-disabled | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` Whether to disable traffic-aware polylines. Traffic aware polylines are only available when routingPreference is set to TRAFFIC_AWARE or TRAFFIC_AWARE_OPTIMAL. **HTML attribute:** `traffic-polylines-disabled` |
| `travelMode` attr: travel-mode | **Input type:** `TravelMode optional` **Output type:** `TravelMode optional` If provided, the polyline is based on the specified travel mode. **HTML attribute:** `travel-mode="value-name"` |

| ### Methods ||
|---|---|

| ### Events ||
|---|---|
| `![Alpha](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%2301579b'%3E%3Cpath d='M5 21q-1.275 0-1.812-1.137-.538-1.138.262-2.113L9 11V5H8q-.425 0-.713-.288Q7 4.425 7 4t.287-.713Q7.575 3 8 3h8q.425 0 .712.287Q17 3.575 17 4t-.288.712Q16.425 5 16 5h-1v6l5.55 6.75q.8.975.262 2.113Q20.275 21 19 21Zm2-3h10l-3.4-4h-3.2Zm-2 1h14l-6-7.3V5h-2v6.7Zm7-7Z'/%3E%3C/svg%3E "Alpha")gmp-error` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). `function(routeInitializationErrorEvent)` **Arguments:** - `routeInitializationErrorEvent: Event optional` This event is fired when the route fails to load. |
| `![Alpha](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%2301579b'%3E%3Cpath d='M5 21q-1.275 0-1.812-1.137-.538-1.138.262-2.113L9 11V5H8q-.425 0-.713-.288Q7 4.425 7 4t.287-.713Q7.575 3 8 3h8q.425 0 .712.287Q17 3.575 17 4t-.288.712Q16.425 5 16 5h-1v6l5.55 6.75q.8.975.262 2.113Q20.275 21 19 21Zm2-3h10l-3.4-4h-3.2Zm-2 1h14l-6-7.3V5h-2v6.7Zm7-7Z'/%3E%3C/svg%3E "Alpha")gmp-load` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). `function(routeInitializationSuccessEvent)` **Arguments:** - `routeInitializationSuccessEvent: Event optional` This event is fired when the route successfully loads. |

## [Route3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/routes-elements.md.txt#Route3DElementOptions)
interface


interface
`google.maps.routes.Route3DElementOptions`

implemented by `Route3DElement`

Route3DElementOptions object used to define the properties that can be set on a Route3DElement.

| ### Properties ||
|---|---|
| `autofitsCamera` optional | **Type:** `boolean optional` Whether or not to opt into automatically fitting the camera to the route. |
| `departureTime` optional | **Type:** `Date optional` See `Route3DElement.departureTime`. |
| `destination` optional | **Type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` See `Route3DElement.destination`. |
| `internalUsageAttributionIds` optional | **Type:** `Iterable<string> optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
| `origin` optional | **Type:** `string|LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Place optional` See `Route3DElement.origin`. |
| `routingPreference` optional | **Type:** `RoutingPreference optional` See `Route3DElement.routingPreference`. |
| `trafficPolylinesDisabled` optional | **Type:** `boolean optional` Whether to disable traffic-aware polylines. Traffic aware polylines are only available when routingPreference is set to TRAFFIC_AWARE or TRAFFIC_AWARE_OPTIMAL. |
| `travelMode` optional | **Type:** `TravelMode optional` See `Route3DElement.travelMode`. |