সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন
এই উদাহরণটি প্রথম স্থান পর্যালোচনা সহ স্থানের বিবরণ পুনরুদ্ধার করে এবং একটি তথ্য উইন্ডোতে তথ্য প্রদর্শন করে।
টাইপস্ক্রিপ্ট
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();
জাভাস্ক্রিপ্ট
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();
সিএসএস
/* * 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; }
এইচটিএমএল
<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>
নমুনা চেষ্টা করুন
একটি জায়গার জন্য পর্যালোচনা পান
একটি স্থানের পর্যালোচনা ডেটা পেতে, আপনার 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, });
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;