Migrating a Map to LocalContextMapView

To migrate an existing Maps JavaScript API implementation to use Local Context Library, take the following steps:

1. Create a LocalContextMapView instance, and use this instance to access the internal Map.
2. Update your script tag to include the libraries=localContext and v=beta parameters.
3. Remove your old google.maps.Map declaration
4. Merge your custom map styles with the Local Context map styles. If you have not defined any custom map styles, you can skip this step.

The current Maps JavaScript API code may look like this:

const map = new google.maps.Map(
  document.querySelector('#map-container'),
  /* map options */
);

To migrate to the Local Context Library, replace the previous code with the following code:

// Create a new LocalContextMapView instance.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.querySelector('#map-container'),
  placeTypePreferences: ['restaurant', 'cafe'],
  maxPlaceCount: 12,
});

// Access the inner map and set map options.
const map = localContextMapView.map;
map.setOptions(/* map options */);

Update your script tag to include the libraries=localContext and v=beta parameters:

<script src="https://maps.googleapis.com/maps/api/js?
  libraries=localContext&
  v=beta&
  key=YOUR_API_KEY&
  callback=initMap"
  async>
</script>

If you have defined custom styles, you must merge these with the Local Context Library map styles. Learn more.