Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला विजेट

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

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

ज़रूरी शर्तें

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

नया क्या है

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा में ये सुधार किए गए हैं:

ऑटोकंप्लीट विजेट के यूज़र इंटरफ़ेस (यूआई) में, क्षेत्रीय भाषा में अनुवाद की सुविधा (आरटीएल भाषाओं सहित) उपलब्ध है. यह सुविधा, टेक्स्ट इनपुट प्लेसहोल्डर, सुझावों की सूची के लोगो, और जगह के सुझावों के लिए उपलब्ध है.
सुलभता को बेहतर बनाया गया है. इसमें स्क्रीन रीडर और कीबोर्ड से इंटरैक्ट करने की सुविधा शामिल है.
ऑटोकंप्लीट विजेट, Place क्लास (Place रेफ़रंस) का नया वर्शन दिखाता है. इससे, दिखाए गए ऑब्जेक्ट को आसानी से मैनेज किया जा सकता है.
मोबाइल डिवाइसों और छोटी स्क्रीन के लिए बेहतर सहायता.
बेहतर परफ़ॉर्मेंस और बेहतर ग्राफ़िकल लुक.

ऑटोकंप्लीट विजेट, टेक्स्ट इनपुट फ़ील्ड बनाता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) में, पिक लिस्ट में जगह के सुझाव दिखाता है. इसके अलावा, gmp-select लिसनर का इस्तेमाल करके, उपयोगकर्ता के क्लिक के जवाब में जगह की जानकारी दिखाता है. इस सेक्शन में, किसी वेब पेज या Google Maps में ऑटोकंप्लीट विजेट जोड़ने का तरीका बताया गया है.

किसी वेब पेज में ऑटोकंप्लीट विजेट जोड़ने के लिए, नया google.maps.places.PlaceAutocompleteElement, बनाएं. इसके बाद, इसे पेज में जोड़ें. इसका उदाहरण यहां दिया गया है:

TypeScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);index.js

कोड के पूरे उदाहरण देखें

अगर आपका बिलिंग पता यूरोपियन इकनॉमिक एरिया (ईईए) से बाहर है, तो Google Maps के साथ ऑटोकंप्लीट विजेट का इस्तेमाल किया जा सकता है.

किसी मैप में ऑटोकंप्लीट विजेट जोड़ने के लिए, सबसे पहले ज़रूरी लाइब्रेरी का अनुरोध करें. इसका उदाहरण यहां दिया गया है:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

इसके बाद, अपने एचटीएमएल में, नया gmp-place-autocomplete एलिमेंट div के अंदर नेस्ट करें. इसके बाद, उस div को gmp-map के अंदर नेस्ट करें. इसका उदाहरण यहां दिया गया है:

<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <div
        class="place-autocomplete-card"
        slot="control-inline-start-block-start">
        <gmp-place-autocomplete
            placeholder="Search for a place..."></gmp-place-autocomplete>
    </div>
</gmp-map>index.html

किसी मैप में ऑटोकंप्लीट विजेट को प्रोग्राम के हिसाब से जोड़ने के लिए, नया google.maps.places.PlaceAutocompleteElement इंस्टेंस बनाएं. इसके बाद, PlaceAutocompleteElement को div में जोड़ें. इसके बाद, div पर slot एट्रिब्यूट लागू करें. इसका उदाहरण यहां दिया गया है:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

// Get the map element.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

// Create the PlaceAutocompleteElement instance.
const placeAutocomplete = new PlaceAutocompleteElement({});

// Create a div and append the PlaceAutocompleteElement to it.
const card = document.createElement("div");
card.appendChild(placeAutocomplete);

// Apply the slot attribute to the div.
// This positions the control in the top-left corner of the map.
card.setAttribute("slot", "control-inline-start-block-start");

// Append the div to the map element (check for null).
if (mapElement) {
    mapElement.appendChild(card);
}

कोड के पूरे उदाहरण देखें

प्लेसहोल्डर टेक्स्ट जोड़ना

प्लेसहोल्डर टेक्स्ट जोड़ने के लिए, placeholder प्रॉपर्टी का इस्तेमाल करें. यहां दिए गए उदाहरण में, एचटीएमएल में प्लेसहोल्डर टेक्स्ट सेट करने का तरीका बताया गया है:

<gmp-place-autocomplete
  placeholder="Search for a place..."
></gmp-place-autocomplete>

प्लेसहोल्डर टेक्स्ट को प्रोग्राम के हिसाब से भी सेट किया जा सकता है:

placeAutocomplete.placeholder = 'Search for a place...';

ऑटोकंप्लीट के सुझावों पर पाबंदी लगाना

डिफ़ॉल्ट तौर पर, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा, सभी तरह की जगहों के सुझाव देती है. साथ ही, उपयोगकर्ता की जगह के आस-पास के सुझावों को प्राथमिकता देती है. इसके अलावा, उपयोगकर्ता की चुनी गई जगह के लिए, उपलब्ध सभी डेटा फ़ील्ड फ़ेच करती है. ज़्यादा काम के सुझाव दिखाने के लिए, PlaceAutocompleteElementOptions सेट करें. इसके लिए, नतीजों पर पाबंदी लगाएं या उन्हें प्राथमिकता दें.

नतीजों पर पाबंदी लगाने से, ऑटोकंप्लीट विजेट उन नतीजों को अनदेखा कर देता है जो पाबंदी वाले इलाके से बाहर हैं. आम तौर पर, नतीजों को मैप की सीमाओं तक सीमित किया जाता है. नतीजों को प्राथमिकता देने से ऑटोकंप्लीट विजेट तय किए गए इलाके में नतीजे दिखाता है. हालांकि, कुछ नतीजे उस इलाके से बाहर भी हो सकते हैं .

अगर आपने कोई सीमा या मैप का व्यूपोर्ट नहीं दिया है, तो एपीआई, उपयोगकर्ता के आईपी पते से उसकी जगह का पता लगाने की कोशिश करेगा. साथ ही, नतीजों को उस जगह के हिसाब से प्राथमिकता देगा. जहां तक हो सके, सीमा सेट करें. ऐसा न करने पर, अलग-अलग उपयोगकर्ताओं को अलग-अलग सुझाव मिल सकते हैं. इसके अलावा, सुझावों को बेहतर बनाने के लिए, ऐसा व्यूपोर्ट देना ज़रूरी है जो काम का हो. जैसे, मैप पर पैन या ज़ूम करके सेट किया गया व्यूपोर्ट या डेवलपर की ओर से सेट किया गया व्यूपोर्ट. यह व्यूपोर्ट, डिवाइस की जगह और दायरे के आधार पर सेट किया जाता है. जब दायरा उपलब्ध नहीं होता है, तो किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के लिए, 5 किलोमीटर को डिफ़ॉल्ट तौर पर काम का दायरा माना जाता है. ऐसा व्यूपोर्ट सेट न करें जिसका दायरा शून्य हो (एक पॉइंट), ऐसा व्यूपोर्ट जो कुछ मीटर का हो (100 मीटर से कम) या ऐसा व्यूपोर्ट जो पूरी दुनिया को कवर करता हो.

देश के हिसाब से, जगह की खोज पर पाबंदी लगाना

किसी जगह की खोज को एक या उससे ज़्यादा देशों तक सीमित करने के लिए, includedRegionCodes प्रॉपर्टी का इस्तेमाल करें. इससे देश के कोड तय किए जा सकते हैं. इसका उदाहरण यहां दिया गया है. इसमें यह माना गया है कि आपने पहले ही placeAutocomplete नाम का इंस्टेंस बना लिया है:

placeAutocomplete.includedRegionCodes = ['us', 'au'];;

मैप के इलाके के दायरे के हिसाब से, Place Search पर पाबंदी लगाना

मैप की सीमाओं के हिसाब से, जगह की खोज पर पाबंदी लगाने के लिए, locationRestriction प्रॉपर्टी का इस्तेमाल करें. यहां दिए गए स्निपेट में, सीमाएं बदलने पर उन्हें अपडेट करने के लिए लिसनर जोड़ने का तरीका बताया गया है:

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});

locationRestriction को हटाने के लिए, इसे null पर सेट करें.

जगह की खोज के नतीजों को प्राथमिकता देना

जगह की खोज के नतीजों को किसी दायरे के हिसाब से प्राथमिकता देने के लिए locationBias प्रॉपर्टी का इस्तेमाल करें. इसका उदाहरण यहां दिया गया है:

placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};

locationBias को हटाने के लिए, इसे null पर सेट करें.

जगह की खोज के नतीजों को कुछ टाइप तक सीमित करना

` includedPrimaryTypes ` प्रॉपर्टी का इस्तेमाल करके, जगह की खोज के नतीजों को कुछ टाइप की जगहों तक सीमित करें. इसके लिए, एक या उससे ज़्यादा टाइप तय करें. इसका उदाहरण यहां दिया गया है:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

इस्तेमाल किए जा सकने वाले टाइप की पूरी सूची देखने के लिए, जगह के टाइप की टेबल A और B देखें.

जगह की जानकारी पाना

चुनी गई जगह की जानकारी पाने के लिए, gmp-select लिसनर को PlaceAutocompleteElement में जोड़ें. इसका उदाहरण यहां दिया गया है:

TypeScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({
        placePrediction,
    }: google.maps.places.PlacePredictionSelectEvent) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);index.ts

JavaScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);index.js

कोड के पूरे उदाहरण देखें

ऊपर दिए गए उदाहरण में, इवेंट लिसनर को PlacePredictionSelectEvent मिलता है. इसके बाद, placePrediction.toPlace() को कॉल किया जाता है, ताकि Place क्लास (Place रेफ़रंस) का इंस्टेंस मिल सके. अपने ऐप्लिकेशन के लिए ज़रूरी, जगह की जानकारी के डेटा फ़ील्ड पाने के लिए, place.fetchFields() को कॉल करें.

अगले उदाहरण में, लिसनर, place.fetchFields() में displayName, formattedAddress, location, और viewport फ़ील्ड का अनुरोध करता है. इसके बाद, चुने गए जगह को मैप पर दिखाने के लिए, fitBounds() के साथ place.viewport का इस्तेमाल करता है.

TypeScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location!);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);index.ts

JavaScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);index.js

कोड के पूरे उदाहरण देखें

मैप के उदाहरण

इस सेक्शन में, इस पेज पर दिखाए गए मैप के उदाहरणों के लिए पूरा कोड दिया गया है.

ऑटोकंप्लीट एलिमेंट

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

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({
            placePrediction,
        }: google.maps.places.PlacePredictionSelectEvent) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();index.ts

JavaScript

async function init() {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();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;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete element</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>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>
    </body>
</html>index.html

ऑटोकंप्लीट मैप

इस उदाहरण में, Google Maps में ऑटोकंप्लीट विजेट जोड़ने का तरीका बताया गया है.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(
    content: string | Element | Text | null | undefined,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();index.js

CSS

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

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

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete map</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="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Search for a place..."></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>index.html

ऑटोकंप्लीट (नया) को ऑप्टिमाइज़ करना

इस सेक्शन में, ऑटोकंप्लीट (नया) सेवा का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, सबसे सही तरीकों के बारे में बताया गया है.

यहां कुछ सामान्य दिशा-निर्देश दिए गए हैं:

काम करने वाला यूज़र इंटरफ़ेस (यूआई) डेवलप करने का सबसे तेज़ तरीका है कि Maps JavaScript API के ऑटोकंप्लीट (नया) विजेट, Android के लिए Places SDK के ऑटोकंप्लीट (नया) विजेट, या iOS के लिए Places SDK के ऑटोकंप्लीट (नया) विजेट का इस्तेमाल किया जाए.
शुरुआत से ही, ऑटोकंप्लीट (नया) के ज़रूरी डेटा फ़ील्ड के बारे में जानें.
जगह के हिसाब से प्राथमिकता देने और जगह की पाबंदी वाले फ़ील्ड ज़रूरी नहीं हैं. हालांकि, इनसे ऑटोकंप्लीट की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है.
गड़बड़ी को हैंडल करने की सुविधा का इस्तेमाल करें, ताकि एपीआई से गड़बड़ी का मैसेज मिलने पर, आपका ऐप्लिकेशन सही तरीके से काम करता रहे.
पक्का करें कि आपका ऐप्लिकेशन, कोई विकल्प न चुने जाने पर भी काम करे और उपयोगकर्ताओं को आगे बढ़ने का तरीका दिखाए.

लागत को ऑप्टिमाइज़ करने के सबसे सही तरीके

लागत को ऑप्टिमाइज़ करने का बुनियादी तरीका

ऑटोकंप्लीट (नया) सेवा के इस्तेमाल की लागत को ऑप्टिमाइज़ करने के लिए, Place Details (नया) और ऑटोकंप्लीट (नया) विजेट में फ़ील्ड मास्क का इस्तेमाल करें. इससे, सिर्फ़ ऑटोकंप्लीट (नया) डेटा फ़ील्ड दिखेंगे जिनकी आपको ज़रूरत है.

लागत को ऑप्टिमाइज़ करने का बेहतर तरीका

एसकेयू: ऑटोकंप्लीट अनुरोध की कीमत और Place Details (नया) के बजाय, चुनी गई जगह के बारे में Geocoding API के नतीजे पाने के लिए, ऑटोकंप्लीट (नया) को प्रोग्राम के हिसाब से लागू करने पर विचार करें. अगर ये दोनों शर्तें पूरी होती हैं, तो Geocoding API के साथ हर अनुरोध के हिसाब से कीमत तय करने की सुविधा, हर सेशन (सेशन के हिसाब से) कीमत तय करने की सुविधा से ज़्यादा किफ़ायती होती है:

अगर आपको सिर्फ़ उपयोगकर्ता की चुनी गई जगह का अक्षांश और देशांतर या पता चाहिए, तो Geocoding API, Place Details (नया) को कॉल करने के मुकाबले कम कीमत में यह जानकारी उपलब्ध कराता है.
अगर उपयोगकर्ता, ऑटोकंप्लीट (नया) के चार या उससे कम अनुरोधों के औसत में, ऑटोकंप्लीट के सुझाव चुनते हैं, तो हर अनुरोध के हिसाब से कीमत तय करने की सुविधा, हर सेशन के हिसाब से कीमत तय करने की सुविधा से ज़्यादा किफ़ायती हो सकती है.

अपनी ज़रूरतों के हिसाब से, ऑटोकंप्लीट (नया) को लागू करने का तरीका चुनने के लिए, इस सवाल के अपने जवाब से जुड़ा टैब चुनें.

क्या आपके ऐप्लिकेशन को, चुने गए सुझाव के पते और अक्षांश/देशांतर के अलावा किसी अन्य जानकारी की ज़रूरत है?

हां, ज़्यादा जानकारी चाहिए

Place Details (नया) के साथ, सेशन के हिसाब से ऑटोकंप्लीट (नया) का इस्तेमाल करें.
आपके ऐप्लिकेशन को Place Details (नया) की ज़रूरत है. जैसे, जगह का नाम, कारोबार की स्थिति, या कारोबार के खुले होने का समय. इसलिए, ऑटोकंप्लीट (नया) को लागू करने के लिए, हर सेशन के लिए एक सेशन टोकन (प्रोग्राम के हिसाब से या JavaScript, Android, या iOS विजेट में शामिल) हर सेशन के लिए के साथ-साथ, लागू होने वाले Places एसकेयू का इस्तेमाल करना चाहिए. यह इस बात पर निर्भर करता है कि आपने जगह के किन डेटा फ़ील्ड का अनुरोध किया है.¹

विजेट को लागू करना
सेशन मैनेजमेंट, JavaScript, Android, या iOS विजेट में अपने-आप शामिल होता है. इसमें, चुने गए सुझाव पर ऑटोकंप्लीट (नया) के अनुरोध और Place Details (नया) का अनुरोध, दोनों शामिल हैं. fields पैरामीटर तय करना न भूलें, ताकि सिर्फ़ ऑटोकंप्लीट (नया) के उन डेटा फ़ील्ड का अनुरोध किया जा सके जिनकी आपको ज़रूरत है.

प्रोग्राम के हिसाब से लागू करना
ऑटोकंप्लीट (नया) के अनुरोधों के साथ, सेशन टोकन का इस्तेमाल करें. चुने गए सुझाव के बारे में Place Details (नया) का अनुरोध करते समय, ये पैरामीटर शामिल करें:

ऑटोकंप्लीट (नया) के जवाब में मिला जगह का आईडी
ऑटोकंप्लीट (नया) के अनुरोध में इस्तेमाल किया गया सेशन टोकन
`fields` पैरामीटर. इसमें ऑटोकंप्लीट (नया) के उन डेटा फ़ील्ड की जानकारी होती है जिनकी आपको ज़रूरत है

नहीं, सिर्फ़ पते और जगह की जानकारी चाहिए

आपके ऐप्लिकेशन के लिए, Place Details (नया) के मुकाबले Geocoding API ज़्यादा किफ़ायती विकल्प हो सकता है. यह इस बात पर निर्भर करता है कि ऑटोकंप्लीट (नया) का इस्तेमाल कितनी बार किया जाता है. हर ऐप्लिकेशन के लिए, ऑटोकंप्लीट (नया) की परफ़ॉर्मेंस अलग-अलग होती है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता क्या डाल रहे हैं, ऐप्लिकेशन का इस्तेमाल कहां किया जा रहा है, और क्या परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के सबसे सही तरीके लागू किए गए हैं.

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

क्या आपके उपयोगकर्ता, औसतन चार या उससे कम अनुरोधों में, ऑटोकंप्लीट (नया) का सुझाव चुनते हैं?

हां

सेशन टोकन के बिना, ऑटोकंप्लीट (नया) को प्रोग्राम के हिसाब से लागू करें और चुनी गई जगह के सुझाव के लिए, Geocoding API को कॉल करें.
Geocoding API, पते और अक्षांश/देशांतर की जानकारी उपलब्ध कराता है. ऑटोकंप्लीट के चार अनुरोध करने के साथ-साथ, चुनी गई जगह के सुझाव के लिए Geocoding API को कॉल करने की लागत, हर सेशन के हिसाब से ऑटोकंप्लीट (नया) की लागत से कम होती है.¹

परफ़ॉर्मेंस के सबसे सही तरीकों का इस्तेमाल करने पर विचार करें, ताकि आपके उपयोगकर्ताओं को कम वर्णों में भी वह सुझाव मिल सके जिसकी उन्हें तलाश है.

नहीं

Place Details (नया) के साथ, सेशन के हिसाब से ऑटोकंप्लीट (नया) का इस्तेमाल करें.
ऑटोकंप्लीट (नया) के सुझाव को चुनने से पहले, जितने अनुरोध किए जाने की उम्मीद है उनकी संख्या, हर सेशन के हिसाब से कीमत तय करने की लागत से ज़्यादा है. इसलिए, ऑटोकंप्लीट (नया) को लागू करने के लिए, हर सेशन के हिसाब से ऑटोकंप्लीट (नया) के अनुरोधों और उससे जुड़े Place Details (नया) के अनुरोध, दोनों के लिए सेशन टोकन का इस्तेमाल करना चाहिए. हर सेशन. ¹

विजेट को लागू करना
सेशन मैनेजमेंट, JavaScript, Android, या iOS विजेट में अपने-आप शामिल होता है. इसमें, चुने गए सुझाव पर ऑटोकंप्लीट (नया) के अनुरोध और Place Details (नया) का अनुरोध, दोनों शामिल हैं. fields पैरामीटर तय करना न भूलें, ताकि सिर्फ़ उन फ़ील्ड का अनुरोध किया जा सके जिनकी आपको ज़रूरत है.

ऑटोकंप्लीट (नया) के जवाब में मिला जगह का आईडी
ऑटोकंप्लीट (नया) के अनुरोध में इस्तेमाल किया गया सेशन टोकन
fields पैरामीटर. इसमें पते और ज्यामिति जैसे फ़ील्ड की जानकारी होती है

ऑटोकंप्लीट (नया) के अनुरोधों में देरी करने पर विचार करना
ऐसी रणनीतियां इस्तेमाल की जा सकती हैं. जैसे, ऑटोकंप्लीट (नया) के अनुरोध में तब तक देरी करना, जब तक उपयोगकर्ता पहले तीन या चार वर्ण टाइप न कर ले. इससे आपका ऐप्लिकेशन कम अनुरोध करेगा. उदाहरण के लिए, उपयोगकर्ता के तीसरे वर्ण को टाइप करने के बाद, हर वर्ण के लिए ऑटोकंप्लीट (नया) के अनुरोध करने का मतलब है कि अगर उपयोगकर्ता सात वर्ण टाइप करता है, तो वह एक ऐसा सुझाव चुनता है जिसके लिए आपने Geocoding API का एक अनुरोध किया है. ऐसे में, कुल लागत, हर अनुरोध के हिसाब से ऑटोकंप्लीट (नया) के चार अनुरोध + Geocoding API के एक अनुरोध की लागत होगी.¹

अगर अनुरोधों में देरी करने से, प्रोग्राम के हिसाब से किए जाने वाले अनुरोधों की औसत संख्या चार से कम हो जाती है, तो Geocoding API को लागू करने के साथ-साथ, ऑटोकंप्लीट (नया) की परफ़ॉर्मेंस को बेहतर बनाने के लिए दिए गए दिशा-निर्देशों का पालन किया जा सकता है. ध्यान दें कि अनुरोधों में देरी करने से, उपयोगकर्ता को ऐसा लग सकता है कि परफ़ॉर्मेंस में कमी आई है. ऐसा इसलिए, क्योंकि हो सकता है कि वह हर नई कीस्ट्रोक के साथ सुझाव देखना चाहता हो.

लागत के बारे में जानने के लिए, Google Maps Platform के शुल्क की सूची देखें.

परफ़ॉर्मेंस के सबसे सही तरीके

ऑटोकंप्लीट (नया) की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के तरीकों के बारे में यहां दिशा-निर्देश दिए गए हैं:

ऑटोकंप्लीट (नया) को लागू करने के लिए, देश से जुड़ी पाबंदियां, जगह के हिसाब से प्राथमिकता देने की सुविधा, और (प्रोग्राम के हिसाब से लागू करने के लिए) भाषा से जुड़ी प्राथमिकता जोड़ें. विजेट के लिए, भाषा से जुड़ी प्राथमिकता की ज़रूरत नहीं होती क्योंकि वे उपयोगकर्ता के ब्राउज़र या मोबाइल डिवाइस से भाषा से जुड़ी प्राथमिकताएं चुनते हैं.
अगर ऑटोकंप्लीट (नया) के साथ मैप भी दिखाया जाता है, तो मैप के व्यूपोर्ट के हिसाब से, जगह को प्राथमिकता दी जा सकती है.
ऐसी स्थितियों में जब उपयोगकर्ता, ऑटोकंप्लीट (नया) के किसी सुझाव को नहीं चुनता है, तो आम तौर पर ऐसा इसलिए होता है, क्योंकि इनमें से कोई भी सुझाव, उपयोगकर्ता के मनचाहे पते से मेल नहीं खाता. ऐसे में, ज़्यादा काम के नतीजे पाने के लिए, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल किया जा सकता है:
- अगर आपको लगता है कि उपयोगकर्ता सिर्फ़ पते की जानकारी डालेगा, तो Geocoding API को कॉल करने के लिए, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल करें Geocoding API.
- अगर आपको लगता है कि उपयोगकर्ता, किसी खास जगह के लिए नाम या पते के हिसाब से क्वेरी डालेगा, Place Details (नया) का अनुरोध करें. अगर नतीजे सिर्फ़ किसी खास इलाके में चाहिए, तो जगह के हिसाब से प्राथमिकता देने की सुविधा का इस्तेमाल करें.
अन्य स्थितियां, जिनमें Geocoding API का इस्तेमाल करना सबसे सही होता है:
- उपयोगकर्ता, सबप्रमाइस के पते डाल रहे हैं. जैसे, किसी इमारत में मौजूद खास यूनिट या अपार्टमेंट के पते . उदाहरण के लिए, चेक गणराज्य के पते "Stroupežnického 3191/17, Praha" के लिए, ऑटोकंप्लीट (नया) में आंशिक सुझाव मिलता है.
- उपयोगकर्ता, सड़क के सेगमेंट के प्रीफ़िक्स वाले पते डाल रहे हैं. जैसे, न्यूयॉर्क शहर में "23-30 29th St, Queens" या हवाई के काउई द्वीप पर "47-380 Kamehameha Hwy, Kaneohe".

जगह के हिसाब से प्राथमिकता देना

location पैरामीटर और radius पैरामीटर पास करके, नतीजों को किसी तय इलाके के हिसाब से प्राथमिकता दें. इससे, ऑटोकंप्लीट (नया) को तय किए गए इलाके में नतीजे दिखाने की प्राथमिकता देने का निर्देश मिलता है. तय किए गए इलाके से बाहर के नतीजे भी दिखाए जा सकते हैं. आप includedRegionCodes पैरामीटर का इस्तेमाल करके, नतीजों को फ़िल्टर कर सकते हैं. इससे, सिर्फ़ तय किए गए देश में मौजूद जगहें दिखेंगी.

चेतावनी: अगर radius नहीं दिया जाता है, तो location पैरामीटर को अनदेखा कर दिया जाता है.

आम तौर पर, खोज का दायरा बड़ा होने पर, संस्थानों के नतीजे, खोज के नतीजों में ऊपर नहीं दिखते. अगर आपको संस्थानों के नतीजे, संस्थानों/जियोकोड के मिले-जुले नतीजों में दिखाने हैं, तो छोटा दायरा तय किया जा सकता है. इसके अलावा, नतीजों को सिर्फ़ संस्थानों तक सीमित करने के लिए, types=establishment का इस्तेमाल करें.

जगह के हिसाब से पाबंदी लगाना

locationRestriction पैरामीटर पास करके, नतीजों को किसी तय इलाके तक सीमित करें.

locationRestriction पैरामीटर जोड़कर, नतीजों को location और radius पैरामीटर से तय किए गए इलाके तक भी सीमित किया जा सकता है. इससे, ऑटोकंप्लीट (नया) को सिर्फ़ उस इलाके में नतीजे दिखाने का निर्देश मिलता है.

ज़रूरी शर्तें

नया क्या है

ऑटोकंप्लीट विजेट जोड़ना

किसी वेब पेज में ऑटोकंप्लीट विजेट जोड़ना

TypeScript

JavaScript

किसी मैप में ऑटोकंप्लीट विजेट जोड़ना

प्लेसहोल्डर टेक्स्ट जोड़ना

ऑटोकंप्लीट के सुझावों पर पाबंदी लगाना

देश के हिसाब से, जगह की खोज पर पाबंदी लगाना

मैप के इलाके के दायरे के हिसाब से, Place Search पर पाबंदी लगाना

जगह की खोज के नतीजों को प्राथमिकता देना

जगह की खोज के नतीजों को कुछ टाइप तक सीमित करना

जगह की जानकारी पाना

TypeScript

JavaScript

TypeScript

JavaScript

मैप के उदाहरण

ऑटोकंप्लीट एलिमेंट

TypeScript

JavaScript

CSS

HTML

ऑटोकंप्लीट मैप

TypeScript

JavaScript

CSS

HTML

ऑटोकंप्लीट (नया) को ऑप्टिमाइज़ करना

लागत को ऑप्टिमाइज़ करने के सबसे सही तरीके

लागत को ऑप्टिमाइज़ करने का बुनियादी तरीका

लागत को ऑप्टिमाइज़ करने का बेहतर तरीका

हां, ज़्यादा जानकारी चाहिए

नहीं, सिर्फ़ पते और जगह की जानकारी चाहिए

हां

नहीं

परफ़ॉर्मेंस के सबसे सही तरीके

जगह के हिसाब से प्राथमिकता देना

जगह के हिसाब से पाबंदी लगाना