Residential Neighborhood Viewer

In this example, we add a Place Autocomplete search bar for addresses to allow the user to enter in an address and evaluate the nearby amenities. For residential users, we set the placeTypePreferences to types commonly associated with home life. Addresses in this sample are restricted to the United States.

Understand the code

Tuning the frequency of place types

When specifying place types for the Local Context Library to return, you can assign a relative weight to each property by using the weight attribute (types with a higher relative weighting will appear more often). This example specifies a higher frequency of parks and schools if available.

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

To use the Place Autocomplete service, you must first load Places Library, Maps JavaScript API. The Autocomplete documentation details all of the parameters available to customize the Place Autocomplete behavior such as filtering predictions by geography or place type.

  1. Enable Places API for your project.
  2. Load the Places Library, JavaScript API in addition to Local Context Library.

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

  1. Follow the Autocomplete documentation and code samples to learn how to add a Place Autocomplete search bar to your website or map. In this example, the relevant lines are:

TypeScript

// Build and add the Autocomplete search bar
const input = <HTMLInputElement>document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.setFields(["address_components", "geometry", "name"]);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.setFields(["address_components", "geometry", "name"]);

Try the sample