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.

View source code

TypeScript

let map: google.maps.Map;

function initMap() {
  // @ts-ignore beta feature not in type declarations
  const center = { lat: 37.4219998, lng: -122.0840572 };
  const bigBounds = {
    north: 37.432,
    south: 37.412,
    west: -122.094,
    east: -122.074,
  };
  // @ts-ignore beta feature not in type declarations
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["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,
  });
}index.ts

JavaScript

let 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: ["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,
  });
}
index.js

CSS

/* 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;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Local Context Restrictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>sample.html

All

<!DOCTYPE html>
<html>
  <head>
    <title>Local Context Restrictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
    <style type="text/css">
      /* 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;
      }
    </style>
    <script>
      let 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: ["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,
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
inline.html

let 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: ["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, }); }

/* 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; }

<!DOCTYPE html> <html> <head> <title>Local Context Restrictions</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=localContext&v=beta" defer ></script>  </head> <body> <div id="map"></div> </body> </html>

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,
};
// @ts-ignore beta feature not in type declarations
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: ["restaurant"],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});index.ts

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: ["restaurant"],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});index.js

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: ["restaurant"],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});index.ts

JavaScript

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

Adjusting Local Context Search Bounds

View source code

TypeScript

JavaScript

CSS

HTML

All

Understand the code

Specifying Local Context search bounds

TypeScript

JavaScript

The relationship between the Local Context map viewport and directionsOptions

TypeScript

JavaScript

Try the sample

The relationship between the Local Context map viewport and `directionsOptions`