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

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

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

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

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

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

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

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

किसी वेब पेज में 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);

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

किसी मैप में बेसिक ऑटोकंप्लीट एलिमेंट जोड़ने के लिए, एक नया BasicPlaceAutocompleteElement इंस्टेंस बनाएं. इसके बाद, इसे div में जोड़ें और मैप पर कस्टम कंट्रोल के तौर पर पुश करें. यहां दिए गए उदाहरण में, इसे दिखाया गया है:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

डिफ़ॉल्ट रूप से, जगह के नाम अपने-आप भरने की बुनियादी सुविधा, सभी तरह की जगहों के नाम दिखाती है. हालांकि, यह सुविधा, उपयोगकर्ता की जगह के आस-पास की जगहों के नाम दिखाने पर ज़्यादा फ़ोकस करती है. 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 देखें.

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

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

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

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

अगले उदाहरण में, सुनने वाला व्यक्ति जगह की जानकारी का अनुरोध करता है और उसे मैप पर दिखाता है.

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });

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

JavaScript

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

सीएसएस

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

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

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
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>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

    <!-- 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>
  </body>
</html>
index.html

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