এই ডকুমেন্টে ম্যাপের লুক অ্যান্ড ফিল কাস্টমাইজ করা এবং ডেটা দৃশ্যমানতা ও ভিউপোর্ট বিকল্প কন্ট্রোল করার বিষয়গুলি অন্তর্ভুক্ত রয়েছে। আপনি নিম্নলিখিত উপায়ে এটি করতে পারবেন:
- ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করা
- আপনার নিজের কোডে সরাসরি ম্যাপ স্টাইল সংক্রান্ত বিকল্প সেট করুন
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিংয়ের মাধ্যমে ম্যাপ স্টাইল করা
আপনার JavaScript কনজিউমার ট্রিপ শেয়ারিং ম্যাপে ম্যাপ স্টাইল প্রয়োগ করতে, JourneySharingMapView তৈরি করার সময় একটি
mapId এবং
অন্য কোনও
mapOptions
নির্দিষ্ট করুন।
নিচের উদাহরণগুলি থেকে আপনি জানতে পারবেন যে কীভাবে ম্যাপ আইডির সাহায্যে ম্যাপ স্টাইল প্রয়োগ করতে হয়।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
আপনার নিজের কোডে সরাসরি ম্যাপ স্টাইল করা
এছাড়াও, আপনি JourneySharingMapView তৈরি করার সময় ম্যাপের বিকল্প সেট করে ম্যাপ স্টাইলিং কাস্টমাইজ করতে পারবেন। নিচের উদাহরণ থেকে কীভাবে
ম্যাপ বিকল্প ব্যবহার করে ম্যাপের স্টাইল পরিবর্তন করা যায় তা জানুন। আপনি কোন কোন ম্যাপ বিকল্প সেট করতে পারবেন সেই সম্পর্কে আরও জানতে, Google Maps JavaScript API রেফারেন্সে
mapOptions
দেখুন।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
ম্যাপে তথ্য দেখানো
InfoWindow ব্যবহার করে কোনও গাড়ি বা লোকেশন মার্কার সম্পর্কে অতিরিক্ত তথ্য ডিসপ্লে করুন। আরও তথ্যের জন্য, InfoWindow দেখুন।
নিচের উদাহরণে দেখানো হয়েছে কীভাবে InfoWindow তৈরি করে
সেটি কোনও গাড়ির মার্কারের সাথে অ্যাটাচ করতে হয়:
জাভাস্ক্রিপ্ট
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
অটোমেটিক ফিটিং বন্ধ করা
অটোমেটিক ফিটিং বন্ধ করে দিয়ে, আপনি ম্যাপকে গাড়ি ও প্রত্যাশিত রুটের সাথে ভিউপোর্ট অটোমেটিক ফিট করা থেকে আটকাতে পারবেন। আপনি জার্নি শেয়ারিং ম্যাপ ভিউ কনফিগার করার সময় কীভাবে অটোমেটিক ফিটিং বন্ধ করবেন তা নিম্নলিখিত উদাহরণ থেকে জানতে পারবেন।
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});