Diseño de mapas basado en Cloud

Seleccionar plataforma: Android iOS: JavaScript Servicio web

Google Maps Platform ofrece funciones de diseño de mapas basado en Cloud que facilitan el diseño, la personalización y la administración de los mapas a través de la consola de Google Cloud, lo que te permite crear una experiencia de mapas personalizada para tus usuarios sin la necesidad de actualizar el código de tus apps cada vez que realices un cambio de estilo.

Los estilos creados antes del 15 de septiembre de 2020 no mostrarán los elementos naturales mejorados de Google Maps. Debes crear un estilo de mapa para poder utilizar dichos elementos compatibles.

El diseño de mapas basado en Cloud te permite crear y editar estilos de mapa para cualquiera de las apps que usan Google Maps, sin la necesidad de cambiar el código una vez que se haya implementado el ID de mapa. Todos los cambios de diseño se pueden realizar en la consola de Cloud sin necesidad de tener conocimientos de programación. Cambia la apariencia y el color de muchos elementos del mapa, como rutas, edificios, masas de agua, lugares de interés y rutas de transporte público.

Entre estas funciones, se incluyen las siguientes:

  • Diseño de mapas basado en Cloud: En lugar de modificar el diseño de tus mapas mediante el código en formato JSON, puedes administrar y diseñar tus mapas dinámicos o estáticos en la consola de Cloud con los IDs y los diseños de mapa.
  • Mapa de vectores: Los desarrolladores de JavaScript pueden elegir usar el mismo mapa basado en vectores acelerado con WebGL que está disponible en maps.google.com directamente en sus propias aplicaciones web.
  • Filtros para lugares de interés comerciales: Opcionalmente, se pueden quitar cinco categorías de lugares de interés comerciales para que no se muestren en el mapa.
  • Control de densidad de los lugares de interés: Se puede ajustar la densidad de este tipo de lugares en el mapa base para que se muestren en mayor o menor medida de forma predeterminada.

El diseño de mapas basado en Cloud está disponible en SDK de Maps para Android1, SDK de Maps para iOS, JavaScript y API de Maps Static, no todas las funciones serán visibles en todas las plataformas.

Antes de comenzar

Facturación

El diseño de mapas basado en Cloud requiere un ID de mapa. En el caso del SDK de Maps para Android, el SDK de Maps para iOS y JavaScript, el uso de un ID de mapa genera un cargo en función del SKU de Dynamic Maps. En la API de Maps Static, el uso de un ID de mapa genera un cargo en función del SKU de Static Maps.

Ejemplos

Este es un ejemplo básico sobre cómo cargar un mapa con diseño personalizado mediante un ID de mapa. En este caso, el código JavaScript de Maps hace referencia al ID de mapa 8e0a97af9386fef cuando se carga el mapa y aplica automáticamente el diseño de mapa que actualmente está asociado con ese ID.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
Ver ejemplo

Prueba la muestra


  1. El diseño de mapas basado en Cloud no está disponible en el modo lite de Android