주변 지역 검색(신규)은 하나 이상의 장소 유형을 취하여 일치하는 장소의 목록을 반환합니다.
주변 지역 검색(신규)은 지정한 장소 유형(예: restaurant, book_store, bowling_alley)을 기반으로 일련의 장소에 대한 정보를 반환합니다. 이 서비스는 지정된 locationRestriction의 반경 내에서 지정된 장소 유형과 일치하는 장소의 목록을 반환합니다.
주변 지역 검색(신규)을 사용하려면 Google Cloud 프로젝트에서 'Places API(신규)'를 사용 설정해야 합니다. 자세한 내용은 시작하기를 참고하세요.
주변 장소 찾기
지정된 장소 유형, 위치, 반경을 기반으로 장소 목록을 반환하려면 searchNearby를 호출합니다. 요청을 사용하여 검색 매개변수를 지정한 다음 searchNearby를 호출하세요.
결과는 Place 객체의 목록으로 반환되며, 이 목록에서 장소 세부정보를 얻을 수 있습니다.
다음 스니펫은 요청 및 searchNearby 호출의 예를 보여줍니다.
TypeScript
// Restrict within the map viewport.
let center = new google.maps.LatLng(52.369358, 4.889258);
const request = {
// required parameters
fields: ['displayName', 'location', 'businessStatus'],
locationRestriction: {
center: center,
radius: 500,
},
// optional parameters
includedPrimaryTypes: ['restaurant'],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
language: 'en-US',
region: 'us',
};
//@ts-ignore
const { places } = await Place.searchNearby(request);
JavaScript
// Restrict within the map viewport.
let center = new google.maps.LatLng(52.369358, 4.889258);
const request = {
// required parameters
fields: ["displayName", "location", "businessStatus"],
locationRestriction: {
center: center,
radius: 500,
},
// optional parameters
includedPrimaryTypes: ["restaurant"],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
language: "en-US",
region: "us",
};
//@ts-ignore
const { places } = await Place.searchNearby(request);
fields매개변수(필수)를 사용하여 하나 이상의 데이터 필드가 쉼표로 구분된 목록을 지정합니다.locationRestriction매개변수(필수)를 사용하여 최대 50,000미터의 반경을 지정합니다.includedPrimaryTypes매개변수를 사용하여 검색할 하나 이상의 장소 유형을 지정합니다.rankPreference매개변수를 사용하여POPULARITY또는DISTANCE의SearchNearbyRankPreference를 지정합니다.- 매개변수의 전체 목록을 확인합니다.
예
다음 예에서는 searchNearby를 사용하여 중심으로부터 500미터 반경 이내의 음식점을 쿼리하고 지도를 마커로 채워 결과를 보여줍니다.
TypeScript
let map;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
let center = new google.maps.LatLng(52.369358, 4.889258);
map = new Map(document.getElementById('map') as HTMLElement, {
center: center,
zoom: 11,
mapId: 'DEMO_MAP_ID',
});
nearbySearch();
}
async function nearbySearch() {
//@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// Restrict within the map viewport.
let center = new google.maps.LatLng(52.369358, 4.889258);
const request = {
// required parameters
fields: ['displayName', 'location', 'businessStatus'],
locationRestriction: {
center: center,
radius: 500,
},
// optional parameters
includedPrimaryTypes: ['restaurant'],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
language: 'en-US',
region: 'us',
};
//@ts-ignore
const { places } = await Place.searchNearby(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();
JavaScript
let map;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
let center = new google.maps.LatLng(52.369358, 4.889258);
map = new Map(document.getElementById("map"), {
center: center,
zoom: 11,
mapId: "DEMO_MAP_ID",
});
nearbySearch();
}
async function nearbySearch() {
//@ts-ignore
const { Place, SearchNearbyRankPreference } = await google.maps.importLibrary(
"places",
);
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// Restrict within the map viewport.
let center = new google.maps.LatLng(52.369358, 4.889258);
const request = {
// required parameters
fields: ["displayName", "location", "businessStatus"],
locationRestriction: {
center: center,
radius: 500,
},
// optional parameters
includedPrimaryTypes: ["restaurant"],
maxResultCount: 5,
rankPreference: SearchNearbyRankPreference.POPULARITY,
language: "en-US",
region: "us",
};
//@ts-ignore
const { places } = await Place.searchNearby(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();
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;
}
HTML
<html>
<head>
<title>Nearby Search</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<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: "beta"});</script>
</body>
</html>