Yakında Arama

Platform seçin: Android iOS JavaScript Web Hizmeti

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

Yakındakiler araması (yeni), belirttiğiniz yer türlerine (ör. restaurant veya book_store veya bowling_alley) göre bir dizi yer hakkında bilgi döndürür. Hizmet, belirtilen locationRestriction yarıçapı içindeki belirtilen yer türleriyle eşleşen yerlerin listesini döndürür.

Yakındakileri Ara (Yeni) özelliğini kullanmak için Google Cloud projenizde "Places API (Yeni)"yi etkinleştirmeniz gerekir. Ayrıntılar için Başlayın bölümüne bakın.

Yakındaki yerleri bulun

Belirtilen yer türlerine, konuma ve yarıçapa göre bir yer listesi döndürmek için searchNearby() işlevini çağırın. Bir istek kullanarak arama parametrelerini belirtin ve ardından searchNearby() işlevini çağırın. Sonuçlar, yer ayrıntılarını edinebileceğiniz Place nesnelerinin listesi olarak döndürülür. 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ının virgülle ayrılmış listesini 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ünü belirtmek için includedPrimaryTypes parametresini kullanın.
  • POPULARITY veya DISTANCE SearchNearbyRankPreference belirtmek için rankPreference parametresini kullanın.
  • Parametrelerin tam listesini inceleyin.

Örnek

Aşağıdaki örnekte, merkezden 500 metre yarıçapındaki restoranları sorgulamak için searchNearby() kullanılmakta ve sonuçları göstermek üzere bir harita işaretçilerle doldurulmaktadır.

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

Örneği Deneyin