텍스트 검색(신규)

플랫폼 선택: Android iOS JavaScript 웹 서비스

텍스트 검색 (신규)은 텍스트 쿼리를 받아 일치하는 장소 목록을 반환합니다.

텍스트 검색(신규)은 문자열(예: '뉴욕의 피자', '오타와 근처의 신발 가게' 또는 '중앙로 123')을 기반으로 일련의 장소에 대한 정보를 반환하는 웹 서비스입니다. 이 서비스는 사전에 설정된 텍스트 문자열 및 특정 위치와 일치하는 장소의 목록을 반환합니다. 텍스트 검색(신규)을 사용하면 유형별로 장소를 검색하고 영업시간 및 평점과 같은 기준으로 필터링하고 검색 결과를 특정 위치로 제한하거나 특정 위치에 집중된 결과를 얻을 수 있습니다.

텍스트 검색 (신규)을 사용하려면 Google Cloud 프로젝트에서 'Places API (신규)'를 사용 설정해야 합니다. 자세한 내용은 시작하기를 참고하세요.

텍스트 쿼리로 장소 찾기

텍스트 쿼리 또는 전화번호에서 장소 목록을 반환하려면 searchByText를 호출합니다. 요청을 사용하여 검색 매개변수를 지정한 다음 searchByText()를 호출하세요. 결과는 Place 객체의 목록으로 반환되며, 이 목록에서 장소 세부정보를 얻을 수 있습니다. 다음 스니펫은 요청 및 searchByText 호출의 예를 보여줍니다.

TypeScript

const request = {
    textQuery: 'Tacos in Mountain View',
    fields: ['displayName', 'location', 'businessStatus'],
    includedType: 'restaurant',
    locationBias: { lat: 37.4161493, lng: -122.0812166 },
    isOpenNow: true,
    language: 'en-US',
    maxResultCount: 8,
    minRating: 3.2,
    region: 'us',
    useStrictTypeFiltering: false,
};

//@ts-ignore
const { places } = await Place.searchByText(request);
index.ts

자바스크립트

const request = {
  textQuery: "Tacos in Mountain View",
  fields: ["displayName", "location", "businessStatus"],
  includedType: "restaurant",
  locationBias: { lat: 37.4161493, lng: -122.0812166 },
  isOpenNow: true,
  language: "en-US",
  maxResultCount: 8,
  minRating: 3.2,
  region: "us",
  useStrictTypeFiltering: false,
};
//@ts-ignore
const { places } = await Place.searchByText(request);

index.js
  • textQuery 매개변수를 사용하여 검색할 텍스트 쿼리 또는 전화번호를 지정합니다.
  • fields 매개변수 (필수)를 사용하여 하나 이상의 데이터 필드가 쉼표로 구분된 목록을 카멜 표기법으로 지정합니다.
  • includedType 매개변수를 사용하여 지정된 유형의 결과만 반환합니다.
  • locationBias 또는 locationRestriction를 사용하여 텍스트 검색 결과를 특정 지역으로 편향되게 하거나 제한합니다.
속성의 전체 목록을 확인합니다.

쿼리에 전화번호가 포함되어 있으면 지역 매개변수를 설정해야 합니다. 예를 들어 전화번호를 사용하여 일본의 장소를 검색하고 요청 도메인이 jp인 경우 region 매개변수를 'jp'로 설정해야 합니다. 요청에서 region이 누락된 경우 API에서 기본적으로 미국 ('us') 지역을 지정합니다.

결과는 Place 객체의 목록으로 반환되며, 이 목록에서 장소 세부정보를 얻을 수 있습니다.

예

다음 예에서는 searchByText를 사용하여 마운틴뷰 인근의 타코 음식점을 쿼리하고 지도를 마커로 채워 결과를 보여줍니다.

TypeScript

let map;
let center;

async function initMap() {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    center = { lat: 37.4161493, lng: -122.0812166 };
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: center,
        zoom: 11,
        mapId: 'DEMO_MAP_ID',
    });

    findPlaces();
}

async function findPlaces() {
    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    const request = {
        textQuery: 'Tacos in Mountain View',
        fields: ['displayName', 'location', 'businessStatus'],
        includedType: 'restaurant',
        locationBias: { lat: 37.4161493, lng: -122.0812166 },
        isOpenNow: true,
        language: 'en-US',
        maxResultCount: 8,
        minRating: 3.2,
        region: 'us',
        useStrictTypeFiltering: false,
    };

    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        console.log(places);

        const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
        const bounds = new LatLngBounds();

        // Loop through and get all the results.
        places.forEach((place) => {
            const markerView = new AdvancedMarkerElement({
                map,
                position: place.location,
                title: place.displayName,
            });

            bounds.extend(place.location as google.maps.LatLng);
            console.log(place);
        });

        map.fitBounds(bounds);

    } else {
        console.log('No results');
    }
}

initMap();
index.ts

JavaScript

let map;
let center;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  center = { lat: 37.4161493, lng: -122.0812166 };
  map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 11,
    mapId: "DEMO_MAP_ID",
  });
  findPlaces();
}

async function findPlaces() {
  const { Place } = await google.maps.importLibrary("places");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const request = {
    textQuery: "Tacos in Mountain View",
    fields: ["displayName", "location", "businessStatus"],
    includedType: "restaurant",
    locationBias: { lat: 37.4161493, lng: -122.0812166 },
    isOpenNow: true,
    language: "en-US",
    maxResultCount: 8,
    minRating: 3.2,
    region: "us",
    useStrictTypeFiltering: false,
  };
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    console.log(places);

    const { LatLngBounds } = await google.maps.importLibrary("core");
    const bounds = new LatLngBounds();

    // Loop through and get all the results.
    places.forEach((place) => {
      const markerView = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
      });

      bounds.extend(place.location);
      console.log(place);
    });
    map.fitBounds(bounds);
  } else {
    console.log("No results");
  }
}

initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Text Search</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

샘플 사용해 보기