Models

Select platform: Android iOS JavaScript

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. No extensions or extension properties are supported.

Add a model

The 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: In order for models to render in the scene, you must specify both position and src options.

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 HTTP headers.

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

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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js

Add an interactive model

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

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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js