Google place API를 사용하여 주변 장소를 검색한다.
Google Cloud Platform
Google API는 Google Cloud Platform에서 제공한다. 이 단계는 어떤 API를 사용하든 동일하다.
- 구글 로그인이 된 상태에서 Google Cloud Platform 콘솔에 들어가면 자동으로 가입 팝업이 뜬다.
- 프로젝트를 생성한다.
- 결제 계좌를 설정한다.
- 사용할 API/SDK를 선택한다.
- 사용할 모든 API를 이 단계에서 선택해줘야 한다.
- API key를 발급받는다.
상세한 설명은 Getting started with Google Maps Platform에 나와있다.
Places API Overview
Places API 공식 문서 Link
Places API는 HTTP 요청을 사용하여 장소에 대한 정보를 반환하는 서비스이다. 장소는 이 API 내에서 시설, 지리적 위치 또는 주요 관심 지점으로 정의된다.
Places API 및 Place Autocomplete 서비스의 할당량 및 가격 정보는 Places API Usage and Billing에 정리되어 있다.
종류
- Place Search 사용자의 위치 또는 검색 문자열을 기반으로 장소 목록을 반환 ✔ (사용할 예정)
- Place Details 사용자 리뷰를 포함하여 특정 장소에 대한 자세한 정보를 반환
- Place Photos Google의 장소 데이터베이스에 저장된 수백만 개의 장소 관련 사진에 대한 액세스를 제공
- Place Autocomplete 사용자가 입력 할 때 장소의 이름 또는 주소를 자동으로 입력합니다.
- Query Autocomplete 텍스트 기반 지역 검색을위한 검색어 예측 서비스를 제공하여 사용자가 입력 할 때 추천 검색어를 반환
각 서비스는 HTTP 요청으로 액세스되며 JSON 또는 XML 응답을 반환한다. 지역 정보 서비스에 대한 모든 요청은 https:// 프로토콜을 사용해야하며 API 키를 포함해야한다.
Places API는 장소 ID를 사용하여 장소를 고유하게 식별한다. Places API 및 기타 API 에서 이 식별자의 형식과 사용에 대한 자세한 내용은 Place ID 문서를 참조하면 된다.
Place Search
Places API - Place Search 문서 Link
Place Search 는 총 세가지의 API가 제공되고 있다.
- Find Place requests
- Nearby Search requests ✔️
- Text Search requests
2번인 주변 검색을 사용할 것이다.
Nearby Search requests
주변 검색을 사용하면 지정된 지역 내의 장소를 검색 할 수 있다. 키워드를 제공하거나 검색하려는 장소 유형을 지정하여 검색 요청을 구체화 할 수 있습니다.
HTTP URL
https://maps.googleapis.com/maps/api/place/nearbysearch/output?parametersoutput
1. json (recommended) 출력을 JSON (JavaScript Object Notation)으로 나타낸다.
2. xml 출력을 XML로 나타낸다.
parameters
주변 검색 요청을 시작하려면 특정 매개 변수가 필요하다. URL의 표준에 따라 모든 매개 변수는 앰퍼샌드(&) 문자를 사용하여 구분된다.
Required parameters
key— 애플리케이션의 API 키. 이 키는 애플리케이션을 식별한다.location— 장소 정보를 검색할 위도/경도.radius— 장소 결과를 반환 할 거리(meters). 허용되는 최대 반경은 50,000 미터입니다.rankby = distance(아래의 선택적 매개 변수에 설명됨)가 지정된 경우에는 이 파라미터(radius)가 포함되지 않아야한다.
Optional parameters
keywordlanguageminpriceandmaxpricenameopennowrankbytypepagetoken
URL example
다음 예는 'cruise'라는 단어가 포함 된 호주 시드니의 한 지점에서 반경 1500m 내에있는 'restaurant'유형의 장소에 대한 검색 요청 URL이다.
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&keyword=cruise&key=<YOUR_API_KEY>Code example (axios)
URL example과 동일한 조건으로 진행하여 URL example의 URL을 입력했을 때와 동일한 결과가 나와야 한다.
1. express-generator 모듈로 디렉토리 구조 형성
npm install express-generator -D
express app
cd app2. dotenv 모듈로 환경 변수 설정
dotenv는 환경 변수를 관리하기 편하게 해주는 모듈이다. 위에서 생성했던 API Key는 절대로 노출되어선 안되기 때문에 .env 파일을 생성하여 보관하고 이 모듈로 사용할 수 있다.
npm install dotenv현재 디렉토리에 .env 파일을 생성하고, 자신의 키를 넣어 아래와 같이 작성한다.
GOOGLE_MAPS_API_KEY=<YOUR_API_KEY>3. axios 모듈 설치
Google API 서버로 요청을 보내기 위해 사용할 모듈을 설치한다.
npm install axios4. 코드 작성
var express = require("express")
var router = express.Router()
const dotenv = require("dotenv")
const axios = require("axios")
dotenv.config()
router.get("/", async (req, res, next) => {
await axios
.get("https://maps.googleapis.com/maps/api/place/nearbysearch/json", {
params: {
location: "-33.8670522,151.1957362",
key: process.env.GOOGLE_MAPS_API_KEY,
radius: 1500,
},
})
.then(function (response) {
res.json(response.data)
})
.catch(function (error) {
res.json(error)
})
})5. 실행
/ 라우터에 코드를 넣어놨기 때문에, 아래 명령어를 이용해 서버를 킨 다음 127.0.0.1:3000로 들어가면 응답이 출력된다.
npm start- 응답의 일부
Code example (google-maps-services-js)
Google Cloud Platform 에서 Server-side 개발을 위해 제공하는 라이브러리이다.
먼저 라이브러리를 설치해준다.
npm install @googlemaps/google-maps-services-js위 예제와 동일한 과정에, 4번의 코드만 아래 코드로 변경해주면 된다.
var express = require("express")
var router = express.Router()
const dotenv = require("dotenv")
const { Client } = require("@googlemaps/google-maps-services-js")
dotenv.config()
router.get("/", async (req, res, next) => {
const client = new Client({})
const params = {
location: { lat: 35, lng: -110 },
radius: 50000,
key: process.env.GOOGLE_MAPS_API_KEY,
}
try {
const r = await client.placesNearby({ params: params })
console.log(r.data.results)
res.json(r.data.results)
} catch (e) {
res.json(e)
}
})
