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