Stay organized with collections
Save and categorize content based on your preferences.
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.
View source code
TypeScript
let map: google.maps.Map;
function initMap() {
const center = { lat: 37.4219998, lng: -122.0840572 };
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 },
});
map = localContextMapView.map!;
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 16,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Local Context Restrictions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
defer
></script>
</body>
</html>
Define the locationRestriction strict search bounds with a
LatLngBounds
property. This example uses the
LatLngBoundsLiteral
interface to create a LatLngBounds object.
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.