구글지도 Places API 장소 유형 업데이트
2025-01-22
구글 지도는 매일 2,000만 건 이상의 전 세계 위치정보 업데이트와 2억 곳 이상의 비즈니스 장소 정보를 제공합니다. 얼마나 많은 데이터를 제공하는지도 중요하지만 가장 중요한 것은 바로 얼마나 정확하게 원하는 결과를 도출해낼 수 있는지가 문제입니다. 기존 Places API (장소 API)는 장소에 대한 세분화가 부족해 특정 장소를 정확히 필터링하기 어렵다는 문제점이 있었습니다. 이로 인해 많은 실무진이 명확한 장소 구분이 필요하다는 피드백이 있었는데요, 최근 구글맵스플랫폼은 Places API 장소 유형을 업데이트하며 실무진의 고충을 해결하였습니다. Places API의 새로운 장소 유형부터 활용 코드 예시까지 낱낱이 파헤쳐 볼 예정이니 포스팅 끝까지 집중해 주세요!
최근 Places API 업데이트로 원하는 결과값을 받을 수 있게 되었습니다.
구글맵스플랫폼 신규 장소 유형
Places API의 장소 유형은 비즈니스, 문화, 교육, 엔터테인먼트 및 여가, 식음료, 정부기관 등 다양한 카테고리의 장소 속성과 용도를 설명합니다. 예를 들어 “mexican_restaurant”이나 “steak_house”와 같은 고유한 유형으로 분류되거나 한 장소에 대해 “restaurnt”, “food”, “point_of_interest”, “establishment” 등 여러 유형 값을 동시에 설정할 수 있습니다.
Places API는 이번 업데이트를 통해 기존과 비교했을 때 무려 2배나 많은 신규 장소 유형을 제공하고 있습니다. 더 많은 장소 유형을 확인하고 싶다면 하단의 링크를 클릭해 주세요!
구글맵스플랫폼 Places API는 19가지의 신규 장소 유형 카테고리를 제공합니다.
신규 장소 유형 업데이트 세부 내용
이번 업데이트로 장소 유형의 종류만 늘어난 것이 아닌 실무자에게 도움이 되는 다양한 기능이 추가 및 변경되었습니다. 어떤 기능이 개발자에게 유용하게 쓰일 수 있을까요?
보다 더 세분화된 장소 검색
기존 Places API에서는 모든 음식점이 “restaurant”로 분류되었으나 이번 업데이트를 통해 “korean_restaurant”, “chinese_restaurant”, “japanese_restaruant”와 같은 세부 장소 유형을 지원합니다. “restaurant”라는 대분류만 지정할 수 있을 뿐 식당의 종류를 구분할 수 있는 필터링 기능이 없었으나 업데이트 후 별도의 데이터 분석 및 사용자 리뷰 등 외부 데이터 작업 없이 카테고리를 분류하거나 호출하는 등 원하는 결과를 얻기 쉬워졌습니다.
필터링 옵션 제공
보다 명확한 결과를 얻을 수 있도록 필터링 옵션이 제공되어 불필요한 데이터 처리를 할 필요가 없어졌습니다. 이전에는 특정 장소 유형 검색 시 관련 없는 데이터도 함께 반환해 데이터 처리에 불필요한 리소스와 시간이 소비되었습니다. 예를 들어, ‘library’ 유형을 검색하면 ‘establishment’ 같은 일반 유형도 반환되어 불필요한 데이터를 정제하는 추가적인 작업이 필요했습니다. 그러나 명확한 필터링 옵션을 사용하면서 필요하지 않은 데이터의 반환을 줄이고 처리 속도를 개선 가능해졌습니다.
복합 유형의 기본값 혼동
기존 장소는 여러 유형 값으로 분류하더라도 기본 유형(primary type)과 부가 유형(secondary type)의 우선순위가 명확하지 않다는 단점이 있었습니다. 예를 들어 커피와 주류를 판매하는 음식점이 동시에 “cafe”, “bar”로 구분할 때 어떤 유형이 우선시 되어야 할지 구분이 어려웠습니다. 업데이트 후 기본 유형과 부가 유형이 명확히 구분되어 응답 처리 효율은 향상시키고 복잡성은 감소시켰습니다.
Places API로 원하는 장소 유형을 지도에 표시하기
업데이트된 장소 유형 기능은 어떻게 활용하면 좋을까요? 원하는 카테고리를 설정하여 설정한 장소만 반환-사용 맞춤형 결과 제공-특정 유형의 장소를 시각화할 수 있습니다. 다음은 구글맵스플랫폼 Places API를 활용하여 SPH(마포구 마포대로 92) 근처 전기 자동차 충전소 위치를 지도에 표시하는 코드입니다. 해당 코드를 구현하기 위해서는 Google Maps Platform의 API 키 설정이 필요하니 구글지도 API 키 발급이 필요한 경우 하단의 포스팅을 참고해 주세요!
> 구글 지도 API 개념부터 활용까지 파헤치기 포스팅 보러가기
> 구글지도 API key 발급하고 무료로 사용하기 포스팅 보러가기
구글지도 Places API를 사용하여 원하는 장소 위치만 표시한 사례, EVLO
1. HTML 기본 구조 생성
웹 페이지에서 지도를 표시하기 위해 HTML 파일을 생성하고 기본 구조를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Charging Stations in Mapo-gu</title>
<!-- Google Maps API 로드 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<style>
/* 지도 표시를 위한 스타일 */
#map {
height: 500px; /* 지도 높이 */
width: 100%; /* 지도 너비 */
}
</style>
</head>
<body>
<h2>마포구 마포대로 92 근처의 Charging Stations</h2>
<!-- 지도 표시 영역 -->
<div id="map"></div>
<script>
// JavaScript 코드는 여기에 작성
</script>
</body>
</html>
2. 지도 초기화 및 중심 좌표 설정
JavaScript를 통해 Google Maps를 초기화하고 중심 좌표를 설정합니다.
function initMap() {
// 마포구 마포대로 92의 좌표
const centerLocation = { lat: 37.5394, lng: 126.9468 };
// 지도 생성
const map = new google.maps.Map(document.getElementById("map"), {
center: centerLocation,
zoom: 15, // 확대 수준
});
}
3. Nearby Search 요청 추가
Nearby Search를 사용하여 주변의 charging_station을 검색하는 코드를 작성합니다.
const request = {
location: centerLocation,
radius: 1000, // 1km 반경
type: "charging_station", // 검색할 장소 유형
};
const service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach((place) => {
createMarker(place, map); // 검색된 장소마다 마커 생성
});
} else {
console.error("검색 실패:", status);
}
});
4. 마커 및 정보창 생성
검색된 장소에 마커를 추가하고, 클릭 시 장소 정보를 표시합니다.
function createMarker(place, map) {
const marker = new google.maps.Marker({
map,
position: place.geometry.location, // 장소 위치
title: place.name, // 마커에 툴팁으로 장소 이름 표시
});
// 정보창 생성
const infoWindow = new google.maps.InfoWindow({
content: `<strong>${place.name}</strong><br>${place.vicinity || "주소 정보 없음"}`,
});
// 마커 클릭 이벤트로 정보창 열기
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
5. 전체 코드 연결
전체 코드를 연결하여 완성된 HTML 파일을 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Charging Stations in Mapo-gu</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h2>마포구 마포대로 92 근처의 Charging Stations</h2>
<div id="map"></div>
<script>
function initMap() {
const centerLocation = { lat: 37.5394, lng: 126.9468 };
const map = new google.maps.Map(document.getElementById("map"), {
center: centerLocation,
zoom: 15,
});
const request = {
location: centerLocation,
radius: 1000,
type: "charging_station",
};
const service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach((place) => {
createMarker(place, map);
});
} else {
console.error("검색 실패:", status);
}
});
}
function createMarker(place, map) {
const marker = new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
});
const infoWindow = new google.maps.InfoWindow({
content: `<strong>${place.name}</strong><br>${place.vicinity || "주소 정보 없음"}`,
});
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
window.onload = initMap;
</script>
</body>
</html>
Places API의 신규 장소 유형은 사용자 맞춤형 결과를 제공하고 필요 없는 데이터와 리소스를 줄여 개발 속도를 향상시킵니다. 정확도와 효율성이 동시에 향상되니 한 단계 더 발전된 위치 기반 서비스를 구현하는데 필수 요소라고 말할 수 있습니다. Google Maps Platform은 단순한 지도 기능만 제공하는 것이 아닌 비즈니스 성장을 도모하는 전략적인 도구입니다. 국내 유일 구글맵스플랫폼 파트너사 SPH가 전문적인 컨설팅부터 기술 지원까지 도와드릴 예정이오니 웹/앱에 지도 기능을 사용하고 싶다면 하단의 링크로 문의주세요! 감사합니다!🙇♀️
SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다
