Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

3D Maps

Map3DElementclass

google.maps.maps3d.Map3DElementclass

Map3DElement is an HTML interface for the 3D Map view. Note that themode must be set for the 3D Map to start rendering.

Custom element:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number" default-ui-disabled></gmp-map-3d>

This class extendsHTMLElement.

This class implementsMap3DElementOptions.

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

Constructor
`Map3DElement`	`Map3DElement([options])` Parameters: `options`: `Map3DElementOptionsoptional`

Properties
`bounds`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` When set, restricts the position of the camera within the specified lat/lng bounds. Note that objects outside the bounds are still rendered. Bounds can restrict both longitude and latitude, or can restrict either latitude or longitude only. For latitude-only bounds use west and east longitudes of`-180` and`180`, respectively. For longitude-only bounds use north and south latitudes of`90` and`-90`, respectively.
`center`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` The center of the map given as a LatLngAltitude, where altitude is in meters above ground level. Note that this is not necessarily where the camera is located, as the`range` field affects the camera's distance from the map center. If not set, defaults to`{lat: 0, lng: 0, altitude: 63170000}`. 63170000 meters is a maximum allowed altitude (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>`
`defaultUIHidden`	Type: `booleanoptional` Default:`false` When`true`, all default UI buttons are hidden. HTML attribute: `<gmp-map-3d default-ui-hidden></gmp-map-3d>`
`description`	Type: `stringoptional` If provided, an accessibility description (e.g. for use with screen readers) will be added to the map with the provided value. HTML attribute: `<gmp-map-3d description="string"></gmp-map-3d>`
`gestureHandling`	Type: `GestureHandlingoptional` Default:`GestureHandling.GREEDY` Controls cooperative gesture handling. When set to`COOPERATIVE`, modifier keys or two-finger gestures are required to scroll the map. When set to`GREEDY`, the host page cannot be scrolled from user events on the map element. When set to`AUTO`, the gesture handling is determined by the scrollability of the host page. HTML attribute: `<gmp-map-3d gesture-handling="auto"></gmp-map-3d>` `<gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>` `<gmp-map-3d gesture-handling="greedy"></gmp-map-3d>`
`heading`	Type: `numberoptional` The compass heading of the map, in degrees, where due north is zero. When there is no tilt, any roll will be interpreted as heading. HTML attribute: `<gmp-map-3d heading="number"></gmp-map-3d>`
`internalUsageAttributionIds`	Type: `Iterable<string>optional` Adds a usage attribution ID to the initializer, which helps Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library. To opt out of sending the usage attribution ID, it is safe to delete this property. Only unique values will be sent. Changes to this value after instantiation may be ignored. HTML attribute: `<gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>`
`language`	Type: `stringoptional` Language in which to attempt to render the base map's language. Will default to the language requested by the developer when loading the Maps JS API. This must be set when the element is created, and cannot be updated after the map has loaded.
`mapId`	Type: `stringoptional` Specifies a map ID which will be used to fetch cloud-based map style for the map. This should not be set after the map has been initialized. Therefore we ensure the mapId is only set during initialization and do not publish this attribute to public-facing channels. HTML attribute: `<gmp-map-3d map-id="string"></gmp-map-3d>`
`maxAltitude`	Type: `numberoptional` The maximum altitude above the ground which will be displayed on the map. A valid value is between`0` and`63170000` meters (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d max-altitude="number"></gmp-map-3d>`
`maxHeading`	Type: `numberoptional` The maximum angle of heading (rotation) of the map. A valid value is between`0` and`360` degrees.`minHeading` and`maxHeading` represent an interval of <=`360` degrees in which heading gestures will be allowed.`minHeading = 180` and`maxHeading = 90` will allow heading in`[0, 90]` and heading in`[180, 360]`.`minHeading = 90` and`maxHeading = 180` will allow heading in`[90, 180]`. HTML attribute: `<gmp-map-3d max-heading="number"></gmp-map-3d>`
`maxTilt`	Type: `numberoptional` The maximum angle of incidence of the map. A valid value is between`0` and`90` degrees. HTML attribute: `<gmp-map-3d max-tilt="number"></gmp-map-3d>`
`minAltitude`	Type: `numberoptional` The minimum altitude above the ground which will be displayed on the map. A valid value is between`0` and`63170000` meters (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d min-altitude="number"></gmp-map-3d>`
`minHeading`	Type: `numberoptional` The minimum angle of heading (rotation) of the map. A valid value is between`0` and`360` degrees.`minHeading` and`maxHeading` represent an interval of <=`360` degrees in which heading gestures will be allowed.`minHeading = 180` and`maxHeading = 90` will allow heading in`[0, 90]` and heading in`[180, 360]`.`minHeading = 90` and`maxHeading = 180` will allow heading in`[90, 180]`. HTML attribute: `<gmp-map-3d min-heading="number"></gmp-map-3d>`
`minTilt`	Type: `numberoptional` The minimum angle of incidence of the map. A valid value is between`0` and`90` degrees. HTML attribute: `<gmp-map-3d min-tilt="number"></gmp-map-3d>`
`mode`	Type: `MapModeoptional` Specifies a mode the map should be rendered in. If not set, the map won't be rendered. HTML attribute: `<gmp-map-3d mode="hybrid"></gmp-map-3d>` `<gmp-map-3d mode="satellite"></gmp-map-3d>`
`range`	Type: `numberoptional` The distance from camera to the center of the map, in meters. HTML attribute: `<gmp-map-3d range="number"></gmp-map-3d>`
`region`	Type: `stringoptional` Region with which to attempt to render the base map's POIs. Will default to the region requested by the developer when loading the Maps JS API. This must be set when the element is created, and cannot be updated after the map has loaded.
`roll`	Type: `numberoptional` The roll of the camera around the view vector in degrees. To resolve ambiguities, when there is no tilt, any roll will be interpreted as heading. HTML attribute: `<gmp-map-3d roll="number"></gmp-map-3d>`
`tilt`	Type: `numberoptional` The tilt of the camera's view vector in degrees. A view vector looking directly down at the earth would have a tilt of zero degrees. A view vector pointing away from the earth would have a tilt of`180` degrees. HTML attribute: `<gmp-map-3d tilt="number"></gmp-map-3d>`
`defaultUIDisabled`	Deprecated: Please use`Map3DElement.defaultUIHidden` instead. This property will be removed in a future release. Type: `booleanoptional` Default:`false` When`true`, all default UI buttons are disabled. Does not disable the keyboard and gesture controls. HTML attribute: `<gmp-map-3d default-ui-disabled></gmp-map-3d>`

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\|AddEventListenerOptionsoptional` Seeoptions. 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. SeeaddEventListener.
`flyCameraAround`	`flyCameraAround(options)` Parameters: `options`: `FlyAroundAnimationOptions` Return Value: None This method orbits the camera around a given location for a given duration. The animation can be repeated by the given number of`FlyAroundAnimationOptions.repeatCount` times. The camera will move in a clockwise direction. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started. If the number of`FlyAroundAnimationOptions.repeatCount` times is zero, no spin will occur, and the animation will complete immediately after it starts.
`flyCameraTo`	`flyCameraTo(options)` Parameters: `options`: `FlyToAnimationOptions` Return Value: None This method moves the camera parabolically from the current location to a given end location over a given duration. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started.
`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\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.
`stopCameraAnimation`	`stopCameraAnimation()` Parameters: None Return Value: None This method stops any fly animation that might happen to be running. The camera stays wherever it is mid-animation; it does not teleport to the end point. The method is asynchronous because animations can only start or stop after the map has loaded a minimum amount. The method returns once the animation has stopped.

Events
`gmp-animationend`	`function(animationEndEvent)` Arguments: `animationEndEvent`: `Event` This event is fired when the fly animation ends. This event bubbles up through the DOM tree.
`gmp-centerchange`	`function(centerChangeEvent)` Arguments: `centerChangeEvent`: `Event` This event is fired when the Map3DElement's center property changes.
`gmp-click`	`function(clickEvent)` Arguments: `clickEvent`: `LocationClickEvent\|PlaceClickEvent` This event is fired when the`Map3DElement` element is clicked.
`gmp-error`	`function(mapInitializationErrorEvent)` Arguments: `mapInitializationErrorEvent`: `Event` This event is fired when the map fails to initialize.
`gmp-headingchange`	`function(headingChangeEvent)` Arguments: `headingChangeEvent`: `Event` This event is fired when the Map3DElement's heading property changes.
`gmp-map-id-error`	`function(mapIdErrorEvent)` Arguments: `mapIdErrorEvent`: `Event` This event is fired when the Map3DElement's mapId property is invalid.
`gmp-rangechange`	`function(rangeChangeEvent)` Arguments: `rangeChangeEvent`: `Event` This event is fired when the Map3DElement's range property changes.
`gmp-rollchange`	`function(rollChangeEvent)` Arguments: `rollChangeEvent`: `Event` This event is fired when the Map3DElement's roll property changes.
`gmp-steadychange`	`function(steadyChangeEvent)` Arguments: `steadyChangeEvent`: `SteadyChangeEvent` This event is fired when the steady state of`Map3DElement` changes.
`gmp-tiltchange`	`function(tiltChangeEvent)` Arguments: `tiltChangeEvent`: `Event` This event is fired when the Map3DElement's tilt property changes.

Map3DElementOptionsinterface

google.maps.maps3d.Map3DElementOptionsinterface

Map3DElementOptions object used to define the properties that can be set on a Map3DElement.

Properties
`boundsoptional`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` See`Map3DElement.bounds`.
`centeroptional`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Map3DElement.center`.
`defaultUIDisabledoptional`	Deprecated: Please use`Map3DElement.defaultUIHidden` instead. This property will be removed in a future release. Type: `booleanoptional` See`Map3DElement.defaultUIDisabled`.
`defaultUIHiddenoptional`	Type: `booleanoptional` See`Map3DElement.defaultUIHidden`.
`descriptionoptional`	Type: `stringoptional` See`Map3DElement.description`.
`gestureHandlingoptional`	Type: `GestureHandlingoptional` See`Map3DElement.gestureHandling`.
`headingoptional`	Type: `numberoptional` See`Map3DElement.heading`.
`internalUsageAttributionIdsoptional`	Type: `Iterable<string>optional` See`Map3DElement.internalUsageAttributionIds`.
`languageoptional`	Type: `stringoptional` See`Map3DElement.language`.
`mapIdoptional`	Type: `stringoptional` See`Map3DElement.mapId`.
`maxAltitudeoptional`	Type: `numberoptional` See`Map3DElement.maxAltitude`.
`maxHeadingoptional`	Type: `numberoptional` See`Map3DElement.maxHeading`.
`maxTiltoptional`	Type: `numberoptional` See`Map3DElement.maxTilt`.
`minAltitudeoptional`	Type: `numberoptional` See`Map3DElement.minAltitude`.
`minHeadingoptional`	Type: `numberoptional` See`Map3DElement.minHeading`.
`minTiltoptional`	Type: `numberoptional` See`Map3DElement.minTilt`.
`modeoptional`	Type: `MapModeoptional` See`Map3DElement.mode`.
`rangeoptional`	Type: `numberoptional` See`Map3DElement.range`.
`regionoptional`	Type: `stringoptional` See`Map3DElement.region`.
`rolloptional`	Type: `numberoptional` See`Map3DElement.roll`.
`tiltoptional`	Type: `numberoptional` See`Map3DElement.tilt`.

MapModeconstants

google.maps.maps3d.MapModeconstants

Specifies a mode the map should be rendered in.

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

Constants
`HYBRID`	This map mode displays a transparent layer of major streets on satellite, or photorealistic imagery.
`SATELLITE`	This map mode displays satellite, or photorealistic imagery where available.

GestureHandlingconstants

google.maps.maps3d.GestureHandlingconstants

Specifies how gesture events should be handled on the map element.

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

Constants
`AUTO`	This lets the map choose whether to use cooperative or greedy gesture handling. This is the default behavior if not specified. This will cause the map to enter cooperative mode if the map is dominating its scroll parent (usually the host page) to where the user cannot scroll away from the map to other content.
`COOPERATIVE`	This forces cooperative mode, where modifier keys or two-finger gestures are required to scroll the map.
`GREEDY`	This forces greedy mode, where the host page cannot be scrolled from user events on the map element.

FlyAroundAnimationOptionsinterface

google.maps.maps3d.FlyAroundAnimationOptionsinterface

Customization options for the FlyCameraAround Animation.

Properties
`camera`	Type: `CameraOptions` The central point at which the camera should look at during the orbit animation. Note that the map heading will change as the camera orbits around this center point.
`durationMillisoptional`	Type: `numberoptional` The duration of one animation cycle in milliseconds.
`repeatCountoptional`	Type: `numberoptional` Specifies the number of times an animation should repeat. If the number is zero, the animation will complete immediately after it starts.
`roundsoptional`	Deprecated: Please use`FlyAroundAnimationOptions.repeatCount` instead. Type: `numberoptional` The number of rounds to rotate around the center in the given duration. This controls the overall speed of rotation. Passing a negative number to rounds will cause the camera to rotate in a counter-clockwise direction instead of the default clockwise direction.

FlyToAnimationOptionsinterface

google.maps.maps3d.FlyToAnimationOptionsinterface

Customization options for the FlyCameraTo Animation.

Properties
`endCamera`	Type: `CameraOptions` The location at which the camera should point at the end of the animation.
`durationMillisoptional`	Type: `numberoptional` The duration of the animation in milliseconds. A duration of 0 will teleport the camera straight to the end position.

CameraOptionsinterface

google.maps.maps3d.CameraOptionsinterface

CameraOptions object used to define the properties that can be set on a camera object. The camera object can be anything that has a camera position, e.g. a current map state, or a future requested animation state.

Properties
`centeroptional`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Map3DElement.center`.
`headingoptional`	Type: `numberoptional` See`Map3DElement.heading`.
`rangeoptional`	Type: `numberoptional` See`Map3DElement.range`.
`rolloptional`	Type: `numberoptional` See`Map3DElement.roll`.
`tiltoptional`	Type: `numberoptional` See`Map3DElement.tilt`.

SteadyChangeEventclass

google.maps.maps3d.SteadyChangeEventclass

This event is created from monitoring a steady state ofMap3DElement. This event bubbles up through the DOM tree.

This class extendsEvent.

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

Properties
`isSteady`	Type: `boolean` Indicates whether Map3DElement is steady (i.e. all rendering for the current scene has completed) or not.

LocationClickEventclass

google.maps.maps3d.LocationClickEventclass

This event is created from clicking a Map3DElement.

This class extendsEvent.

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

Properties
`position`	Type: `LatLngAltitudeoptional` The latitude/longitude/altitude that was below the cursor when the event occurred. Please note, that at coarser levels, less accurate data will be returned. Also, sea floor elevation may be returned for the altitude value when clicking at the water surface from higher camera positions. This event bubbles up through the DOM tree.

PlaceClickEventclass

google.maps.maps3d.PlaceClickEventclass

This event is created from clicking on a place icon on aMap3DElement. To prevent the default popover from showing up, call thepreventDefault() method on this event to prevent it being handled by theMap3DElement.

This class extendsLocationClickEvent.

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

Properties
`placeId`	Type: `string` The place id of the map feature.
Inherited:`position`

Methods
`fetchPlace`	`fetchPlace()` Parameters: None Return Value: `Promise<Place>` Fetches a`Place` for this place id. In the resulting`Place` object, the id property will be populated. Additional fields can be subsequently requested via`Place.fetchFields()` subject to normal Places API enablement and billing. The promise is rejected if there was an error fetching the`Place`.

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-11-21 UTC.

Movatterモバイル変換

3D Maps Stay organized with collections Save and categorize content based on your preferences.

Map3DElementclass

Constructor

Properties

Methods

Events

Map3DElementOptionsinterface

Properties

MapModeconstants

Constants

GestureHandlingconstants

Constants

FlyAroundAnimationOptionsinterface

Properties

FlyToAnimationOptionsinterface

Properties

CameraOptionsinterface

Properties

SteadyChangeEventclass

Properties

LocationClickEventclass

Properties

PlaceClickEventclass

Properties

Methods

3D Maps