Personalizar el mapa de contexto local

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En este ejemplo, aplicamos el diseño de mapa personalizado al mapa base. Este mapa muestra Waikiki en Hawái y tiene un diseño con un esquema de colores tropicales. También establecimos el valor de maxPlaceCount en 18 para mostrar más lugares de interés.

Comprende el código

Cómo acceder al mapa base

Se puede acceder al mapa base como la propiedad map de un objeto google.maps.localContext.LocalContextMapView. Este mapa es un objeto google.maps.Map normal y se puede personalizar con todos los parámetros y métodos disponibles para esa clase. Por ejemplo, puedes agregar objetos de escucha de eventos y marcadores personalizados.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

Cómo aplicar diseños personalizados

Dado que un google.maps.localContext.LocalContextMapView.map tiene diseños predeterminados diferentes a los de un Map estándar, puedes anular los valores predeterminados o combinar tu diseño personalizado con las opciones predeterminadas de la Biblioteca de Contexto local. Consulta el artículo Cómo aplicarle diseño al mapa para obtener más detalles.

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

TypeScript

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

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

JavaScript

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

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

Cómo agregar un marcador personalizado

En este ejemplo, se usa un ícono de hotel para distinguir el punto central del marcador de pin rojo predeterminado. Obtén más información sobre las formas de personalizar un marcador mediante la modificación de las propiedades label y icon de un Marker.

De forma predeterminada, estos marcadores aparecerán debajo de los marcadores de lugares de interés de la Biblioteca de Contexto local. Para asegurarte de que los marcadores de la Biblioteca de Contexto local no oculten el marcador personalizado, configura la propiedad zIndex del marcador en un valor más alto que el de maxPlaceCount.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

Prueba la muestra