স্থান পর্যালোচনা

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

এই উদাহরণটি প্রথম স্থান পর্যালোচনা সহ স্থানের বিবরণ পুনরুদ্ধার করে এবং একটি তথ্য উইন্ডোতে তথ্য প্রদর্শন করে।

টাইপস্ক্রিপ্ট

let map: google.maps.Map;
let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA
let infoWindow;
let contentString;

async function initMap() {
    const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
    const { Place, Review } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;

    map = new Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    // Use a place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJpyiwa4Zw44kRBQSGWKv4wgA', // Faneuil Hall Marketplace, Boston, MA
    });

    // Call fetchFields, passing 'reviews' and other needed fields.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location', 'reviews'],
    });

    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
        // Get info for the first review.
        let reviewRating = place.reviews[0].rating;
        let reviewText = place.reviews[0].text;
        let authorName = place.reviews[0].authorAttribution!.displayName;
        let authorUri = place.reviews[0].authorAttribution!.uri;

        // Format the review using HTML.
        contentString =`
            <div id="title"><b>${place.displayName}</b></div>
            <div id="address">${place.formattedAddress}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
        contentString = 'No reviews were found for ' + place.displayName + '.';
    }

    // Create an infowindow to display the review.
    infoWindow = new InfoWindow({
        content: contentString,
        ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });

    // Show the info window.
    infoWindow.open({
        anchor: marker,
        map,
    });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

let map;
let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA
let infoWindow;
let contentString;

async function initMap() {
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { Place, Review } = await google.maps.importLibrary("places");

  map = new Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });

  // Use a place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  });

  // Call fetchFields, passing 'reviews' and other needed fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location", "reviews"],
  });
  // If there are any reviews display the first one.
  if (place.reviews && place.reviews.length > 0) {
    // Get info for the first review.
    let reviewRating = place.reviews[0].rating;
    let reviewText = place.reviews[0].text;
    let authorName = place.reviews[0].authorAttribution.displayName;
    let authorUri = place.reviews[0].authorAttribution.uri;

    // Format the review using HTML.
    contentString = `
            <div id="title"><b>${place.displayName}</b></div>
            <div id="address">${place.formattedAddress}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
  } else {
    contentString = "No reviews were found for " + place.displayName + ".";
  }

  // Create an infowindow to display the review.
  infoWindow = new InfoWindow({
    content: contentString,
    ariaLabel: place.displayName,
  });

  // Add a marker.
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });

  // Show the info window.
  infoWindow.open({
    anchor: marker,
    map,
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Place Reviews</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

একটি জায়গার জন্য পর্যালোচনা পান

একটি স্থানের পর্যালোচনা ডেটা পেতে, আপনার fetchFields() অনুরোধের প্যারামিটারগুলিতে reviews ক্ষেত্র অন্তর্ভুক্ত করুন। ফলস্বরূপ প্লেস ইনস্ট্যান্সে Review অবজেক্টের একটি অ্যারে রয়েছে, যেখান থেকে আপনি প্রয়োজনীয় পর্যালোচনা তথ্য অ্যাক্সেস করতে পারেন।

নিম্নলিখিত উদাহরণটি পর্যালোচনার জন্য একটি স্থানের বিবরণের অনুরোধ করা দেখায়৷

// Use a place ID to create a new Place instance.
const place = new Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});
// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString = `
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = "No reviews were found for " + place.displayName + ".";
}

// Create an infowindow to display the review.
infoWindow = new InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});
index.js

Review উদাহরণে নিম্নলিখিতগুলি রয়েছে:

• একটি AuthorAttribution
• ব্যবহারকারীর দেওয়া rating ।
• publishTime (তারিখ), এবং relativePublishTimeDescription (পর্যালোচনার সময় বর্তমান সময়ের সাথে সম্পর্কিত যেমন "এক মাস আগে")।
• পর্যালোচনা text ।
• textLanguageCode যে ভাষায় পর্যালোচনা লেখা হয়েছে তা নির্দেশ করে।

স্থানটির জন্য সামগ্রিক রেটিং পেতে, Place.rating প্রপার্টি ব্যবহার করুন (আপনাকে অবশ্যই আপনার fetchFields() অনুরোধের প্যারামিটারে rating ফিল্ডের অনুরোধ করতে হবে)।

লেখকের গুণাবলী

আপনি যখন একটি পর্যালোচনা প্রদর্শন করেন, তখন আপনাকে অবশ্যই পর্যালোচনার জন্য লেখকের বৈশিষ্ট্যগুলিও প্রদর্শন করতে হবে৷ বৈশিষ্ট্য ফেরত দিতে AuthorAttribution ক্লাস ব্যবহার করুন। একটি অ্যাট্রিবিউশন লেখকের নাম ( displayName ), তাদের Google Maps প্রোফাইলের জন্য একটি URI ( uri ), এবং লেখকের ছবির জন্য একটি URI ( photoURI ) অন্তর্ভুক্ত করে৷ নিম্নলিখিত স্নিপেট একটি বৈশিষ্ট্যের জন্য displayName , uri , এবং photoURI ফেরত দেখায়৷

  let authorName = place.reviews[0].authorAttribution!.displayName;
  let authorUri = place.reviews[0].authorAttribution!.uri;
  let authorPhoto = place.reviews[0].authorAttribution!.photoURI;