Yakında Arama

Platform seçin: Android iOS JavaScript Web Hizmeti
Avrupa Ekonomik Alanı (AEA) geliştiricileri

Yakınlarda Arama (Yeni), bir veya daha fazla yer türü alır ve eşleşen yerlerin listesini döndürür.

Yakınlardaki Arama (Yeni), belirttiğiniz yer türlerine (ör. restaurant, book_store veya bowling_alley) göre bir dizi yerle ilgili bilgileri döndürür. Hizmet, belirtilen locationRestriction yarıçapı içinde belirtilen yer türleriyle eşleşen yerlerin listesiyle yanıt verir.

Yakındaki Arama (Yeni) özelliğini kullanmak için Google Cloud projenizde "Places API (Yeni)"yi etkinleştirmeniz gerekir. Ayrıntılar için Başlangıç başlıklı makaleyi inceleyin.

Yakındaki yerleri bulun

Belirtilen yer türlerine, konuma ve yarıçapa göre yer listesi döndürmek için searchNearby() işlevini çağırın. İsteği kullanarak arama parametrelerini belirtin ve ardından searchNearby() işlevini çağırın. Sonuçlar, Place nesnelerinin listesi olarak döndürülür. Bu listeden yer ayrıntılarını alabilirsiniz. Aşağıdaki snippet'te bir istek ve searchNearby() çağrısı örneği 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);
index.ts

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);
index.js
  • Bir veya daha fazla veri alanı içeren 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 (zorunlu) kullanın.
  • Aranacak bir veya daha fazla yer türü belirtmek için includedPrimaryTypes parametresini kullanın.
  • rankPreference parametresini kullanarak POPULARITY veya DISTANCE türünde bir SearchNearbyRankPreference belirtin.
  • Parametrelerin tam listesini inceleyin.

Örnek

Aşağıdaki örnekte, merkezin 500 metre yarıçapındaki restoranları sorgulamak için searchNearby() kullanılıyor ve sonuçları göstermek için harita işaretçilerle dolduruluyor.

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',
        mapTypeControl: false,
    });
    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();
index.ts

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',
        mapTypeControl: false,
    });
    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();
index.js

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;
}

style.css

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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Örneği deneyin