Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/add-3d-models.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/add-3d-models.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/models.md.txt "View this page for the JavaScript platform docs.")

<br />


<iframe src="https://maps-docs-team.web.app/samples/3d-model/dist/" allow="fullscreen; "></iframe>

Models are 3D assets that can be added to scene to represent objects. The
3D Maps in Maps JavaScript API supports the inclusion of gLTF models. These models can be
scaled and rotated to allow for further customization.

The models must support the [core properties of the glTF
PBR](https://www.khronos.org/gltf/pbr). No extensions or extension properties
are supported.

## Add a model

The
[`Model3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DElement)
constructor takes a set of `Model3DElementOptions` specifying the `LatLng`
coordinates 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 in `LatLng` coordinates.
- `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 is `1`.
- `altitudeMode`: How the altitude expressed in `position` is interpreted.
- `src`: The URL of the model.

> [!IMPORTANT]
> **Important:** In order for models to render in the scene, you must specify both `position` and `src` options.

> [!NOTE]
> **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.

The following example demonstrates adding a model to the map and modifying it
using some of the available customization options:


```javascript
async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();
```

<br />

## Add an interactive model

Models also support interaction. The following example changes the model's scale
when clicked.


```javascript
async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();
```

<br />