Yakındaki Arama (Yeni), bir veya daha fazla yer türü alır ve eşleşen yerlerin bir listesini döndürür.
Yakındaki Arama (Yeni), belirttiğiniz yer türlerine (örneğin, restaurant
, book_store
veya bowling_alley
) göre bir dizi yer hakkında bilgi döndürür. Hizmet, belirtilen locationRestriction
yarıçapı dahilinde belirtilen yer türleriyle eşleşen yerlerin bir listesiyle yanıt verir.
Yakındaki Arama (Yeni) özelliğini kullanmak için Google Cloud projenizde "Places API (Yeni)" seçeneğini etkinleştirmeniz gerekir. Ayrıntılar için Başlarken bölümüne bakın.
Yakındaki yerleri bulun
Belirtilen yer türlerine, konuma ve yarıçapa göre yer listesi döndürmek için searchNearby
çağrısı yapın. Bir istek kullanarak arama parametrelerini belirtin, ardından searchNearby
yöntemini çağırın.
Sonuçlar, Place
nesnelerinden oluşan bir liste olarak döndürülür. Buradan yer ayrıntılarını alabilirsiniz.
Aşağıdaki snippet'te bir istek ve searchNearby
çağrısına ait bir örnek gösterilmektedir:
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);
- Bir veya daha fazla veri alanından oluşan virgülle ayrılmış bir liste belirtmek için
fields
parametresini (zorunlu) kullanın. - 50.000 metreye kadar bir yarıçap belirtmek için
locationRestriction
parametresini kullanın (zorunlu). - Aranacak bir veya daha fazla yer türü belirtmek için
includedPrimaryTypes
parametresini kullanın. POPULARITY
veyaDISTANCE
değerine sahip birSearchNearbyRankPreference
belirtmek içinrankPreference
parametresini kullanın.- Parametrelerin tam listesini inceleyin.
Örnek
Aşağıdaki örnekte, merkezin 500 metrelik yarıçapı dahilindeki restoranları sorgulamak için searchNearby
kullanılmıştır ve harita, sonuçları göstermek için işaretçilerle doldurulur.
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> <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>