इस दस्तावेज़ में, मैप के लुक और फ़ील को पसंद के मुताबिक बनाने, डेटा की विज़िबिलिटी को कंट्रोल करने, और व्यूपोर्ट के विकल्पों के बारे में बताया गया है. इसके लिए, ये तरीके अपनाए जा सकते हैं:
- क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करना
- अपने कोड में सीधे मैप की स्टाइल के विकल्प सेट करना
क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके, मैप की स्टाइल बदलना
JavaScript की मदद से, ग्राहक के ट्रिप शेयरिंग मैप पर मैप की स्टाइल लागू करने के लिए,
mapId और
अन्य
mapOptions
की जानकारी दें.JourneySharingMapView
यहां दिए गए उदाहरणों में, मैप आईडी की मदद से मैप की स्टाइल लागू करने का तरीका बताया गया है.
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,
...
});
आगे क्या करना है
मार्कर को पसंद के मुताबिक बनाना