मार्कर कस्टमाइज़ करें
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
इस दस्तावेज़ में, उपभोक्ताओं के लिए वेब पर आधारित शिपमेंट ट्रैक करने वाले ऐप्लिकेशन में इस्तेमाल किए जाने वाले मैप में, वाहन और जगह के मार्कर को पसंद के मुताबिक बनाने का तरीका बताया गया है.
JavaScript Consumer SDK की मदद से, मैप में जोड़े गए दो तरह के मार्कर के लुक और फ़ील को अपनी पसंद के मुताबिक बनाया जा सकता है:
ऐसा करने के दो तरीके हैं:
- सबसे आसान: एक ही तरह के सभी मार्कर पर लागू करने के लिए,
MarkerOptions ऑब्जेक्ट तय करें. इसके बाद, Consumer SDK दो स्थितियों में स्टाइलिंग लागू करता है: मैप में मार्कर जोड़ने से पहले और मार्कर के लिए इस्तेमाल किए गए डेटा में बदलाव होने पर.
- ज़्यादा बेहतर: पसंद के मुताबिक बनाने के लिए फ़ंक्शन तय करें. कस्टमाइज़ेशन फ़ंक्शन की मदद से, डेटा के आधार पर मार्कर की स्टाइल तय की जा सकती है. साथ ही, मार्कर में इंटरैक्टिविटी जोड़ी जा सकती है. जैसे, क्लिक हैंडलिंग. खास तौर पर, Consumer SDK, ऑब्जेक्ट के टाइप के बारे में डेटा को पसंद के मुताबिक बनाने की सुविधा को पास करता है. यह मार्कर, वाहन या डेस्टिनेशन को दिखाता है. इससे मार्कर की स्टाइलिंग को मार्कर एलिमेंट की मौजूदा स्थिति के आधार पर बदला जा सकता है. उदाहरण के लिए, डेस्टिनेशन तक पहुंचने के लिए बचे हुए स्टॉप की संख्या. आपके पास Fleet Engine के बाहर के सोर्स से मिले डेटा को भी शामिल करने का विकल्प होता है. साथ ही, उस जानकारी के आधार पर मार्कर को स्टाइल किया जा सकता है.
सामान्य उदाहरण: MarkerOptions का इस्तेमाल करना
यहां दिए गए उदाहरण में, MarkerOptions ऑब्जेक्ट की मदद से, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. इस उदाहरण में, मार्कर की ओपैसिटी को 50% पर सेट किया गया है.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
ऐडवांस उदाहरण: कस्टम फ़ंक्शन का इस्तेमाल करना
यहां दिए गए उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. इससे, वाहन के स्टॉप पर पहुंचने से पहले, उसके बाकी स्टॉप की संख्या दिखती है.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
मार्कर में क्लिक हैंडलिंग जोड़ना
किसी भी मार्कर में क्लिक हैंडलिंग की सुविधा जोड़ी जा सकती है. उदाहरण के लिए, वाहन के मार्कर के लिए यहां दिया गया उदाहरण देखें.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
मार्कर के लिए ज़्यादा जानकारी दिखाना
किसी वाहन या जगह के मार्कर के बारे में ज़्यादा जानकारी दिखाने के लिए, InfoWindow का इस्तेमाल किया जा सकता है. यहां दिए गए उदाहरण में, InfoWindow बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
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.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
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();
आगे क्या करना है
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2025-09-05 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-09-05 (UTC) को अपडेट किया गया."],[[["\u003cp\u003eCustomize the appearance of delivery vehicle and destination markers on your shipment tracking map using the JavaScript Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eAchieve basic styling by applying \u003ccode\u003eMarkerOptions\u003c/code\u003e to define marker attributes like opacity.\u003c/p\u003e\n"],["\u003cp\u003eImplement dynamic styling and interactivity by using customization functions that adapt marker appearance based on real-time data like remaining stops.\u003c/p\u003e\n"],["\u003cp\u003eEnhance marker interaction with click handling for triggering actions when users click on them.\u003c/p\u003e\n"],["\u003cp\u003eDisplay extra information with \u003ccode\u003eInfoWindow\u003c/code\u003e objects to provide users with context about a specific marker, such as remaining stops for a delivery vehicle.\u003c/p\u003e\n"]]],[],null,["This document covers how to customize vehicle and location markers in the map\nyou use for your web-based shipment tracking app for consumers.\n\nWith the JavaScript Consumer SDK, you can customize the look and feel of two\ntypes of markers added to the map:\n\n- **Delivery vehicle markers** : use [`deliveryVehicleMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.deliveryVehicleMarkerCustomization)\n- **Destination markers** : use [`destinationMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.destinationMarkerCustomization)\n\nYou do this in one of two ways:\n\n- **Simplest** : Specify a [`MarkerOptions`](/maps/documentation/javascript/reference/marker#MarkerOptions) object to apply to all markers of the same type. The Consumer SDK then applies the styling in two situations: before adding the markers to the map, and when the data used for the markers have changed.\n- **More advanced**: Specify a customization function. Customization functions allow for styling of the markers based on data, as well as adding interactivity to markers, such as click handling. Specifically, the Consumer SDK passes data to the customization function about the type of object the marker represents: vehicle or destination. This then allows marker styling to change based on the current state of the marker element itself; for example, the number of planned stops remaining until the destination. You can even join against data from sources outside Fleet Engine and style the marker based on that information.\n\nSimple example: use `MarkerOptions`\n\nThe following example shows how to configure a vehicle marker's styling with a\n`MarkerOptions` object. This example sets the marker opacity to 50%.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdvanced example: use a customization function\n\nThe following example shows how to configure a vehicle marker's styling to\ndisplay the remaining stop count for the vehicle before reaching the stop for\nthe scheduled task.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n var stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n const stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdd click handling to markers\n\nYou can add click handling to any marker, such as in the following example\nfor a vehicle marker.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nDisplay additional information for markers\n\nYou can use an [`InfoWindow`](/maps/documentation/javascript/infowindows) to display additional information about a\nvehicle or location marker. The following example creates an\n`InfoWindow` and attaches it to a vehicle marker:\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', e =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nWhat's next\n\n- [Customize polylines](/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/customize-polylines)"]]
