स्थान ऑटोकंप्लीट विजेट (झलक)

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

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

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

नया क्या है

स्थान ऑटोकंप्लीट (झलक) को नीचे दिए गए तरीकों से बेहतर बनाया गया है:

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

अपने-आप पूरा होने वाला विजेट जोड़ें

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

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

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

TypeScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
    google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);

index.js

उदाहरण के तौर पर दिया गया पूरा कोड देखें

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

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

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.js

उदाहरण के तौर पर दिया गया पूरा कोड देखें

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

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

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

देश के अनुसार स्थान खोज प्रतिबंधित करें

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

const pac = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['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 पर सेट करें.

स्थान खोज परिणामों को निश्चित प्रकारों तक सीमित करें

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

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

काम करने वाले टाइप की पूरी सूची देखने के लिए, टेबल 3: अपने-आप पूरे होने वाले अनुरोधों के साथ काम करने वाले टाइप देखें.

स्थान विवरण पाएं

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

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    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-placeselect", async ({ place }) => {
  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-placeselect', 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;
});
index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", 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;
});
index.js

उदाहरण के तौर पर दिया गया पूरा कोड देखें

चुनी गई जगह के लिए जियोकोडिंग परिणाम पाएं

चुनी गई जगह के लिए जियोकोडिंग के नतीजे पाने के लिए, google.maps.Geocoder का इस्तेमाल करके जगह की जानकारी पाएं, जैसा कि इस स्निपेट में दिखाया गया है:

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.064192, lng: -130.605469},
  zoom: 3,
});

const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();

autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
  const results = await geocoder.geocode({place.id});
  marker.setPlace({
    placeId: place.id,
    location: results[0].geometry.location,
  });
});

उदाहरण मैप

इस अनुभाग में इस पृष्ठ पर फ़ीचर किए गए मानचित्रों का पूरा कोड शामिल है.

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

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }] = await Promise.all([
        google.maps.importLibrary("places"),
    ]);
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    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-placeselect', async ({ place }) => {
        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.
  //@ts-ignore
  const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  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-placeselect", async ({ place }) => {
    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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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. 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

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

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

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

    // Add the gmp-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', 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;
    });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", 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;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    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. 
 */
#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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="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. 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

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

ध्यान दें: यह सैंपल ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. लाइब्रेरी से जुड़ी मदद और सुझाव पाने के लिए, README पर जाएं.

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

स्थान पिकर कॉन्फ़िगरेशनकर्ता

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

शुरू करें

शुरू करने के लिए, एक्सटेंडेट कॉम्पोनेंट लाइब्रेरी को एनपीएम से लोड करें.

सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ उन कॉम्पोनेंट को इंपोर्ट करें जिनकी आपको ज़रूरत है. यह पैकेज एनपीएम पर @googlemaps/extended-component-library के तौर पर मौजूद होता है. इसे इससे इंस्टॉल करें:

  npm i @googlemaps/extended-component-library;

इसके बाद, अपने ऐप्लिकेशन में इस्तेमाल किए जाने वाले कॉम्पोनेंट इंपोर्ट करें.

  import '@googlemaps/extended-component-library/place_picker.js';

एनपीएम लाइब्रेरी लोड होने के बाद, Cloud Console से एपीआई पासकोड पाएं.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>

प्लेस पिकर कॉम्पोनेंट टैग का इस्तेमाल करें.

  <gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%">
  </gmpx-place-picker>

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