একটি মানচিত্র শৈলী

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এই ডকুমেন্টে একটি ম্যাপের চেহারা ও অনুভূতি কাস্টমাইজ করার এবং ডেটার দৃশ্যমানতা ও ভিউপোর্ট অপশনগুলো নিয়ন্ত্রণ করার পদ্ধতি আলোচনা করা হয়েছে। আপনি নিম্নলিখিত উপায়ে এটি করতে পারেন:

• ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
• আপনার নিজের কোডে সরাসরি ম্যাপ স্টাইলের বিকল্পগুলি সেট করুন

ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং ব্যবহার করে মানচিত্রটি সাজান।

আপনার জাভাস্ক্রিপ্ট কনজিউমার ট্রিপ শেয়ারিং ম্যাপে একটি ম্যাপ স্টাইল প্রয়োগ করতে, JourneySharingMapView তৈরি করার সময় একটি mapId এবং অন্য যেকোনো mapOptions উল্লেখ করুন।

দ্রষ্টব্য: JourneySharingMapView ইনস্ট্যানশিয়েট করার পর আপনি আর mapId পরিবর্তন বা যোগ করতে পারবেন না।

নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে কীভাবে একটি ম্যাপ আইডি ব্যবহার করে ম্যাপ স্টাইল প্রয়োগ করতে হয়।

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

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 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" }
        ]
      }
    ]
  }
});

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

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,
  ...
});

এরপর কী?

মার্কার কাস্টমাইজ করুন