Personaliza los mapas en 3D

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

Con el diseño de mapas basado en Cloud, tienes control sobre el aspecto del mapa que presentas a los usuarios. Si controlas funciones como la densidad de los lugares de interés (LDI), la eliminación de ciertas categorías de LDI y la modificación del relleno o el trazo de las funciones, 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 asocia con un ID de mapa. Las ediciones que realices en tu estilo en la consola de Maps aparecerán automáticamente en tu aplicación.

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

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 3D con el diseño de mapas basado en Cloud es el mismo que para los mapas 2D:

1 Crea un ID de mapa Crea un ID de mapa. Los IDs de mapa se pasan a tu aplicación para controlar el diseño. Asociarás un estilo personalizado con este ID de mapa en los pasos posteriores.
2 Crea un diseño de mapas basado en Cloud Debes seleccionar "Híbrido 3D" y usar el "modo claro" en este paso.
3 Asocia tu diseño de mapa a un mapa Vincula tu diseño al ID de mapa que creaste en el primer paso
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 en tu estilo personalizado se incorporan automáticamente a tu aplicación después de la publicación.

Para obtener información detallada sobre la creación de diseños de mapas, consulta Cómo crear y usar diseños de mapas.

Actualiza el ID de mapa de forma dinámica

Puedes actualizar la propiedad mapId de forma dinámica después de que se cree una instancia del mapa. Esto te permite aplicar un diseño de mapas basado en Cloud diferente sin necesidad de 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 si modificas 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 3D en Maps JavaScript:

  • No se admite el modo oscuro.
  • No se admiten las funciones habilitadas para el ID de mapa, como el diseño basado en datos.