Maps JavaScript API에서 Geocoding API 또는 Places API를 사용하여 지역을 검색하고 지역 조회 서비스에서 반환한 장소에 대한 추가 정보를 가져올 수 있습니다. Geocoding API 및 Places API는 장소 ID를 가져오기 위한 강력하고 안정적인 대안입니다. 이미 장소 ID를 사용하고 있으면 데이터 기반 스타일 지정과 함께 ID를 쉽게 재사용할 수 있습니다.
다음과 같은 방법으로 Geocoding API 및 Places API를 Maps JavaScript API 앱에 추가합니다.
- 지오코딩 서비스 및 지오코더 클래스는 사용자 입력을 받아 동적으로 지오코딩 및 역 지오코딩할 수 있습니다.
- Geocoding API를 사용하면 알려진 정적 주소를 지오코딩할 수 있습니다.
- Maps JavaScript API의 장소 라이브러리를 사용하면 앱에서 장소를 검색할 수 있으며, 여기에는 자동 완성 위젯이 포함됩니다.
- Places API는 HTTP 요청을 사용하여 장소에 대한 정보를 반환합니다.
Geocoding API 사용
Geocoding API를 사용하면 주소를 지리 좌표로 변환하거나 반대로 변환할 수 있습니다. 다음은 데이터 기반 스타일 지정과 잘 어울리는 예입니다.
- 지오코딩을 사용하여 지역의 표시 영역을 가져옵니다.
- 지오코딩 호출에 구성요소 필터링을 적용하여 행정 구역 1~4, 지역 또는 우편번호에 대한 장소 ID를 가져옵니다.
- 역 지오코딩을 사용하여 위도/경도 좌표로 장소 ID를 찾거나 특정 위치의 모든 구성요소에 대한 장소 ID를 반환합니다.
지역의 표시 영역 가져오기
지오코딩 서비스는 장소 ID를 가져와 표시 영역을 반환할 수 있습니다. 표시 영역은 map.fitBounds()
함수에 전달하여 지도의 경계 다각형으로 확대/축소할 수 있습니다. 다음 예는 지오코딩 서비스를 사용하여 표시 영역을 가져온 다음 map.fitBounds()
를 호출하는 방법을 보여줍니다.
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
geocoder
.geocode({ placeId: placeid })
.then(({ results }) => {
map.fitBounds(results[0].geometry.viewport, 155);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
역 지오코딩 사용
역 지오코딩은 장소 ID를 찾는 데 사용할 수 있습니다. 다음 지오코딩 서비스 함수는 지정된 위도/경도 좌표에 있는 모든 주소 구성요소의 장소 ID를 반환합니다.
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
// Call Geocoding API.
function getPlaceIds(latLng) {
geocoder
.geocode({ latLng })
.then(({ results }) => {
console.log('Geocoding result:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
})
.catch((e) => {
console.log('Geocoder failed due to: ' + e)
});
}
다음은 이와 동등한 역 지오코딩 웹 서비스 호출입니다.
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
역 지오코딩을 구성요소 필터링과 함께 사용하여 지정된 위치에서 다음 유형 중 하나 이상의 주소 구성요소를 가져오는 방법은 다음과 같습니다.
administrativeArea
country
locality
postalCode
다음 함수 예는 지오코딩 서비스를 사용하여 locality
유형의 경우에만 지정된 위치의 모든 주소 구성요소를 가져오는 역 지오코딩의 구성요소 제한을 추가하는 방법을 보여줍니다.
// Set up the geocoder.
geocoder = new google.maps.Geocoder();
...
function getPlaceIdWithRestrictions(latLng) {
geocoder
.geocode({ latLng,
componentRestrictions: {
country: "US",
locality: "chicago",
},
})
.then(({ results }) => {
console.log('Geocoding result with restriction:');
console.log(results[0]);
console.log(results[0].place_id);
console.log(results[0].address_components);
console.log(results[0].address_components[1].types[0]);
console.log(results[0].address_components[1].long_name);
})
.catch((e) => {
console.log('getPlaceId Geocoder failed due to: ' + e)
});
}
다음은 이와 동등한 역 지오코딩 웹 서비스 호출입니다.
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
Place Autocomplete를 사용하여 지역 찾기
Place Autocomplete 위젯은 사용자가 지역을 검색할 수 있는 편리한 방법을 제공합니다. 지역만 반환하도록 Place Autocomplete 위젯을 구성하려면 다음 스니펫과 같이 types
를 (regions)
로 설정하세요.
// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
fields: ["place_id", "type"],
strictBounds: false,
types: ["(regions)"],
};
지역의 장소 세부정보 가져오기
지역의 장소 세부정보 데이터는 매우 유용할 수 있습니다. 예를 들어 다음과 같은 작업을 처리할 수 있습니다.
- 장소 이름을 기반으로 경계 장소 ID 검색
- 경계를 확대/축소하기 위해 표시 영역 가져오기
- 경계의 지형지물 유형(예:
locality
) 가져오기 - 미국 내 지역의 '장소 이름, 주, 국가' 형식으로 지정된 주소 가져오기(예: 'Ottumwa, IA, USA')
- 사진 등 기타 유용한 데이터 가져오기
다음 예는 장소 서비스를 사용하여 쿼리 요청으로 워싱턴주의 장소를 찾고 장소 ID를 가져오는 방법을 보여줍니다.
const request = {
query: 'Washington',
fields: ['place_id'],
};
function findPlaceId() {
placesService
.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
다음은 이와 동등한 장소 찾기 웹 서비스 호출입니다.
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=place_id&input=Washington&inputtype=textquery&key=YOUR_API_KEY
다음 예에서는 장소 서비스 장소 세부정보를 요청하여 place.geometry.viewport
를 가져온 다음 map.fitBounds()
를 호출하여 선택된 경계 다각형의 중심에 지도를 배치합니다.
const request = {
placeId: placeid,
fields: [
"name",
"formatted_address",
"geometry",
"photos",
"type",
],
};
placesService.getDetails(request, (place, status) => {
if (
status === google.maps.places.PlacesServiceStatus.OK &&
place &&
place.geometry &&
place.geometry.location
) {
// Zoom to the boundary polygon.
let viewport = place.geometry.viewport;
map.fitBounds(viewport, 155);
// Print some place details to the console.
const types = place.types;
console.log("Feature type: " + types[0]);
console.log("Formatted address: " + formatted_address);
}
}
});