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

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

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

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

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

नया क्या है

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

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

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

ऑटोकंप्लीट विजेट, एक टेक्स्ट इनपुट फ़ील्ड बनाता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) की चुनी गई सूची में जगह के सुझाव देता है. इसके अलावा, 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 Maps के साथ ऑटोमैटिक भरने वाले विजेट का इस्तेमाल भी किया जा सकता है.

मैप में अपने-आप पूरा होने वाला पता बताने वाला विजेट जोड़ने के लिए, नया 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

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

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

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

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

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

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

TypeScript

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

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

मैप पर ऑटोकंप्लीट की सुविधा

इस उदाहरण में, 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.
  //@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.
    //@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

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

जगह चुनने वाले टूल के कॉम्पोनेंट का इस्तेमाल करना

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

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