Maps की डेमो कुंजी पाएं: Maps की डेमो कुंजी की मदद से, Maps JavaScript API और जगहों की जानकारी देने वाली यूआई किट की चुनिंदा सुविधाएं बिना किसी शुल्क के आज़माएं. इसके लिए, बिलिंग की जानकारी देने की ज़रूरत नहीं है.

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

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

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

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

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

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

नया क्या है

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

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

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

किसी वेब पेज पर, ऑटोकंप्लीट विजेट जोड़ने के लिए, एक नया 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 मैप के साथ ऑटोकंप्लीट विजेट का भी इस्तेमाल किया जा सकता है.

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

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

इसके बाद, अपने एचटीएमएल में, div के अंदर एक नया gmp-place-autocomplete एलिमेंट नेस्ट करें. साथ ही, उस 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 में जोड़ें और slot एट्रिब्यूट को div पर लागू करें. इसके बारे में यहां दिए गए उदाहरण में बताया गया है:

// 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 को सेट करें, ताकि नतीजों को सीमित करके या उन्हें पक्षपातपूर्ण बनाकर, ज़्यादा काम के अनुमान दिखाए जा सकें.

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

अगर आपने कोई सीमा या मैप व्यूपोर्ट नहीं दिया है, तो एपीआई उपयोगकर्ता के आईपी पते से उसकी जगह की जानकारी का पता लगाने की कोशिश करेगा. साथ ही, उस जगह के हिसाब से नतीजे दिखाएगा. जब भी संभव हो, बाउंड सेट करें. ऐसा न करने पर, अलग-अलग उपयोगकर्ताओं को अलग-अलग अनुमान मिल सकते हैं. साथ ही, अनुमानों को बेहतर बनाने के लिए, यह ज़रूरी है कि आप एक सही व्यूपोर्ट दें. जैसे, मैप पर पैन या ज़ूम करके सेट किया गया व्यूपोर्ट या डिवाइस की जगह और दायरा के आधार पर डेवलपर का सेट किया गया व्यूपोर्ट. जब कोई दायरा उपलब्ध न हो, तो किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के लिए, पांच कि॰मी॰ को डिफ़ॉल्ट दायरा माना जाता है. शून्य रेडियस (एक पॉइंट) वाला व्यूपोर्ट, कुछ मीटर (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 देखें.

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

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

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

सीएसएस

/* 
 * 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>
    <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 मैप में ऑटोकंप्लीट विजेट जोड़ने का तरीका बताया गया है.

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

सीएसएस

/* 
 * 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>
    <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 ऑटोकंप्लीट (नया) विजेट, Places SDK for Android ऑटोकंप्लीट (नया) विजेट, या Places SDK for iOS ऑटोकंप्लीट (नया) विजेट का इस्तेमाल करना.
शुरुआत से ही, ऑटोकंप्लीट (नई) सुविधा के ज़रूरी डेटा फ़ील्ड को समझें.
जगह के हिसाब से नतीजे दिखाने और जगह के हिसाब से पाबंदी लगाने वाले फ़ील्ड भरना ज़रूरी नहीं है. हालांकि, इनसे ऑटोकंप्लीट की सुविधा की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है.
गड़बड़ी को मैनेज करने की सुविधा का इस्तेमाल करें, ताकि एपीआई से गड़बड़ी मिलने पर आपका ऐप्लिकेशन सही तरीके से काम करता रहे.
पक्का करें कि आपका ऐप्लिकेशन, कोई विकल्प न चुने जाने पर उपयोगकर्ताओं को आगे बढ़ने का तरीका बताता हो.

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

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

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

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

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

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

अपने ऐप्लिकेशन के लिए, Autocomplete (New) को लागू करने का ऐसा तरीका चुनें जो सबसे किफ़ायती हो. इसके लिए, यहां दी गई टेबल में वह लाइन ढूंढें जो आपके ऐप्लिकेशन की ज़रूरतों से मेल खाती हो.

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

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

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

Place Details (New) के साथ, सेशन के हिसाब से ऑटोकंप्लीट (नई) की सुविधा

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

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

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

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

Geocoding API के साथ, हर अनुरोध के लिए Autocomplete (New) की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने ऑटोकंप्लीट (नया) लागू करने के तरीके में, देश से जुड़ी पाबंदियां, जगह के हिसाब से नतीजे दिखाने की सुविधा, और (प्रोग्राम के हिसाब से लागू करने के लिए) भाषा से जुड़ी प्राथमिकता जोड़ें. विजेट के लिए, भाषा की प्राथमिकता सेट करने की ज़रूरत नहीं होती. ऐसा इसलिए, क्योंकि वे उपयोगकर्ता के ब्राउज़र या मोबाइल डिवाइस से भाषा से जुड़ी प्राथमिकताएं चुनते हैं.
अगर Autocomplete (New) के साथ कोई मैप मौजूद है, तो मैप व्यूपोर्ट के हिसाब से जगह की जानकारी को बायस किया जा सकता है.
कभी-कभी ऐसा होता है कि उपयोगकर्ता, ऑटोकंप्लीट (नया) के किसी भी सुझाव को नहीं चुनता. आम तौर पर, ऐसा इसलिए होता है, क्योंकि उन सुझावों में से कोई भी सुझाव, उपयोगकर्ता के काम का नहीं होता. ऐसे में, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल करके, ज़्यादा काम के नतीजे पाने की कोशिश की जा सकती है:
- अगर आपको लगता है कि उपयोगकर्ता सिर्फ़ पते की जानकारी डालेगा, तो Geocoding API को किए गए कॉल में, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल करें.
- अगर आपको लगता है कि उपयोगकर्ता किसी खास जगह के नाम या पते के लिए क्वेरी डालेगा, तो Place Details (New) अनुरोध का इस्तेमाल करें. अगर आपको सिर्फ़ किसी खास इलाके के नतीजे चाहिए, तो जगह के हिसाब से नतीजे दिखाने की सुविधा का इस्तेमाल करें.
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 पैरामीटर पास करके, नतीजों को किसी खास इलाके तक सीमित करना.

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

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

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

नया क्या है

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

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

TypeScript

JavaScript

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

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

ऑटोकंप्लीट के सुझावों को सीमित करना

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

जगह की खोज को इलाके के दायरे तक सीमित करना

जगह की खोज के नतीजों को बायस करना

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

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

TypeScript

JavaScript

TypeScript

JavaScript

मैप के उदाहरण

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

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

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

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

Place Details (New) के साथ, सेशन के हिसाब से ऑटोकंप्लीट (नई) की सुविधा

Geocoding API के साथ, हर अनुरोध के लिए Autocomplete (New) की सुविधा

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

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

जगह के हिसाब से नतीजे दिखाना

जगह की जानकारी से जुड़ी पाबंदी