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

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

नया क्या है

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

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

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

किसी वेब पेज में अपने-आप पूरा होने वाला विजेट जोड़ने के लिए, एक नया google.maps.places.PlaceAutocompleteElement बनाएं और उसे पेज में जोड़ें. ऐसा करने का तरीका यहां दिए गए उदाहरण में दिखाया गया है:

TypeScript

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

JavaScript

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

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

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

किसी मैप में अपने-आप पूरा होने वाला विजेट जोड़ने के लिए, एक नया google.maps.places.PlaceAutocompleteElement इंस्टेंस बनाएं. इसके बाद, PlaceAutocompleteElement को div में जोड़ें और उसे मैप पर कस्टम कंट्रोल के तौर पर पुश करें. इसे यहां दिए गए उदाहरण में दिखाया गया है:

TypeScript

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

// 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();
});index.ts

JavaScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// 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();
});index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

जगह के हिसाब से खोज के नतीजों में पक्षपात

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

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

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

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

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

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

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

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

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

TypeScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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

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

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

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

TypeScript

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

    // 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);
    }

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

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

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // 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);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.js

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

उदाहरण के तौर पर मैप

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

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

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}
initMap();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>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- 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

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

JSFiddle.net

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

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    infoWindow = new google.maps.InfoWindow({});

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

      // 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);
      }

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      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,
    });
}

initMap();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // 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);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        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,
    });
}
initMap();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: large;
    font-weight: bold;
}

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>
        <!-- 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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>index.html

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

JSFiddle.net

Place Picker कॉम्पोनेंट का इस्तेमाल करना

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

कस्टम प्लेस पिकर कॉम्पोनेंट के लिए एम्बेड किया जा सकने वाला कोड बनाने के लिए, प्लेस पिकर कॉन्फ़िगरेशन टूल का इस्तेमाल करें. इसके बाद, इसे React और Angular जैसे लोकप्रिय फ़्रेमवर्क या किसी भी फ़्रेमवर्क के साथ इस्तेमाल करने के लिए एक्सपोर्ट करें.

ऑटोकंप्लीट (नई) सुविधा के लिए ऑप्टिमाइज़ेशन

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

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

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

जगह की जानकारी को सीमित करना

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

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

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

नया क्या है

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

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

TypeScript

JavaScript

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

TypeScript

JavaScript

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

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

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

जगह के हिसाब से खोज के नतीजों में पक्षपात

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

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

TypeScript

JavaScript

TypeScript

JavaScript

उदाहरण के तौर पर मैप

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

Place Picker कॉम्पोनेंट का इस्तेमाल करना

ऑटोकंप्लीट (नई) सुविधा के लिए ऑप्टिमाइज़ेशन

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

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

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

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

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

हां

नहीं

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

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

जगह की जानकारी को सीमित करना