Adjusting Local Context Search Bounds

You can change the locationRestriction parameter of the LocalContextMapView place search from the default of being strictly bound by the map viewport. In this example, we set the bounds of locationRestriction to be much larger than the map's initial viewport. Try clicking on a place in the place chooser to see the map move to show the selected place.

Understand the code

Specifying Local Context search bounds

Define the locationRestriction strict search bounds with a LatLngBounds property. This example uses the LatLngBoundsLiteral interface to create a LatLngBounds object.

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 },
});

The relationship between the Local Context map viewport and directionsOptions

When a selected point of interest (POI) falls outside the current viewport, the Local Context map view automatically moves to show that POI within visible bounds without requiring any code to manage the map.

If you do not specify an origin point for the directionsOptions property of LocalContextMapView, the map will move to show just the selected POI.

If you do specify directionsOptions with an origin point, the map will show both the origin and the selected POI along with the walking route between the two points.

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 },
});

Try the sample