Cómo aplicar diseño a LocalContextMapView

En esta sección, se muestra cómo personalizar el aspecto visual de tus mapas de LocalContextMapView utilizando diseños de mapas personalizados y adaptando la apariencia de los íconos de marcadores de mapa.

Cómo aplicar diseños de mapa personalizados

Puedes modificar el aspecto visual de los mapas de LocalContextMapView si aplicas diseños personalizados. Sin embargo, ten en cuenta que LocalContextMapView incluye diseños predeterminados diferentes de los de un Map estándar.

Para reemplazar por completo los diseños predeterminados de LocalContextMapView por diseños personalizados (styles contiene el array de diseños personalizados), usa este código:

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

Para combinar los diseños predeterminados de LocalContextMapView con los diseños personalizados (styles), usa este código:

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

Cómo personalizar los íconos de marcadores

Para definir el aspecto visual de los íconos de marcadores, personaliza el color del pin, el color del glifo y la escala (tamaño). Haz esto cuando inicialices LocalContextMapView. Puedes establecer estos valores en un objeto estático (los diseños de los íconos no cambian según el estado) o en una función dinámica (los diseños de los íconos cambian cuando un ícono se destaca o se selecciona).

  • Los diseños personalizados se combinan con los diseños predeterminados.
  • Se admiten todas las sintaxis de colores de CSS, incluidos los sistemas RGB, HSL, hexadecimal y las palabras clave de color.
  • La escala es un valor numérico; una escala de 2 es el doble de una escala de 1, y así sucesivamente. De forma predeterminada, un pin tiene diferentes valores de escala establecidos para diferentes estados. La escala es absoluta, por lo que el valor que pases no cambiará el tamaño del pin en relación con el valor predeterminado, sino que lo anulará. Por ejemplo, si configura la escala en 1 para todos los estados, el pin tendrá siempre el mismo tamaño, independientemente del estado.

Cómo establecer la escala y el color de los íconos de marcadores de forma estática

Puedes establecer el color y la escala predeterminados de los íconos y glifos de los marcadores. Para ello, especifica los valores de color para glyphColor y background, y un valor numérico para scale en pinOptionsSetup. En el siguiente ejemplo, se configuran los íconos en negro y los glifos en blanco, y se aumenta la escala a 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Cómo establecer el color y la escala de los íconos de marcadores de forma dinámica

A fin de establecer los colores predeterminados para los íconos y los glifos de los marcadores según el estado (predeterminado, destacado o seleccionado), usa una declaración condicional y establece los valores deseados para cada estado. Cuando el usuario desplaza el mouse sobre un marcador, isHighlighted se convierte en true. Cuando el usuario hace clic en un marcador, isSelected cambia a "true". Cuando se cierra la vista de detalles del lugar, se restablece diseño predeterminado de los iconos de marcadores. En el siguiente ejemplo, se muestra cómo cambiar el diseño de los íconos de marcadores según el estado:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Cómo usar el diseño de mapas basado en Cloud con Contexto local beta

Para usar el diseño de mapas basado en Cloud junto con la versión beta de Contexto local, sigue estos pasos:

  1. Crea un Map con un mapId y pásalo a LocalContextMapView.
  2. Desactiva las etiquetas y los íconos para los lugares de interés genéricos.
  3. Desactiva algunos elementos en las opciones del Map interno. Estos pasos son opcionales.

Crea un Map con un mapId y pásalo a LocalContextMapView.

Para agregar un mapa con un ID de diseño de mapas basado en Cloud, define el elemento map (incluidos el ID y todas las opciones de Map interno) y úsalo para inicializar LocalContextMapView, tal como se muestra en el siguiente ejemplo:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Cómo desactivar las etiquetas y los íconos de los lugares de interés genéricos

Para desactivar las etiquetas y los íconos de los lugares de interés genéricos, sigue estos pasos:

  1. Visita la consola de Google Cloud y selecciona Diseños de mapa para abrir la pantalla correspondiente.
  2. En la configuración de diseño de Lugares de interés, establece la Visibilidad como Desactivada para las Etiquetas y los Íconos.
  3. En la configuración de diseño de Lugares de interés, establece la Visibilidad como Activada para las Etiquetas de parque.

Cómo configurar las opciones del Map interno (opcional)

También puedes configurar las siguientes opciones del Map interno, así como otras opciones del Map interno que hayas establecido, como se muestra aquí:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});