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

फे़च फ़ील्ड

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

इस उदाहरण में, नया Place बनाने के लिए जगह के आईडी का इस्तेमाल किया गया है, displayName और formattedAddress फ़ील्ड का अनुरोध करने के लिए Place.fetchFields को कॉल किया जाता है, मैप में एक मार्कर जोड़ा जाता है, और कुछ डेटा को कंसोल में लॉग किया जाता है.

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

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

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}
index.js

जगह की खास जानकारी देने वाले कॉम्पोनेंट का इस्तेमाल करना

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

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

जगह की खास जानकारी का कॉन्फ़िगरेशन करने वाला

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

शुरू करें

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

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

  npm i @googlemaps/extended-component-library;

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

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

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

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

जगह की खास जानकारी वाले कॉम्पोनेंट के टैग का इस्तेमाल, अपनी पसंद के जगह के आईडी के साथ करें. यह ऑकलैंड में Google के ऑफ़िस का प्लेसहोल्डर है.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

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

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

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