इस दस्तावेज़ में, मैप के लुक और स्टाइल को पसंद के मुताबिक बनाने के साथ-साथ, डेटा दिखने के तरीके और व्यूपोर्ट के विकल्पों को कंट्रोल करने का तरीका बताया गया है. ऐसा करने के लिए, ये तरीके अपनाएं:
- क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करना
- मैप स्टाइल के विकल्पों को सीधे अपने कोड में सेट करना
क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके, मैप की स्टाइल तय करना
क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके, मैप कॉम्पोनेंट के लुक और स्टाइल को पसंद के मुताबिक बनाएं. Google Maps का इस्तेमाल करने वाले अपने किसी भी ऐप्लिकेशन के लिए, Google Cloud Console में मैप स्टाइल बनाएं और उनमें बदलाव करें. इसके लिए, आपको अपने कोड में कोई बदलाव करने की ज़रूरत नहीं है. ज़्यादा जानकारी के लिए, क्लाउड पर मैप की स्टाइलिंग देखें.
ConsumerMapView
और ConsumerMapFragment
क्लास, दोनों में क्लाउड पर मैप की स्टाइलिंग की सुविधा काम करती है.
क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करने के लिए, पक्का करें कि चुना गया मैप रेंडरर LATEST
हो. यहां दिए गए सेक्शन में, अपने प्रोजेक्ट के साथ क्लाउड-आधारित मैप स्टाइल का इस्तेमाल करने के उदाहरण दिए गए हैं.
ConsumerMapView
ConsumerMapView
में क्लाउड-आधारित मैप स्टाइल का इस्तेमाल करने के लिए, mapId
फ़ील्ड को GoogleMapOptions
पर सेट करें और GoogleMapOptions
को getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions) या getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions) पर पास करें
उदाहरण
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
ConsumerMapFragments में, क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करने के दो तरीके हैं:
- स्टैटिक तौर पर, एक्सएमएल के साथ.
newInstance
के साथ डाइनैमिक तौर पर.
एक्सएमएल के साथ स्टैटिक तौर पर
ConsumerMapFragment
में एक्सएमएल के साथ क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करने के लिए, तय किए गए mapId
के साथ map:mapId
एक्सएमएल एट्रिब्यूट जोड़ें. नीचे दिया गया उदाहरण देखें:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
newInstance
के साथ डाइनैमिक तौर पर
ConsumerMapFragment
में newInstance
के साथ क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करने के लिए, mapId
फ़ील्ड को GoogleMapOptions
पर सेट करें और GoogleMapOptions
को newInstance
पर पास करें. नीचे दिया गया उदाहरण देखें:
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
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,
...
});