חיפוש בקרבת מקום

בחירת פלטפורמה: Android iOS JavaScript Web Service
מפתחים באזור הכלכלי האירופי (EEA)

התכונה 'חיפוש בסביבה' (חדשה) מקבלת סוג אחד או יותר של מקומות ומחזירה רשימה של מקומות תואמים.

החיפוש בקרבת מקום (חדש) מחזיר מידע על קבוצה של מקומות על סמך סוגי המקומות שאתם מציינים – למשל restaurant או book_store או bowling_alley. השירות משיב עם רשימה של מקומות שתואמים לסוגי המקומות שצוינו ברדיוס של locationRestriction שצוין.

כדי להשתמש בחיפוש בסביבה (חדש), צריך להפעיל את Places API (חדש) בפרויקט ב-Google Cloud. פרטים נוספים מופיעים במאמר תחילת העבודה.

חיפוש מקומות בקרבת מקום

מתקשרים אל 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);
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
  • משתמשים בפרמטר fields (חובה) כדי לציין רשימה של שדות נתונים אחד או יותר, מופרדים בפסיקים.
  • משתמשים בפרמטר locationRestriction (נדרש) כדי לציין רדיוס של עד 50,000 מטרים.
  • משתמשים בפרמטר includedPrimaryTypes כדי לציין סוגי מקומות אחד או יותר לחיפוש.
  • משתמשים בפרמטר rankPreference כדי לציין SearchNearbyRankPreference אחד מהערכים POPULARITY או DISTANCE.
  • רשימת הפרמטרים המלאה

דוגמה

בדוגמה הבאה נעשה שימוש ב-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',
        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

לניסיון