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

BasicPlaceAutocompleteElement, टेक्स्ट इनपुट फ़ील्ड बनाता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) की पिक लिस्ट में जगह के सुझाव देता है और चुनी गई जगह का आईडी दिखाता है.

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

  • किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बेसिक एलिमेंट, PlacePrediction ऑब्जेक्ट के बजाय Place ऑब्जेक्ट दिखाता है. इसमें सिर्फ़ जगह का आईडी होता है. जगह की ज़्यादा जानकारी पाने के लिए, दिखाए गए जगह के आईडी का इस्तेमाल सीधे तौर पर Places यूआई किट की जानकारी एलिमेंट के साथ किया जा सकता है. हालांकि, PlacePrediction ऑब्जेक्ट को पहले जगह के आईडी में बदलना होगा.
  • किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के बेसिक एलिमेंट के लिए, आपको Google Cloud Console में Places API को चालू करने की ज़रूरत नहीं है.
  • जब कोई उपयोगकर्ता किसी जगह के लिए सुझाए गए नाम को चुनता है, तो Basic Place Autocomplete एलिमेंट, इनपुट फ़ील्ड को खाली कर देता है.

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

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

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी एलिमेंट जोड़ना

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

किसी वेब पेज पर, बुनियादी ऑटोकंप्लीट एलिमेंट जोड़ना

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

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

मैप में, ऑटोकंप्लीट की बुनियादी सुविधा वाला एलिमेंट जोड़ना

मैप में अपने-आप पूरा होने वाला बेसिक एलिमेंट जोड़ने के लिए, gmp-map एलिमेंट में BasicPlaceAutocompleteElement जोड़ें. इसके बाद, slot एट्रिब्यूट का इस्तेमाल करके इसकी पोज़िशन सेट करें. इसके लिए, यहां दिया गया उदाहरण देखें:

<gmp-map
    zoom="12"
    center="37.4220656,-122.0840897"
    map-id="DEMO_MAP_ID">
    <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>

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

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

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

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

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

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

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

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

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

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

इलाके के दायरे को सीमित करते समय, दायरे में बदलाव होने पर उन्हें अपडेट करने के लिए, लिसनर जोड़ना न भूलें:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

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

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

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

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

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

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

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

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

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

Place Request एलिमेंट को कॉन्फ़िगर करना

जब उपयोगकर्ता कोई सुझाव चुनता है, तो जगह के अनुरोध वाले एलिमेंट को अपडेट करने के लिए, एक लिसनर जोड़ें: 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();

    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector(
        'gmp-place-details-place-request'
    );
    placeDetailsRequest.place = event.place.id;
});

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

JavaScript

const placeAutocompleteElement = document.querySelector(
    'gmp-basic-place-autocomplete'
);
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');

async function init() {
    // Asynchronously load required libraries from the Google Maps JS API.
    const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
        await Promise.all([
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('core'),
            google.maps.importLibrary('places'),
        ]);

    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;

    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;

    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map,
        collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
    });

    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new Size(0, -10),
    });

    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();

        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector(
            'gmp-place-details-place-request'
        );
        placeDetailsRequest.place = event.place.id;
    });

    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place?.location;
        if (!location) {
            advancedMarkerElement.position = null;
            return;
        }

        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });

    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });

    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();

        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new Circle({
            center: newCenter,
            radius: 10000, // 10km in meters.
        });
    });
}

void init();

सीएसएस

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

gmp-map {
    height: 100%;
}

gmp-basic-place-autocomplete {
    position: absolute;
    height: 30px;
    width: 500px;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
    color-scheme: light;
    border-radius: 10px;
}

एचटीएमएल

<html>
    <head>
        <title>Basic 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
            zoom="12"
            center="37.4220656,-122.0840897"
            map-id="DEMO_MAP_ID">
            <gmp-basic-place-autocomplete
                slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
        </gmp-map>
        <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
        <gmp-place-details-compact
            orientation="horizontal"
            style="
                width: 400px;
                display: none;
                border: none;
                padding: 0;
                margin: 0;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>
            <gmp-place-standard-content></gmp-place-standard-content>
        </gmp-place-details-compact>
    </body>
</html>