आस-पास की जगहों की जानकारी

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript वेब सेवा

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

अगर आपका बिलिंग पता यूरोपियन इकनॉमिक एरिया में है, तो 8 जुलाई 2025 से, सेवाओं के आपके इस्तेमाल पर Google Maps Platform की ईईए से जुड़ी सेवा की शर्तें लागू होंगी. यह सुविधा, देश/इलाके के हिसाब से अलग-अलग हो सकती है. ज़्यादा जानें.

आस-पास की जगहों की जानकारी (नया वर्शन) की सुविधा, एक या उससे ज़्यादा तरह की जगहों की जानकारी लेती है. इसके बाद, वह मेल खाने वाली जगहों की सूची दिखाती है. इस उदाहरण में, जगह का टाइप चुना जा सकता है और मैप पर नतीजे देखे जा सकते हैं. जगहों के बारे में ज़्यादा जानकारी देखने के लिए, मार्कर पर क्लिक करें.

आस-पास की जगहों की जानकारी (नया) सेवा, आपकी चुनी गई जगहों के टाइप के आधार पर, जगहों के सेट की जानकारी दिखाती है. उदाहरण के लिए, restaurant या book_store या bowling_alley. यह सेवा, तय किए गए locationRestriction के दायरे में, जगह के टाइप से मैच होने वाली जगहों की सूची दिखाती है.

आस-पास की जगहों की जानकारी (नया वर्शन) का इस्तेमाल करने के लिए, आपको अपने Google क्लाउड प्रोजेक्ट में "Places API (नया वर्शन)" चालू करना होगा. ज़्यादा जानकारी के लिए, शुरू करें लेख पढ़ें.

आस-पास की जगहें खोजें

searchNearby() को कॉल करें, ताकि जगह के टाइप, जगह की जानकारी, और दायरे के आधार पर जगहों की सूची मिल सके. अनुरोध का इस्तेमाल करके, खोज के पैरामीटर तय करें. इसके बाद, searchNearby() को कॉल करें. नतीजे, Place ऑब्जेक्ट की सूची के तौर पर दिखाए जाते हैं. इनसे आपको जगह की जानकारी मिल सकती है. यहां दिए गए स्निपेट में, searchNearby() को किए गए अनुरोध और कॉल का उदाहरण दिया गया है:

TypeScript

// Get bounds and radius to constrain search.
center = mapElement.center!;
const ne = innerMap.getBounds()!.getNorthEast();
const sw = innerMap.getBounds()!.getSouthWest();
const diameter = spherical.computeDistanceBetween(ne, sw);
const radius = Math.min(diameter / 2, 50000); // Radius cannot be more than 50000.

const request = {
    // required parameters
    fields: [
        'displayName',
        'location',
        'formattedAddress',
        'googleMapsURI',
    ],
    locationRestriction: {
        center,
        radius,
    },
    // optional parameters
    includedPrimaryTypes: [typeSelect.value],
    maxResultCount: 5,
    rankPreference: SearchNearbyRankPreference.POPULARITY,
};

const { places } = await Place.searchNearby(request);
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में जानने के लिए, गाइड पढ़ें.

JavaScript

// Get bounds and radius to constrain search.
center = mapElement.center;
const ne = innerMap.getBounds().getNorthEast();
const sw = innerMap.getBounds().getSouthWest();
const diameter = spherical.computeDistanceBetween(ne, sw);
const radius = Math.min(diameter / 2, 50000); // Radius cannot be more than 50000.

const request = {
    // required parameters
    fields: [
        'displayName',
        'location',
        'formattedAddress',
        'googleMapsURI',
    ],
    locationRestriction: {
        center,
        radius,
    },
    // optional parameters
    includedPrimaryTypes: [typeSelect.value],
    maxResultCount: 5,
    rankPreference: SearchNearbyRankPreference.POPULARITY,
};

const { places } = await Place.searchNearby(request);
index.js

• एक या इससे ज़्यादा डेटा फ़ील्ड की कॉमा लगाकर अलग की गई लिस्ट तय करने के लिए, fields पैरामीटर (ज़रूरी है) का इस्तेमाल करें. अनुरोध की कीमत, अनुरोध किए गए फ़ील्ड के हिसाब से तय होती है. डेटा फ़ील्ड चुनना देखें.
• locationRestriction पैरामीटर (ज़रूरी है) का इस्तेमाल करके, 50,000 मीटर तक की त्रिज्या तय करें.
• includedPrimaryTypes पैरामीटर का इस्तेमाल करके, एक या उससे ज़्यादा जगहों के टाइप तय करें.
• rankPreference पैरामीटर का इस्तेमाल करके, POPULARITY या DISTANCE में से किसी एक का SearchNearbyRankPreference बताएं.
• पैरामीटर की पूरी सूची देखें.

उदाहरण

यहां दिए गए उदाहरण में, मैप के दायरे में चुनी गई जगह के टाइप के बारे में क्वेरी करने के लिए, searchNearby() का इस्तेमाल किया गया है. साथ ही, नतीजे दिखाने के लिए, मैप में मार्कर जोड़े गए हैं.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let center: google.maps.LatLngLiteral | google.maps.LatLng;
let typeSelect: HTMLSelectElement;
let infoWindow: google.maps.InfoWindow;

async function init() {
    const [{ InfoWindow }, { event }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    typeSelect = document.querySelector('.type-select')!;

    typeSelect.addEventListener('change', () => {
        void nearbySearch();
    });

    infoWindow = new InfoWindow();

    // Kick off an initial search once map has loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void nearbySearch();
    });
}

async function nearbySearch() {
    const [
        { Place, SearchNearbyRankPreference },
        { AdvancedMarkerElement },
        { spherical },
    ] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('geometry'),
    ]);
    // Get bounds and radius to constrain search.
    center = mapElement.center!;
    const ne = innerMap.getBounds()!.getNorthEast();
    const sw = innerMap.getBounds()!.getSouthWest();
    const diameter = spherical.computeDistanceBetween(ne, sw);
    const radius = Math.min(diameter / 2, 50000); // Radius cannot be more than 50000.

    const request = {
        // required parameters
        fields: [
            'displayName',
            'location',
            'formattedAddress',
            'googleMapsURI',
        ],
        locationRestriction: {
            center,
            radius,
        },
        // optional parameters
        includedPrimaryTypes: [typeSelect.value],
        maxResultCount: 5,
        rankPreference: SearchNearbyRankPreference.POPULARITY,
    };

    const { places } = await Place.searchNearby(request);

    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary('core');
        const bounds = new LatLngBounds();

        // First remove all existing markers.
        for (const marker of mapElement.querySelectorAll('gmp-advanced-marker'))
            marker.remove();

        // Loop through and get all the results.
        places.forEach((place) => {
            if (!place.location) return;
            bounds.extend(place.location);

            const marker = new AdvancedMarkerElement({
                map: innerMap,
                position: place.location,
                title: place.displayName,
                gmpClickable: true,
            });

            // Build the content of the InfoWindow safely using DOM elements.
            const content = document.createElement('div');
            const address = document.createElement('div');
            address.textContent = place.formattedAddress || '';
            const placeId = document.createElement('div');
            placeId.textContent = place.id;
            content.append(address, placeId);

            if (place.googleMapsURI) {
                const link = document.createElement('a');
                link.href = place.googleMapsURI;
                link.target = '_blank';
                link.textContent = 'View Details on Google Maps';
                content.appendChild(link);
            }

            marker.addEventListener('gmp-click', () => {
                innerMap.panTo(place.location!);
                updateInfoWindow(place.displayName!, content, marker);
            });
        });

        innerMap.fitBounds(bounds, 100);
    } else {
        console.log('No results');
    }
}

function updateInfoWindow(
    title: string | Element | null,
    content: string | Element | null,
    anchor: google.maps.marker.AdvancedMarkerElement
) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        anchor,
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let center;
let typeSelect;
let infoWindow;

async function init() {
    const [{ InfoWindow }, { event }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    typeSelect = document.querySelector('.type-select');

    typeSelect.addEventListener('change', () => {
        void nearbySearch();
    });

    infoWindow = new InfoWindow();

    // Kick off an initial search once map has loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void nearbySearch();
    });
}

async function nearbySearch() {
    const [
        { Place, SearchNearbyRankPreference },
        { AdvancedMarkerElement },
        { spherical },
    ] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('geometry'),
    ]);
    // Get bounds and radius to constrain search.
    center = mapElement.center;
    const ne = innerMap.getBounds().getNorthEast();
    const sw = innerMap.getBounds().getSouthWest();
    const diameter = spherical.computeDistanceBetween(ne, sw);
    const radius = Math.min(diameter / 2, 50000); // Radius cannot be more than 50000.

    const request = {
        // required parameters
        fields: [
            'displayName',
            'location',
            'formattedAddress',
            'googleMapsURI',
        ],
        locationRestriction: {
            center,
            radius,
        },
        // optional parameters
        includedPrimaryTypes: [typeSelect.value],
        maxResultCount: 5,
        rankPreference: SearchNearbyRankPreference.POPULARITY,
    };

    const { places } = await Place.searchNearby(request);

    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary('core');
        const bounds = new LatLngBounds();

        // First remove all existing markers.
        for (const marker of mapElement.querySelectorAll('gmp-advanced-marker'))
            marker.remove();

        // Loop through and get all the results.
        places.forEach((place) => {
            if (!place.location) return;
            bounds.extend(place.location);

            const marker = new AdvancedMarkerElement({
                map: innerMap,
                position: place.location,
                title: place.displayName,
                gmpClickable: true,
            });

            // Build the content of the InfoWindow safely using DOM elements.
            const content = document.createElement('div');
            const address = document.createElement('div');
            address.textContent = place.formattedAddress || '';
            const placeId = document.createElement('div');
            placeId.textContent = place.id;
            content.append(address, placeId);

            if (place.googleMapsURI) {
                const link = document.createElement('a');
                link.href = place.googleMapsURI;
                link.target = '_blank';
                link.textContent = 'View Details on Google Maps';
                content.appendChild(link);
            }

            marker.addEventListener('gmp-click', () => {
                innerMap.panTo(place.location);
                updateInfoWindow(place.displayName, content, marker);
            });
        });

        innerMap.fitBounds(bounds, 100);
    } else {
        console.log('No results');
    }
}

function updateInfoWindow(title, content, anchor) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        anchor,
    });
}

void init();
index.js

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

#map-container {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.type-select {
    width: 400px;
    height: 32px;
    border: 1px solid #000;
    border-radius: 10px;
    flex-grow: 1;
    padding: 0 10px;
    margin-left: 10px;
    margin-top: 10px;
}
style.css

एचटीएमएल

<html>
    <head>
        <title>Nearby Search</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY" 
            });
        </script>
    </head>

    <body>
        <gmp-map center="45.438646,12.327573" zoom="14" map-id="DEMO_MAP_ID"
            ><!-- Map id is required for Advanced Markers. -->
            <gmp-advanced-marker></gmp-advanced-marker>
            <div id="controls" slot="control-inline-start-block-start">
                <select name="types" class="type-select">
                    <option value="cafe" selected>Cafe</option>
                    <option value="restaurant">Restaurant</option>
                    <option value="museum">Museum</option>
                    <option value="monument">Monument</option>
                    <option value="park">Park</option>
                </select>
            </div>
        </gmp-map>
    </body>
</html>
index.html

डेटा फ़ील्ड चुनना

खोज के लिए किए गए हर अनुरोध की कीमत, आपके अनुरोध किए गए फ़ील्ड के हिसाब से तय होती है. अनुरोध के लिए, अनुरोध किए गए फ़ील्ड में से सबसे ज़्यादा कीमत वाले एसकेयू के हिसाब से, एक बार बिल भेजा जाता है. उदाहरण के लिए, reviews को fields में जोड़ने पर, पूरे अनुरोध के लिए, आस-पास की जगहों की जानकारी (एंटरप्राइज़) + माहौल के हिसाब से बिलिंग की जाती है.

Nearby Search Pro में खोज के अनुरोधों को बनाए रखने के लिए, सिर्फ़ उन फ़ील्ड का अनुरोध करें जो खोज के नतीजों में दिखते हैं. जैसे, id, displayName, formattedAddress, और location.

जब कोई उपयोगकर्ता किसी जगह को चुनता है, तो उस जगह पर fetchFields() को कॉल करें, ताकि reviews, nationalPhoneNumber या websiteURI जैसे फ़ील्ड मिल सकें. हर fetchFields() कॉल, जगह की जानकारी का एक अलग अनुरोध होता है. इसके लिए, अनुरोध किए गए फ़ील्ड में से सबसे ज़्यादा कीमत वाले एसकेयू के हिसाब से बिल भेजा जाता है. इस तरीके से पैसे बचेंगे या नहीं, यह इस बात पर निर्भर करता है कि आपके उपयोगकर्ता कितनी जगहों की जानकारी खोलते हैं.

हर SKU को ट्रिगर करने वाले फ़ील्ड

• इन फ़ील्ड की वजह से, आस-पास की जगहों की जानकारी Pro एसकेयू ट्रिगर होता है:

  accessibilityOptions
addressComponents
adrFormatAddress
businessStatus
displayName
formattedAddress
googleMapsUri
iconBackgroundColor
id
location
photos
plusCode
svgIconMaskURI
types
utcOffsetMinutes
viewport
  

• यहां दिए गए फ़ील्ड, आस-पास की जगहों की जानकारी देने वाले एंटरप्राइज़ एसकेयू को ट्रिगर करते हैं:

  internationalPhoneNumber
nationalPhoneNumber
priceLevel
rating
regularOpeningHours
userRatingCount
websiteURI

• इन फ़ील्ड से, आस-पास की जगहों की जानकारी Enterprise + Atmosphere एसकेयू ट्रिगर होता है:

  allowsDogs
editorialSummary
evChargeOptions
fuelOptions
hasCurbsidePickup
hasDelivery
hasDineIn
hasLiveMusic
hasMenuForChildren
hasOutdoorSeating
hasRestroom
hasTakeout
hasWifi
isGoodForChildren
isGoodForGroups
isGoodForWatchingSports
isReservable
parkingOptions
paymentOptions
reviews
servesBeer
servesBreakfast
servesBrunch
servesCocktails
servesCoffee
servesDessert
servesDinner
servesLunch
servesVegetarianFood
servesWine
  

हर फ़ील्ड के एसकेयू के लिए, Place क्लास के डेटा फ़ील्ड देखें.