Personaliza los mapas en 3D

Puedes personalizar el aspecto del mapa base en 3D con el diseño de mapas basado en Cloud.

Con el diseño de mapas basado en Cloud, puedes controlar el aspecto del mapa que presentas a los usuarios. Si controlas funciones como la densidad de los lugares de interés (POI), la eliminación de ciertas categorías de POI y la modificación del relleno o el trazo de los componentes, puedes crear una experiencia de mapa adaptada a tus usuarios.

El diseño de mapas basado en Cloud proporciona una experiencia de edición sin código en la consola de Google Cloud. Cada estilo personalizado que crees se asociará con un ID de mapa. Las ediciones que realices en tu estilo en la consola de Maps aparecerán en tu aplicación automáticamente.

En el siguiente ejemplo, se muestra un mapa que usa un estilo personalizado para cambiar a naranja el color de los íconos y el texto de los componentes de recreación:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Descripción general

El proceso para personalizar mapas en 3D con el diseño de mapas basado en Cloud es el mismo que para los mapas en 2D:

1 Cómo crear un ID de mapa Crea un ID de mapa. Los IDs de mapa se pasan a tu aplicación para controlar el diseño. En los pasos siguientes, asociarás un estilo personalizado con este ID de mapa.
2 Crea un diseño de mapas basado en Cloud En este paso, selecciona "Mapa de ruta en 3D" (admite los modos claro y oscuro) o "Híbrido en 3D" (admite el modo claro).
3 Asocia tu diseño de mapa a un mapa Vincula tu diseño al ID de mapa que creaste en el paso uno.
4 Agrega el ID de mapa a tu aplicación Especifica el ID de mapa en tu código con el parámetro map-id.
5 Publica el ID de mapa Ten en cuenta que los cambios que realices en tu estilo personalizado se incorporarán automáticamente en tu aplicación después de la publicación.

Para obtener información detallada sobre cómo crear diseños de mapa, consulta Crea y usa diseños de mapa.

Actualiza el ID de mapa de forma dinámica

Puedes actualizar la propiedad mapId de forma dinámica después de crear una instancia del mapa. Esto te permite aplicar un diseño de mapa basado en Cloud diferente sin tener que volver a crear toda la instancia de Map3DElement.

Para actualizar el ID de mapa, establece la propiedad mapId en la instancia de Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Como la propiedad mapId se refleja en el atributo HTML, también puedes actualizarla de forma dinámica modificando el atributo:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Limitaciones

Existen ciertas limitaciones que debes tener en cuenta cuando usas el diseño de mapas basado en Cloud con mapas en 3D en la API de Maps JavaScript:

  • El modo oscuro solo se admite en el modo ROADMAP (los modos HYBRID y SATELLITE no lo admiten).
  • No se admiten las funciones habilitadas para IDs de mapa, como el diseño basado en datos.