Basic LocalContextMapView

Below is the basic Local Context map view with no customizations. We specify the Local Context Library-specific required properties of placeTypePreferences and maxPlaceCount and the basic Map properties of center and zoom.

Understand the code

Local Context map options

Instead of the google.maps.Map class, a Local Context Map is represented by the google.maps.localContext.LocalContextMapView class. The three required parameters of the LocalContextMapView constructor are the element in the document object model (DOM) that will be the container for the map view, the list of place types to include, and a maximum number of place results to display.

TypeScript

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

JavaScript

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

Defining the Local Context map viewport

The default locationRestriction bounds of the place search are defined by the map viewport. The map viewport is established upon the first call to google.maps.localContext.LocalContextMapView.map.setOptions() when the center and zoom level are defined for the map load.

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

Subsequent calls to setOptions() will not refresh the featured places shown by Local Context Library.

Try the sample