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

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

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

Basic Place Autocomplete एलिमेंट को PlaceAutocompleteElement के मुकाबले आसानी से लागू किया जा सकता है. साथ ही, यह इन मामलों में अलग होता है:

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

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

जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा देने वाले बेसिक एलिमेंट का इस्तेमाल करने के लिए, आपको अपने 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>
index.html

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

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

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

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

इस उदाहरण में, 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 initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    // 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: map,
        collisionBehavior: google.maps.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 google.maps.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;
        // 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 google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters.
        });
    });
}
initMap();
index.js

सीएसएस

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;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Basic Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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>
index.html

सैंपल आज़माएं