Ajusta los límites de búsqueda de Contexto local

Puedes cambiar el parámetro locationRestriction de la búsqueda de lugar LocalContextMapView para que no se limite estrictamente al viewport del mapa de acuerdo con la configuración predeterminada. En este ejemplo, configuramos los límites de locationRestriction para que sean mucho más amplios que el viewport inicial del mapa. Haz clic en un lugar del selector de lugares para ver cómo se desplaza el mapa para mostrar el lugar seleccionado.

Comprende el código

Cómo especificar los límites de búsqueda de Contexto local

Define los límites de búsqueda estrictos de locationRestriction con una propiedad LatLngBounds. En este ejemplo, se usa la interfaz LatLngBoundsLiteral para crear un objeto LatLngBounds.

TypeScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

La relación entre el viewport del mapa de Contexto local y directionsOptions

Cuando un lugar de interés seleccionado se encuentra fuera del viewport actual, la vista del mapa de Contexto local se mueve automáticamente para mostrar ese lugar de interés dentro de los límites visibles sin necesidad de ningún código para administrar el mapa.

Si no especificas un punto de origen para la propiedad directionsOptions de LocalContextMapView, el mapa se moverá para mostrar solo el lugar de interés seleccionado.

Si especificas directionsOptions con un punto de origen, el mapa mostrará el origen y el lugar de interés seleccionado, junto con la ruta a pie entre los dos puntos.

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

Prueba la muestra