Setting Local Context and Map Options

This section covers the options that you can set on a LocalContextMapView instance, and the inner Map contained by the LocalContextMapView. When you create a new LocalContextMapView instance, you specify up to 10 types of places, along with a maximum number of places to return (up to 24). The inner Map supports all of the same MapOptions as a standard Maps JavaScript API Map.

You can update Local Context search properties at any time after the Local Context Library has initialized. Updating any of maxPlaceCount, placeTypePreferences, locationRestriction, or locationBias may automatically trigger a new search.

Specifying place types

You can specify up to 10 types of places that the Local Context Library should return. Specify place types by using the placeTypePreferences property, and passing one or more place types, as shown in the following example:

placeTypePreferences: ['restaurant', 'cafe']

Place type weighting

You can optionally assign a relative weight to each specified type, which causes types with a higher weighting value to appear more often. Weight is an optional, advanced parameter that should only be used as needed. When this parameter is omitted the Local Context Library will determine default weights, which may change and improve over time.

You can assign a relative weight to each property by using the weight attribute. The following example shows weighting the specified place types to return twice as many restaurant and cafe results as for primary_school:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

The results will vary depending on whether a particular place type exists in a particular area. For example, assigning a weight of 10 to shopping_mall will not have an effect if no shopping malls exist in the area.

Setting maximum place count

To set the maximum number of places (up to 24) that the Local Context Library should return, use the maxPlaceCount property, as shown here:

maxPlaceCount: 12

Setting location restriction

Searches are bound to the map viewport by default. You can specify a set of bounds to constrain search results to a larger or smaller area. To do this, set the locationRestriction property of the LocalContextMapView to the desired LatLngBounds. This value can be larger or smaller than the map viewport. See an example.

Enabling directions

To enable directions on your map, set the directionsOptions property of LocalContextMapView, passing a LatLng object literal for the origin point (the end point is determined by the currently selected place). If an origin point is not passed, directions are disabled. The following example shows setting an origin point to enable walking directions on a map:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

The size of the map viewport, as defined by the map bounds and zoom level, directly influences the distances that can be returned from a given origin point. For example, if the viewport is set to display an area 100 miles wide, it's possible for points of interest to appear up to 50 miles from the origin point. To ensure that your app returns walking routes with reasonable distances, you can:

  • Disable walking directions at lower zoom levels (typically below zoom level 16).
  • Define a locationRestriction using a smaller bounds area. This will keep points of interest from surfacing anywhere outside of the restriction area.

Changing the directions origin

You can change the value of the directionsOptions property at any time during the lifecycle of the LocalContextMapView. The following example shows setting a new value for directionsOptions:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

or

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

Setting layout and visibility

You can set the initial layout position and visibility options for the place details view and place chooser, by setting the placeChooserViewSetup and placeDetailsViewSetup properties of LocalContextMapView. You can also hide the place details view programmatically.

Setting the place chooser layout position

You can set the layout position of the place chooser when you initialize the LocalContextMapView. The layout position is relative to the document direction, and will vary depending on whether your app is left-to-right (LTR), or right-to-left (RTL).

There are three layout options for the place chooser:

  • INLINE_START sets the place chooser to display at the START of the content flow (left side of the map for LTR, on the right for RTL).
  • INLINE_END sets the place chooser to display at the END of the content flow (right side of the map for LTR, on the left for RTL).
  • BLOCK_END sets the place chooser to display at the BOTTOM of the page (this is the same for both LTR and RTL).

When you set the place chooser position to INLINE_START or INLINE_END, you must always set the position of the place details view to the same value. You can optionally set the place details view to display in an info window. For BLOCK_END, the place details view layout mode must ALWAYS be set to INFO_WINDOW.

The Local Context Library responsively changes the place chooser position based on the rendered size of the LocalContextMapView. By default, in a larger LocalContextMapView the place chooser appears at the start of the content flow (on the left of the map for LTR, on the right for RTL). In a smaller LocalContextMapView (for example, on a mobile device), the default changes to display the place chooser at the bottom of the map, and displays place details in an info window. Browser zoom level affects the pixel dimensions at which place chooser position shifts between side and bottom (the threshold increases proportionately with zoom level).

We recommend using functional calls to configure the default position of the place chooser. Directly declaring these values will override any responsive layout changes.

Displaying the place chooser at the start of the content flow

To set the place chooser to appear at the start of the content flow (on the left of the map for LTR, on the right for RTL), set the position to INLINE_START for both placeChooserViewSetup and placeDetailsViewSetup, as shown in the following example:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

Displaying the place chooser at the end of the content flow

To set the place chooser to appear at the end of the content flow (on the right for LTR, on the left for RTL), set the position to INLINE_END for both placeChooserViewSetup and placeDetailsViewSetup, as shown in the following example:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

Displaying the place chooser on the bottom

To set the place chooser to display on the bottom of the map, set the position of the placeChooserViewSetup to BLOCK_END, and the layoutMode of placeDetailsViewSetup to INFO_WINDOW, as shown in the following example:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

Hiding the place chooser

The place chooser is visible by default. To hide the place chooser, set the layoutMode to HIDDEN, as shown in the following example:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

The following example shows hiding the place chooser when the default position changes to BLOCK_END:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

Displaying the place details view in an info window

To make the place details view display in an info window, set the layoutMode to INFO_WINDOW, as shown in the following example:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

You can use this setting in combination with any place chooser position (left, right, or bottom).

Hiding the place details view programmatically

You can programmatically hide the place details view, by calling hidePlaceDetailsView() on a LocalContextMapView instance, as shown in the following example:

localContextMapView.hidePlaceDetailsView()

By default, clicking on the map will hide the place details view. You can set the hidesOnMapClick option in placeDetailsViewSetup to false to prevent this default behavior.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

To only hide the place details info window when the map is clicked, you can conditionally control setting the hidesOnMapClick value as shown in the following example:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

Setting inner Map options

Once you have a LocalContextMapView instance, you can set MapOptions on the inner Map instance. The Map contained by a LocalContextMapView supports all of the same map options as a standard Maps JavaScript API map. The following example shows creating a new LocalContextMapView instance, and setting a few options on the inner Map:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}