मैप को शैली में ढालें

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस दस्तावेज़ में, मैप के लुक और फ़ील को पसंद के मुताबिक बनाने का तरीका बताया गया है. साथ ही, इसमें डेटा दिखने और व्यूपोर्ट के विकल्पों को कंट्रोल करने के बारे में भी बताया गया है. ऐसा इन तरीकों से किया जा सकता है:

  • क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करना
  • अपने कोड में सीधे तौर पर मैप स्टाइल के विकल्प सेट करना

क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करके, मैप को स्टाइल करना

JavaScript उपभोक्ता के यात्रा शेयरिंग मैप पर मैप स्टाइल लागू करने के लिए, JourneySharingMapView बनाते समय mapId और कोई अन्य mapOptions तय करें.

यहां दिए गए उदाहरणों में, मैप आईडी की मदद से मैप स्टाइल लागू करने का तरीका बताया गया है.

JavaScript

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 देखें.

JavaScript

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 बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है:

JavaScript

// 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();

अपने-आप फ़िट होने की सुविधा बंद करना

ऑटोमैटिक फ़िटिंग की सुविधा बंद करके, मैप को वाहन और अनुमानित रास्ते के हिसाब से व्यूपोर्ट को अपने-आप फ़िट करने से रोका जा सकता है. यहां दिए गए उदाहरण में, यात्रा की जानकारी शेयर करने की सुविधा के मैप व्यू को कॉन्फ़िगर करते समय, अपने-आप फ़िट होने की सुविधा को बंद करने का तरीका बताया गया है.

JavaScript

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

आगे क्या करना है

मार्कर को पसंद के मुताबिक बनाना