주거 지역 뷰어

이 예에서는 사용자가 주소를 입력하고 주변 편의시설을 평가할 수 있도록 주소를 위한 Place Autocomplete 검색창을 추가합니다. 주거 지역 사용자의 경우 placeTypePreferences를 일반적으로 가정생활과 관련된 유형으로 설정합니다. 이 샘플의 주소는 미국으로 제한됩니다.

코드 이해

장소 유형의 빈도 조정

로컬 컨텍스트 라이브러리에서 반환할 장소 유형을 지정할 때 weight 속성을 사용하여 각 속성에 상대적 가중치를 할당할 수 있습니다(상대적 가중치가 높은 유형이 더 자주 표시됩니다). 이 예에서는 공원과 학교의 더 높은 빈도를 지정합니다(해당하는 경우).

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 },
],

자바스크립트

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

Place Autocomplete 서비스를 사용하려면 먼저 장소 라이브러리, Maps JavaScript API를 로드해야 합니다. Autocomplete 문서에서는 지역 또는 장소 유형별 예상 검색어 필터링과 같이 장소 자동 완성 동작을 맞춤설정하는 데 사용할 수 있는 모든 매개변수를 자세히 설명합니다.

  1. 프로젝트를 위해 Places API를 사용 설정합니다.
  2. 로컬 컨텍스트 라이브러리 외에 장소 라이브러리, 자바스크립트 API를 로드합니다.

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

  1. Autocomplete 문서코드 샘플에서 웹사이트 또는 지도에 Place Autocomplete 검색창을 추가하는 방법을 알아봅니다. 이 예에서 관련 행은 다음과 같습니다.

TypeScript

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

자바스크립트

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

샘플 사용해 보기