'जगह की फ़ोटो' के नए वर्शन पर माइग्रेट करना

जगह की फ़ोटो की मदद से, अपने वेब पेजों पर अच्छी क्वालिटी की फ़ोटो जोड़ी जा सकती हैं. इस पेज पर, Place क्लास (नया) और PlacesService (लेगसी) में जगह की फ़ोटो की सुविधाओं के बीच के अंतर के बारे में बताया गया है. साथ ही, तुलना करने के लिए कुछ कोड स्निपेट भी दिए गए हैं.

  • PlacesService (लेगसी) किसी भी getDetails() अनुरोध के लिए, PlaceResult ऑब्जेक्ट के हिस्से के तौर पर ज़्यादा से ज़्यादा 10 PlacePhoto ऑब्जेक्ट का कलेक्शन दिखाता है. ऐसा तब होता है, जब अनुरोध में photos फ़ील्ड की जानकारी दी गई हो. textSearch() और nearbySearch() के मामले में, पहली जगह की फ़ोटो डिफ़ॉल्ट रूप से दिखती है. हालांकि, ऐसा तब ही होता है, जब वह उपलब्ध हो.
  • अगर अनुरोध में photos फ़ील्ड दिया गया है, तो Place क्लास, fetchFields() अनुरोध के हिस्से के तौर पर, ज़्यादा से ज़्यादा 10 Photo ऑब्जेक्ट का कलेक्शन दिखाती है.

यहां दी गई टेबल में, Place क्लास और PlacesService के बीच जगह की फ़ोटो के इस्तेमाल में कुछ मुख्य अंतर बताए गए हैं:

PlacesService (लेगसी) Place (नया)
PlacePhoto इंटरफ़ेस Photo क्लास
PlacePhoto, html_attributions को स्ट्रिंग के तौर पर दिखाता है. Photo से AuthorAttribution इंस्टेंस मिलता है.
नतीजों के ऑब्जेक्ट और google.maps.places.PlacesServiceStatus रिस्पॉन्स को मैनेज करने के लिए, मेथड में कॉलबैक का इस्तेमाल करना ज़रूरी है. यह Promises का इस्तेमाल करता है और एसिंक्रोनस तरीके से काम करता है.
पेमेंट के तरीकों की PlacesServiceStatus जांच करना ज़रूरी है. स्थिति की जांच ज़रूरी नहीं है. गड़बड़ी को मैनेज करने के लिए, स्टैंडर्ड तरीके का इस्तेमाल किया जा सकता है.
PlacesService को मैप या div एलिमेंट का इस्तेमाल करके इंस्टैंशिएट किया जाना चाहिए. Place को ज़रूरत पड़ने पर, मैप या पेज एलिमेंट के रेफ़रंस के बिना कहीं भी इंस्टैंशिएट किया जा सकता है.

कोड की तुलना

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

जगहों की जानकारी देने वाली सेवा (लेगसी)

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

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

PlacesService में, लेखक के क्रेडिट

PlacesService, लेखक के एट्रिब्यूशन की ज़रूरी जानकारी को html_attributions स्ट्रिंग के तौर पर दिखाता है. इसमें लेखक की Google प्रोफ़ाइल पेज पर ले जाने वाला यूआरएल होता है. यहां दिए गए स्निपेट में, फ़ोटो के पहले नतीजे के लिए एट्रिब्यूशन डेटा को वापस लाने की प्रोसेस दिखाई गई है.

let attributionUrl = place.photos[0].html_attributions;

ज़्यादा जानें

जगह की कैटगरी (नया)

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

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Place क्लास में, लेखक के क्रेडिट

Place क्लास, लेखक के एट्रिब्यूशन को AuthorAttribution इंस्टेंस के तौर पर दिखाती है. इसमें लेखक का नाम, लेखक की Google प्रोफ़ाइल पेज का यूआरआई, और लेखक की प्रोफ़ाइल फ़ोटो का यूआरआई शामिल होता है. यहां दिए गए स्निपेट में, फ़ोटो के पहले नतीजे के लिए एट्रिब्यूशन डेटा को वापस पाना दिखाया गया है.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

ज़्यादा जानें