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, tienes control sobre el aspecto del mapa que les 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 las funciones, puedes crear una experiencia de mapa personalizada para 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. Los cambios que realices en tu diseño en la consola de Maps aparecerán automáticamente en tu aplicación.

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

async function initMap() {
    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',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

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 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 diseño personalizado a este ID de mapa en los pasos posteriores.
2 Crea un diseño de mapas basado en Cloud En este paso, debes seleccionar "Híbrido 3D" y usar 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 del 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 diseño personalizado se incorporan automáticamente a tu aplicación después de la publicación.

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

Limitaciones

Existen ciertas limitaciones que debes tener en cuenta cuando usas el diseño de mapas basado en Cloud con mapas en 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.