Cómo configurar Contexto local y las opciones del mapa

En esta sección, se describen las opciones que puedes configurar en una instancia de LocalContextMapView y el Map interno que se incluye en LocalContextMapView. Cuando creas una instancia nueva de LocalContextMapView, especificas hasta 10 tipos de lugares, junto con una cantidad máxima de lugares que se pueden mostrar (hasta 24). El Map interno admite las mismas propiedades de MapOptions que un Map estándar de la API de Maps JavaScript.

Puedes actualizar las propiedades de búsqueda de Contexto local en cualquier momento después de que se haya inicializado la Biblioteca de Contexto local. La actualización de maxPlaceCount, placeTypePreferences, locationRestriction o locationBias puede activar automáticamente una búsqueda nueva.

Cómo especificar los tipos de lugares

Puedes especificar hasta 10 tipos de lugares que la Biblioteca de Contexto local puede mostrar. Usa la propiedad placeTypePreferences para especificar los tipos de lugares y pasa uno o más tipos de lugares, como se muestra en el siguiente ejemplo:

placeTypePreferences: ['restaurant', 'cafe']

Ponderación del tipo de lugar

De forma opcional, puedes asignar un peso relativo a cada tipo especificado; de esta forma, los tipos con un valor de ponderación más alto aparecerán con mayor frecuencia. El peso es un parámetro opcional y avanzado que solo se debe usar cuando sea necesario. Cuando se omite este parámetro, la Biblioteca de Contexto local determinará los pesos predeterminados, que pueden cambiar y mejorar con el tiempo.

Puedes usar el atributo weight para asignar un peso relativo a cada propiedad. En el siguiente ejemplo, se muestra cómo ponderar los tipos de lugares especificados para mostrar el doble de resultados de restaurant y cafe que de primary_school:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

Los resultados variarán en función de la existencia de un tipo de lugar en particular en un área determinada. Por ejemplo, asignar un peso de 10 a shopping_mall no tendrá ningún efecto si no hay centros comerciales en el área.

Cómo establecer la cantidad máxima de lugares

Para establecer la cantidad máxima de lugares (hasta 24) que la Biblioteca de Contexto local puede mostrar, usa la propiedad maxPlaceCount, como se muestra a continuación:

maxPlaceCount: 12

Cómo configurar una restricción de ubicación

Las búsquedas están vinculadas al viewport del mapa de forma predeterminada. Puedes especificar un conjunto de límites para restringir los resultados de la búsqueda a un área más grande o más pequeña. Para ello, establece la propiedad locationRestriction de LocalContextMapView con los valores de LatLngBounds deseados. Este valor puede ser mayor o menor que el viewport del mapa. Aquí puedes consultar un ejemplo.

Habilita las instrucciones sobre cómo llegar

Si deseas habilitar las instrucciones sobre cómo llegar en tu mapa, configura la propiedad directionsOptions de LocalContextMapView. Para ello, pasa un literal del objeto LatLng para el punto de origen (el destino está determinado por el lugar seleccionado actualmente). Si no se pasa un punto de origen, se inhabilitarán las instrucciones sobre cómo llegar. En el siguiente ejemplo, se muestra cómo configurar un punto de origen para habilitar las instrucciones sobre cómo llegar a pie en un mapa:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

El tamaño del viewport del mapa, según lo definido por los límites del mapa y el nivel de zoom, influye directamente en las distancias que se pueden mostrar a partir de un determinado punto de origen. Por ejemplo, si el viewport está configurado para mostrar un área de 160 km de ancho, es posible que los lugares de interés aparezcan en un radio de hasta 80 km desde el punto de origen. Para asegurarte de que tu app muestre rutas a pie con distancias razonables, puedes hacer lo siguiente:

  • Inhabilita las instrucciones sobre cómo llegar a pie en niveles de zoom más bajos (por lo general, inferiores al nivel de zoom 16).
  • Define una locationRestriction con un área de límites más restringidos. Esto evitará que se muestren lugares de interés fuera de esa área.

Cambia el origen de las instrucciones sobre cómo llegar

Puedes cambiar el valor de la propiedad directionsOptions en cualquier momento durante el ciclo de vida de LocalContextMapView. En el siguiente ejemplo, se muestra cómo configurar un valor nuevo para directionsOptions:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

o

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

Cómo configurar el diseño y la visibilidad

Si deseas configurar la posición inicial del diseño y las opciones de visibilidad de la vista de detalles del lugar y el selector de lugares, establece las propiedades placeChooserViewSetup y placeDetailsViewSetup de LocalContextMapView. También puedes ocultar la vista de detalles del lugar de manera programática.

Cómo configurar la posición de diseño del selector de lugares

Puedes configurar la posición de diseño del selector de lugares al inicializar LocalContextMapView. La posición de diseño es relativa a la dirección del documento y variará según tu app se lea de izquierda a derecha (LTR) o de derecha a izquierda (RTL).

Hay tres opciones de diseño para el selector de lugares:

  • INLINE_START establece que el selector de lugares se mostrará al COMIENZO del flujo de contenido (lado izquierdo del mapa para LTR, lado derecho para RTL).
  • INLINE_END establece que el selector de lugares se mostrará al FINAL del flujo de contenido (lado derecho del mapa para LTR, lado izquierdo para RTL).
  • BLOCK_END establece que el selector de lugares se mostrará en la parte INFERIOR de la página (tanto para LTR como para RTL).

Cuando configuras la posición del selector de lugares en INLINE_START o INLINE_END, siempre debes establecer el mismo valor para la posición de la vista de detalles del lugar. De forma opcional, puedes configurar la vista de detalles del lugar para que se muestre en una ventana de información. Para BLOCK_END, el modo de diseño de la vista de detalles del lugar SIEMPRE se debe establecer en INFO_WINDOW.

La Biblioteca de Contexto local cambia de forma responsiva la posición del selector de lugares según el tamaño renderizado de LocalContextMapView. De forma predeterminada, en una LocalContextMapView más grande, el selector de lugares aparece al comienzo del flujo de contenido (en el lado izquierdo del mapa para LTR, en el lado derecho para RTL). En una LocalContextMapView más pequeña (por ejemplo, en un dispositivo móvil), el valor predeterminado cambia para mostrar el selector de lugares en la parte inferior del mapa y muestra los detalles del lugar en una ventana de información. El nivel de zoom del navegador afecta las dimensiones en píxeles en las que la posición del selector de lugares cambia entre los costados y la parte inferior (el umbral aumenta proporcionalmente con el nivel de zoom).

Te recomendamos que uses llamadas a funciones para configurar la posición predeterminada del selector de lugares. La declaración directa de estos valores anulará cualquier cambio de diseño responsivo.

Cómo mostrar el selector de lugares al comienzo del flujo de contenido

Si deseas que el selector de lugares aparezca al comienzo del flujo de contenido (en el lado izquierdo del mapa para LTR, en el lado derecho para RTL), establece la position en INLINE_START para placeChooserViewSetup y placeDetailsViewSetup, como se muestra en el siguiente ejemplo:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

Cómo mostrar el selector de lugares al final del flujo de contenido

Si deseas que el selector de lugares aparezca al final del flujo de contenido (en el lado derecho para LTR, en el lado izquierdo para RTL), establece la position en INLINE_END para placeChooserViewSetup yplaceDetailsViewSetup, como se muestra en el siguiente ejemplo:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

Cómo mostrar el selector de lugares en la parte inferior

Si deseas que el selector de lugares aparezca en la parte inferior del mapa, establece la position de placeChooserViewSetup en BLOCK_END y el layoutMode de placeDetailsViewSetup en INFO_WINDOW, como se muestra en el siguiente ejemplo:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

Cómo ocultar el selector de lugares

El selector de lugares está visible de forma predeterminada. Para ocultarlo, establece el layoutMode en HIDDEN, como se muestra en el siguiente ejemplo:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

En el siguiente ejemplo, se muestra cómo ocultar el selector de lugares cuando la posición predeterminada cambia a BLOCK_END:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

Cómo mostrar la vista de detalles del lugar en una ventana de información

Para que la vista de detalles del lugar se muestre en una ventana de información, establece el layoutMode en INFO_WINDOW, como se muestra en el siguiente ejemplo:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Puedes combinar esta configuración con cualquier posición del selector de lugares (izquierda, derecha o inferior).

Cómo ocultar la vista de detalles del lugar de manera programática

Puedes ocultar de manera programática la vista de detalles del lugar si llamas a hidePlaceDetailsView() en una instancia de LocalContextMapView, como se muestra en el siguiente ejemplo:

localContextMapView.hidePlaceDetailsView()

De forma predeterminada, cuando un usuario hace clic en el mapa, se oculta la vista de detalles del lugar. Puedes establecer la opción hidesOnMapClick de placeDetailsViewSetup en false para evitar este comportamiento predeterminado.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

Para ocultar solo la ventana de información de detalles del lugar cuando se hace clic en el mapa, puedes controlar de forma condicional la configuración del valor hidesOnMapClick, como se muestra en el siguiente ejemplo:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

Cómo configurar las opciones de un Map interno

Una vez que tengas una instancia de LocalContextMapView, puedes establecer propiedades de MapOptions en la instancia de Map interno. El Map que se incluye en una LocalContextMapView admite las mismas opciones que un mapa estándar de la API de Maps JavaScript. En el siguiente ejemplo, se muestra cómo crear una instancia nueva de LocalContextMapView y cómo configurar algunas opciones en el Map interno:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}