Models are 3D assets that can be added to scene to represent objects. The
Photorealistic 3D Maps in Maps JavaScript API supports the inclusion of gLTF models. These models can be
scaled and rotated to allow for further customization.
TheModel3DElementconstructor takes a set ofModel3DElementOptionsspecifying theLatLngcoordinates of the model and a set of parameters to support positioning the
model.
Models support the following options:
position: The location of the model expressed inLatLngcoordinates.
orientation: The rotation of the model's coordinate system. Rotations are
applied in the following order: roll, tilt and then heading.
scale: Scales the model in its coordinate space. The default value is1.
altitudeMode: How the altitude expressed inpositionis interpreted.
src: The URL of the model.
The following example demonstrates adding models to the map and modifying them
using the available customization options:
asyncfunctioninit(){const{Map3DElement,MapMode,Model3DElement}=awaitgoogle.maps.importLibrary("maps3d");constmap=newMap3DElement({center:{lat:37.7438,lng:-121.5088,altitude:1800},heading:-90,tilt:90,mode:MapMode.SATELLITE,});document.body.append(map);constmodels=[// A model with regular settings.{position:{lat:37.76,lng:-121.63,altitude:0},orientation:{tilt:270},},// Scaled down model.{position:{lat:37.75,lng:-121.63,altitude:0},orientation:{tilt:270},scale:0.8,},// Scaled up model.{position:{lat:37.735,lng:-121.63,altitude:0},orientation:{tilt:270},scale:1.2,},// A model with an additional transformation applied.{position:{lat:37.72,lng:-121.63,altitude:0},orientation:{tilt:270,roll:90},},// Non-clamped to the ground model.{position:{lat:37.71,lng:-121.63,altitude:1000},altitudeMode:'RELATIVE_TO_GROUND',orientation:{tilt:270},},];for(const{position,altitudeMode,orientation,scale}ofmodels){constmodel=newModel3DElement({src:'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',position,altitudeMode,orientation,scale,});map.append(model);}}init();
Add an interactive model
Models also support interaction. The following example changes the model's scale
when clicked.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[],[],null,["Select platform: [Android](/maps/documentation/maps-3d/android-sdk/add-3d-models \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/add-3d-models \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/models \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\n\nModels are 3D assets that can be added to scene to represent objects. The\nPhotorealistic 3D Maps in Maps JavaScript API supports the inclusion of gLTF models. These models can be\nscaled and rotated to allow for further customization.\n\nThe models must support the [core properties of the glTF\nPBR](https://www.khronos.org/gltf/pbr). No extensions or extension properties\nare supported.\n\nAdd a model\n\nThe\n[`Model3DElement`](/maps/documentation/javascript/reference/3d-mapModel3DElement)\nconstructor takes a set of `Model3DElementOptions` specifying the `LatLng`\ncoordinates of the model and a set of parameters to support positioning the\nmodel.\n\nModels support the following options:\n\n- `position`: The location of the model expressed in `LatLng` coordinates.\n- `orientation`: The rotation of the model's coordinate system. Rotations are applied in the following order: roll, tilt and then heading.\n- `scale`: Scales the model in its coordinate space. The default value is `1`.\n- `altitudeMode`: How the altitude expressed in `position` is interpreted.\n- `src`: The URL of the model.\n\n| **Important:** In order for models to render in the scene, you must specify both `position` and `src` options.\n| **Note:** If you're hosting your model files on a different website or server than your main application, you must ensure that your application sets the correct [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) HTTP headers.\n\nThe following example demonstrates adding models to the map and modifying them\nusing the available customization options: \n\n async function init() {\n const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary(\"maps3d\");\n\n const map = new Map3DElement({\n center: {lat: 37.7438, lng: -121.5088, altitude: 1800},\n heading: -90,\n tilt: 90,\n mode: MapMode.SATELLITE,\n });\n\n document.body.append(map);\n const models = \\[\n // A model with regular settings.\n {\n position: {lat: 37.76, lng: -121.63, altitude: 0},\n orientation: {tilt: 270},\n },\n // Scaled down model.\n {\n position: {lat: 37.75, lng: -121.63, altitude: 0},\n orientation: {tilt: 270},\n scale: 0.8,\n },\n // Scaled up model.\n {\n position: {lat: 37.735, lng: -121.63, altitude: 0},\n orientation: {tilt: 270},\n scale: 1.2,\n },\n // A model with an additional transformation applied.\n {\n position: {lat: 37.72, lng: -121.63, altitude: 0},\n orientation: {tilt: 270, roll: 90},\n },\n // Non-clamped to the ground model.\n {\n position: {lat: 37.71, lng: -121.63, altitude: 1000},\n altitudeMode: 'RELATIVE_TO_GROUND',\n orientation: {tilt: 270},\n },\n \\];\n for (const {position, altitudeMode, orientation, scale} of models) {\n const model = new Model3DElement({\n src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',\n position,\n altitudeMode,\n orientation,\n scale,\n });\n map.append(model);\n }\n }\n\n init();\n\nAdd an interactive model\n\nModels also support interaction. The following example changes the model's scale\nwhen clicked. \n\n async function init() {\n const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary(\"maps3d\");\n\n const map = new Map3DElement({\n center: {lat: 37.7438, lng: -121.5088, altitude: 1800},\n heading: -90,\n tilt: 90,\n mode: MapMode.SATELLITE,\n });\n\n document.body.append(map);\n\n const model = new Model3DInteractiveElement({\n src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',\n position: {lat: 37.76, lng: -121.63, altitude: 0},\n scale: 1.0,\n });\n\n model.addEventListener('gmp-click', (event) =\u003e {\n model.scale = (Math.random() * (1 - 2)).toFixed(2);\n\n });\n\n map.append(model);\n }\n\n init();"]]
