স্থান বিবরণ

ক্ষেত্রগুলি আনুন

আপনার যদি একটি বিদ্যমান 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 দেখুন।

প্লেস ওভারভিউ কম্পোনেন্ট লক্ষ লক্ষ ব্যবসা সম্পর্কে বিস্তারিত তথ্য প্রদর্শন করে, যার মধ্যে খোলার সময়, তারকা পর্যালোচনা এবং ফটো, পাশাপাশি দিকনির্দেশ এবং অন্যান্য ক্রিয়াগুলি 5 আকার এবং বিন্যাসে একটি পূর্বনির্ধারিত UI-তে রয়েছে৷ এটি এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরির অংশ, গুগল ম্যাপ প্ল্যাটফর্ম থেকে, ওয়েব কম্পোনেন্টের একটি সেট যা ডেভেলপারদের আরও ভাল মানচিত্র এবং অবস্থান বৈশিষ্ট্যগুলি দ্রুত তৈরি করতে সাহায্য করে৷

স্থান সংক্ষিপ্ত বিবরণ কনফিগারার

একটি কাস্টম প্লেস ওভারভিউ কম্পোনেন্ট তৈরি করতে কনফিগারার ব্যবহার করুন এবং একটি ওয়েব পেজে যোগ করতে পারেন এমন কোড তৈরি করুন।

এবার শুরু করা যাক

শুরু করতে, এনপিএম সহ এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরি লোড করুন।

সেরা পারফরম্যান্সের জন্য, একটি প্যাকেজ ম্যানেজার ব্যবহার করুন এবং শুধুমাত্র আপনার প্রয়োজনীয় উপাদানগুলি আমদানি করুন। এই প্যাকেজটি npm-এ @googlemaps/extended-component-library হিসাবে তালিকাভুক্ত। এটি দিয়ে ইনস্টল করুন:

  npm i @googlemaps/extended-component-library;

তারপরে আপনি আপনার অ্যাপ্লিকেশনে যে কোনও উপাদান ব্যবহার করেন তা আমদানি করুন।

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

npm লাইব্রেরি লোড করার পরে, ক্লাউড কনসোল থেকে একটি API কী পান ।

  <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 দেখুন। নমুনা কোডে ব্যবহৃত উপাদানগুলি দেখতে, গিটহাবের উদাহরণ পৃষ্ঠাটি দেখুন।