Google Maps API ব্যবহার করে আপনি স্থান সম্পর্কিত Photos (ফটো) এবং Reviews (রিভিউ) অ্যাক্সেস করতে পারেন। এই ফিচারগুলি ব্যবহারকারীদের জন্য স্থানগুলোর ছবির বিশদ এবং অন্য ব্যবহারকারীদের মতামত দেখানোর সুযোগ প্রদান করে, যা একটি স্থান বা ব্যবসার সম্পর্কে আরও বিস্তারিত ধারণা প্রদান করে।
এই টিউটোরিয়ালে আমরা আলোচনা করব কীভাবে Place Photos এবং Place Reviews এর তথ্য ব্যবহার করা যায়।
Place Photos এর ব্যবহার
Google Places API এর মাধ্যমে আপনি কোনো নির্দিষ্ট স্থানের ছবি (photos) দেখতে পারেন। এটি ব্যবহৃত হয় যখন আপনি কোনও স্থান (যেমন রেস্টুরেন্ট, সাইটস, বা দোকান) সম্পর্কে ছবি প্রদর্শন করতে চান।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Place Photos Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
#photos {
margin-top: 20px;
}
</style>
</head>
<body>
<h3>Place Photos Example</h3>
<div id="map"></div>
<div id="photos"></div> <!-- ছবি প্রদর্শনের জন্য স্থান -->
<script>
var map, service, infowindow;
function initMap() {
var location = {lat: 23.8103, lng: 90.4125}; // ঢাকার অবস্থান
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
// প্লেস সার্ভিসে অ্যাক্সেস পাওয়া
service = new google.maps.places.PlacesService(map);
var request = {
location: location,
radius: '500', // রেডিয়াস 500 মিটার
type: ['restaurant'] // রেস্টুরেন্ট সার্চ করা হবে
};
service.nearbySearch(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
// প্রথম রেস্টুরেন্ট নির্বাচন
var place = results[0];
// ইনফো উইন্ডো তৈরি করা
infowindow = new google.maps.InfoWindow();
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Rating: ' + place.rating + '</div>');
infowindow.open(map, new google.maps.Marker({
position: place.geometry.location,
map: map
}));
// প্লেস ফটোগুলি দেখানো
if (place.photos) {
for (var i = 0; i < place.photos.length; i++) {
var photoUrl = place.photos[i].getUrl({maxWidth: 400, maxHeight: 400});
var img = document.createElement('img');
img.src = photoUrl;
document.getElementById('photos').appendChild(img);
}
}
}
});
}
</script>
</body>
</html>
ব্যাখ্যা:
places.PlacesService: এটি স্থান সার্ভিস, যা দিয়ে আপনি বিভিন্ন স্থান বা ব্যবসার ছবি এবং অন্যান্য তথ্য অনুসন্ধান করতে পারেন।place.photos[i].getUrl(): এটি একটি ফটো URL প্রদান করে, যা দিয়ে ছবিটি আপনার ওয়েবপেজে প্রদর্শন করা যায়।maxWidthএবংmaxHeight: এগুলি ছবির আকার সীমাবদ্ধ করার জন্য ব্যবহার করা হয়।
Place Reviews এর ব্যবহার
Google Places API ব্যবহার করে আপনি কোনো নির্দিষ্ট স্থান বা ব্যবসার রিভিউ (reviews) দেখতে পারেন। প্রতিটি রিভিউতে ব্যবহারকারীর মন্তব্য এবং রেটিং থাকে, যা স্থান সম্পর্কে আরও বিশদ ধারণা দেয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Place Reviews Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
#reviews {
margin-top: 20px;
}
</style>
</head>
<body>
<h3>Place Reviews Example</h3>
<div id="map"></div>
<div id="reviews"></div> <!-- রিভিউগুলি প্রদর্শনের জন্য স্থান -->
<script>
var map, service, infowindow;
function initMap() {
var location = {lat: 23.8103, lng: 90.4125}; // ঢাকার অবস্থান
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
service = new google.maps.places.PlacesService(map);
var request = {
location: location,
radius: '500',
type: ['restaurant']
};
service.nearbySearch(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var place = results[0];
// ইনফো উইন্ডো
infowindow = new google.maps.InfoWindow();
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Rating: ' + place.rating + '</div>');
infowindow.open(map, new google.maps.Marker({
position: place.geometry.location,
map: map
}));
// প্লেস রিভিউগুলি দেখানো
if (place.reviews) {
for (var i = 0; i < place.reviews.length; i++) {
var review = place.reviews[i];
var reviewText = document.createElement('div');
reviewText.innerHTML = '<strong>' + review.author_name + '</strong>: ' +
review.text + '<br><em>Rating: ' + review.rating + '/5</em>';
document.getElementById('reviews').appendChild(reviewText);
}
}
}
});
}
</script>
</body>
</html>
ব্যাখ্যা:
place.reviews[i]: এটি একটি রিভিউ অবজেক্ট, যা প্রতিটি ব্যবহারকারীর নাম, মন্তব্য এবং রেটিং প্রদান করে।review.author_name: রিভিউ লেখকের নাম।review.text: রিভিউ লেখকের মন্তব্য।review.rating: রিভিউ লেখকের রেটিং।
সারাংশ
এই টিউটোরিয়ালগুলির মাধ্যমে আপনি Place Photos এবং Place Reviews এর ব্যবহার শিখেছেন। Google Places API ব্যবহার করে আপনি স্থান বা ব্যবসার ছবিগুলি এবং ব্যবহারকারীদের রিভিউগুলি প্রদর্শন করতে পারেন। এটি ব্যবহারকারীদের জন্য স্থান সম্পর্কে অতিরিক্ত তথ্য এবং প্রাসঙ্গিক ছবি প্রদর্শন করতে সহায়তা করে, যা তাদের সিদ্ধান্ত গ্রহণ প্রক্রিয়াকে আরও সহজ করে।
Read more
