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

फ़ील्ड फ़ेच करें

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

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

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 से लिया है, जो वेब कॉम्पोनेंट का एक सेट है, जो बेहतर मैप बनाने में डेवलपर की मदद करता है और जगह की जानकारी को और भी तेज़ी से ऐक्सेस किया जा सकता है.

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

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

शुरू करें

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

सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ उन कॉम्पोनेंट को इंपोर्ट करें जिनकी आपको ज़रूरत है. यह पैकेज npm पर के रूप में सूचीबद्ध है @googlemaps/extended-component-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 पर उदाहरण पेज है.