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

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

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा, Maps JavaScript API में Places Library की एक सुविधा है. ऑटोकंप्लीट की सुविधा का इस्तेमाल करके, अपने ऐप्लिकेशन में Google Maps के खोज फ़ील्ड की तरह, शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा दी जा सकती है.

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

ऑटोकंप्लीट प्रोग्रामैटिक इंटरफ़ेस

यहां दी गई टेबल में, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के प्रोग्रामैटिक इंटरफ़ेस के इस्तेमाल में, Places Autocomplete Service (लेगसी) और Autocomplete Data API (नया) के बीच कुछ मुख्य अंतर बताए गए हैं:

PlacesService (लेगसी) Place (नया)
Places Autocomplete Service के बारे में जानकारी Autocomplete Data (नया) के बारे में जानकारी
AutocompletionRequest AutocompleteRequest
AutocompleteService.getPlacePredictions AutocompleteSuggestion.fetchAutocompleteSuggestions
AutocompletePrediction PlacePrediction
इन तरीकों के लिए, नतीजों के ऑब्जेक्ट और PlacesServiceStatus जवाब को मैनेज करने के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है. यह Promises का इस्तेमाल करता है और एसिंक्रोनस तरीके से काम करता है.
इन तरीकों के लिए, PlacesServiceStatus की जांच करना ज़रूरी है. स्टेटस की जांच करना ज़रूरी नहीं है. इसमें स्टैंडर्ड तरीके से गड़बड़ी को ठीक किया जा सकता है. ज़्यादा जानें.
जगह की जानकारी के फ़ील्ड, विकल्प के तौर पर सेट किए जाते हैं जब Autocomplete इंस्टेंस बनाया जाता है. जगह की जानकारी के फ़ील्ड, fetchFields() को कॉल करने के बाद सेट किए जाते हैं.
क्वेरी के सुझावों की सुविधा उपलब्ध है. यह सुविधा सिर्फ़ SearchBox में उपलब्ध है. Autocomplete क्लास में, क्वेरी के सुझावों की सुविधा उपलब्ध नहीं है.
यह सुविधा, जगह के टाइप और जगह की जानकारी के फ़ील्ड के तय सेट तक ही सीमित है. इसमें, जगह के टाइप और जगह की जानकारी के फ़ील्ड के ज़्यादा विकल्प उपलब्ध हैं.

लेगसी और नए, दोनों ऑटोकंप्लीट एपीआई में इनका इस्तेमाल किया जाता है:

कोड की तुलना (प्रोग्रामैटिक)

इस सेक्शन में, ऑटोकंप्लीट के कोड की तुलना की गई है. इससे, प्रोग्रामैटिक इंटरफ़ेस के लिए, Places Service और Place क्लास के बीच के अंतर को समझने में मदद मिलेगी.

ऑटोकंप्लीट के सुझाव पाना (लेगसी)

लेगसी Places Service की मदद से, ऑटोकंप्लीट के सुझाव प्रोग्राम के हिसाब से पाए जा सकते हैं. इससे, Autocomplete क्लास की तुलना में, यूज़र इंटरफ़ेस (यूआई) पर ज़्यादा कंट्रोल मिलता है. यहां दिए गए उदाहरण में, "par" के लिए एक ही अनुरोध किया गया है. इसमें AutocompletionRequest शामिल है. इसमें इनपुट वैल्यू और सुझाव को बेहतर बनाने के लिए, सीमाओं का एक सेट शामिल है. इस उदाहरण में, AutocompletePrediction इंस्टेंस की सूची दिखाई गई है. साथ ही, हर इंस्टेंस के लिए ब्यौरा भी दिखाया गया है. उदाहरण के तौर पर दिए गए फ़ंक्शन में, एक सेशन टोकन भी बनाया जाता है और इसे अनुरोध पर लागू किया जाता है.

function init() {
  const placeInfo = document.getElementById("prediction");
  const service = new google.maps.places.AutocompleteService();
  const placesService = new google.maps.places.PlacesService(placeInfo);
  var sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    bounds: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  }

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const displaySuggestions = function (predictions, status) {
    // Check the status of the Places Service.
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });

    const placeRequest = {
      placeId: predictions[0].place_id,
      fields: ["name", "formatted_address"],
    };

    placesService.getDetails(placeRequest, (place, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK && place) {
        placeInfo.textContent = `
          First predicted place: ${place.name} at ${place.formatted_address}`
      }
    });

  };

  // Show the results of the query.
  service.getPlacePredictions(request, displaySuggestions);
}

ऑटोकंप्लीट के सुझाव पाना (नया)

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

async function init() {
  let sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    locationBias: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  };

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const { suggestions } =
    await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

  const resultsElement = document.getElementById("results");

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    const listItem = document.createElement("li");

    listItem.appendChild(
      document.createTextNode(placePrediction.text.text),
    );

    resultsElement.appendChild(listItem);
  }

  // Show the first predicted place.
  let place = suggestions[0].placePrediction.toPlace();

  await place.fetchFields({
    fields: ["displayName", "formattedAddress"],
  });

  const placeInfo = document.getElementById("prediction");

  placeInfo.textContent = `
    First predicted place: ${place.displayName} at ${place.formattedAddress}`
}

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

यहां दी गई टेबल में, Places Service (लेगसी) और Place क्लास (नया) के बीच, ऑटोकंप्लीट विजेट के इस्तेमाल में कुछ मुख्य अंतर बताए गए हैं:

Places Service (लेगसी) Place (नया)
Autocomplete क्लास जगह के सुझावों के लिए. PlaceAutocompleteElement क्लास जगह के सुझावों के लिए.
SearchBox क्लास
क्वेरी के सुझावों के लिए. 		Autocomplete क्लास में, क्वेरी के सुझावों की सुविधा उपलब्ध नहीं है.
सिर्फ़ डिफ़ॉल्ट इनपुट प्लेसहोल्डर टेक्स्ट को स्थानीय भाषा में बदला जाता है. टेक्स्ट इनपुट प्लेसहोल्डर, सुझावों की सूची का लोगो, और जगह के सुझाव सभी को स्थानीय भाषा में बदला जा सकता है.
विजेट, खोज को तय सीमाओं तक सीमित (बेहतर) करने के लिए, setBounds() या autocomplete.bindTo() का इस्तेमाल करता है. साथ ही, नतीजों को तय सीमाओं तक सीमित करने के लिए, strictBounds का इस्तेमाल करता है. विजेट, नतीजों को तय सीमाओं तक बेहतर बनाने के लिए, locationBias प्रॉपर्टी का इस्तेमाल करता है. साथ ही, खोज को तय सीमाओं तक सीमित करने के लिए, locationRestriction प्रॉपर्टी का इस्तेमाल करता है.
विजेट को सिर्फ़ स्टैंडर्ड एचटीएमएल इनपुट एलिमेंट का इस्तेमाल करके इंटिग्रेट किया जा सकता है. विजेट को स्टैंडर्ड एचटीएमएल इनपुट एलिमेंट या a gmp-place-autocomplete एलिमेंट का इस्तेमाल करके इंटिग्रेट किया जा सकता है.
विजेट का इस्तेमाल करते समय, उपयोगकर्ता ऐसे अनुरोध कर सकते हैं जो मान्य न हों. उदाहरण के लिए, "bisneyland". ऐसे मामलों को साफ़ तौर पर मैनेज करना ज़रूरी है. विजेट, सिर्फ़ दिए गए सुझावों के लिए नतीजे दिखाएगा. साथ ही, यह किसी भी वैल्यू के लिए अनुरोध नहीं कर सकता. इसलिए, संभावित तौर पर अमान्य अनुरोधों को मैनेज करने की ज़रूरत नहीं है.
लेगसी PlaceResult इंस्टेंस दिखाता है. `Place` इंस्टेंस दिखाता है.Place
जगह की जानकारी के फ़ील्ड, Autocomplete ऑब्जेक्ट के लिए विकल्प के तौर पर सेट किए जाते हैं. जगह की जानकारी के फ़ील्ड तब सेट किए जाते हैं, जब उपयोगकर्ता कोई विकल्प चुनता है और fetchFields() को कॉल किया जाता है.
यह सुविधा, जगह के टाइप और जगह की जानकारी के फ़ील्ड के तय सेट तक ही सीमित है. इसमें, जगह के टाइप और जगह की जानकारी के फ़ील्ड के ज़्यादा विकल्प उपलब्ध हैं.

कोड की तुलना (विजेट)

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

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

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

  • Autocomplete विजेट कंस्ट्रक्टर, दो आर्ग्युमेंट लेता है:
    • text टाइप का एचटीएमएल input एलिमेंट. यह इनपुट फ़ील्ड है. ऑटोकंप्लीट की सुविधा इस पर नज़र रखेगी और इसके नतीजों को इससे जोड़ेगी.
    • एक वैकल्पिक AutocompleteOptions आर्ग्युमेंट. इसमें, क्वेरी को सीमित करने के लिए ज़्यादा विकल्प तय किए जा सकते हैं.
  • सीमाएं सेट करने के लिए, autocomplete.bindTo() को कॉल करके, Autocomplete इंस्टेंस को मैप से साफ़ तौर पर जोड़ा जा सकता है.
  • ऑटोकंप्लीट के विकल्पों में, जगह की जानकारी के फ़ील्ड तय करें.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapTypeControl: false,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  const autocomplete = new google.maps.places.Autocomplete(input, options);

  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });
}

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

Place क्लास, PlaceAutocompleteElement, उपलब्ध कराती है. यह HTMLElement की सबक्लास है. यह एक यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट उपलब्ध कराती है, जिसे मैप में, मैप कंट्रोल के तौर पर जोड़ा जा सकता है या सीधे वेब पेज में एम्बेड किया जा सकता है. यहां दिए गए कोड के उदाहरण में, PlaceAutocompleteElement विजेट को मैप कंट्रोल के तौर पर एम्बेड करने का तरीका दिखाया गया है.

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

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

लागू करने के तरीके में ये मुख्य अंतर शामिल हैं:

  • PlaceAutocompleteElement अपना इनपुट फ़ील्ड उपलब्ध कराता है. इसे एचटीएमएल या JavaScript का इस्तेमाल करके सीधे पेज में डाला जाता है. इसके लिए, मौजूदा इनपुट एलिमेंट उपलब्ध नहीं कराया जाता.
  • Autocomplete क्लास में, क्वेरी के सुझावों की सुविधा उपलब्ध नहीं है.
  • PlaceAutocompleteElement को PlaceAutocompleteElementOptions का इस्तेमाल करके बनाया जाता है.
    • जगह की जानकारी के फ़ील्ड, चुनने के समय तय किए जाते हैं. यह तब होता है, जब fetchFields() को कॉल किया जाता है.
  • सीमाएं सेट करने के लिए, locationBounds या locationRestriction विकल्प का इस्तेमाल करें.
let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  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,
  });

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

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

  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-select listener, and display the results on the map.
  placeAutocomplete.addEventListener("gmp-select", async ( event ) => {
    const place = event.placePrediction.toPlace();
    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,
  });
}