এই দস্তাবেজটি কভার করে যে কীভাবে একটি মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করা যায় এবং ডেটা দৃশ্যমানতা এবং ভিউপোর্ট বিকল্পগুলি নিয়ন্ত্রণ করা যায়। আপনি নিম্নলিখিত উপায়ে এটি করতে পারেন:
- ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
- আপনার নিজের কোডে সরাসরি মানচিত্র শৈলী বিকল্প সেট করুন
ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং দিয়ে মানচিত্রটিকে স্টাইল করুন
আপনার জাভাস্ক্রিপ্ট ভোক্তা ট্রিপ শেয়ারিং মানচিত্রে একটি মানচিত্র শৈলী প্রয়োগ করতে, আপনি যখন JourneySharingMapView
তৈরি করবেন তখন একটি mapId
এবং অন্য যেকোন mapOptions
নির্দিষ্ট করুন৷
নিম্নলিখিত উদাহরণগুলি দেখায় যে কীভাবে একটি মানচিত্র ID সহ একটি মানচিত্রের শৈলী প্রয়োগ করতে হয়।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
টাইপস্ক্রিপ্ট
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 মানচিত্র জাভাস্ক্রিপ্ট 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" }
]
}
]
}
});
টাইপস্ক্রিপ্ট
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();
টাইপস্ক্রিপ্ট
// 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,
...
});
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});