Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

मार्कर की मदद से मैप जोड़ना

परिचय

मार्कर वाले मैप का उदाहरण

इस ट्यूटोरियल में, अपने Flutter ऐप्लिकेशन में Google मैप जोड़ने का तरीका बताया गया है. मैप में किसी जगह की जानकारी देने के लिए, मार्कर शामिल होता है. इसे पिन भी कहा जाता है.

कोड पाना

Flutter सैंपल रिपॉज़िटरी को क्लोन या डाउनलोड करें. सैंपल कोड, google_maps डायरेक्ट्री में मिल सकता है.

डेवलपमेंट प्रोजेक्ट सेट अप करना

इस विषय के बारे में आगे बढ़ने से पहले, पक्का करें कि आपने Flutter प्रोजेक्ट सेट अप करना गाइड में बताए गए चरण पूरे कर लिए हों.

1. Google Maps for Flutter पैकेज इंपोर्ट करना

अपने पसंदीदा आईडीई में main.dart फ़ाइल खोलें.
पुष्टि करें कि फ़ाइल में यह इंपोर्ट स्टेटमेंट जोड़ा गया है:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. अपने Flutter ऐप्लिकेशन में Google Maps जोड़ना

Scaffold विजेट में, बॉडी के तौर पर GoogleMap विजेट जोड़ें.

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

markerId विकल्प से, आपके मार्कर को लेबल किया जाता है.
position विकल्प से यह तय होता है कि आपके मैप पर मार्कर कहां दिखेगा.

3. ऐप्लिकेशन बनाना और उसे चलाना

इनमें से किसी एक विकल्प का इस्तेमाल करके, Flutter ऐप्लिकेशन शुरू करें:

अपने आईडीई में, Run बटन पर क्लिक करें
कमांड लाइन से, flutter run चलाएं.

आपको ऑस्ट्रेलिया के पूर्वी तट पर मौजूद सिडनी शहर का मैप दिखेगा. इसमें सिडनी के बीच में एक मार्कर होगा. यह इस पेज पर मौजूद इमेज की तरह दिखेगा.

समस्या का हल

अगर आपको मैप नहीं दिखता है, तो पक्का करें कि आपने एपीआई पासकोड हासिल कर लिया हो और उसे ऐप्लिकेशन में जोड़ दिया हो.
अगर आपने एपीआई पासकोड पर पाबंदी लगाने के लिए, iOS बंडल आइडेंटिफ़ायर का इस्तेमाल किया है, तो पासकोड में बदलाव करके ऐप्लिकेशन के लिए बंडल आइडेंटिफ़ायर जोड़ें: com.google.examples.map-with-marker.
पक्का करें कि आपके पास बढ़िया वाई-फ़ाई या जीपीएस कनेक्शन हो.
लॉग देखने और ऐप्लिकेशन को डीबग करने के लिए, Flutter DevTools का इस्तेमाल करें.
Flutter ऐप्लिकेशन चलाने के बारे में ज़्यादा जानें.

4. कोड को समझना

यह कोड GitHub पर मिल सकता है.

ज़रूरी पैकेज इंपोर्ट करें और ऐप्लिकेशन को शुरू करें.

   import 'package:flutter/material.dart';
   import 'package:google_maps_flutter/google_maps_flutter.dart';

   void main() => runApp(const MyApp());

   class MyApp extends StatefulWidget {
   const MyApp({super.key});

   @override
      State<MyApp> createState() => _MyAppState();
   }

ऑस्ट्रेलिया के सिडनी शहर को केंद्र में रखकर मैप बनाएं.

class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }

किसी ऐप्लिकेशन में मैप दिखाने के लिए ज़रूरी विजेट जोड़ें.

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 11.0,
            ), // CameraPosition
        ), // GoogleMap
      ), // Scaffold
    ); // MaterialApp
  }
}

अपने ऐप्लिकेशन में विजेट जोड़ने के लिए, मार्कर विजेट जोड़ें.

   body: GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
         target: _center,
         zoom: 11.0,
      ),
      markers: {
         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
            ), // Marker
      }, // markers
   ), // GoogleMap
   ...

मार्कर में जानकारी विंडो जोड़ें.
```
      const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
```
डिफ़ॉल्ट रूप से, जब उपयोगकर्ता किसी मार्कर पर टैप करता है, तो Flutter पैकेज के लिए Google Maps, जानकारी वाली विंडो का कॉन्टेंट दिखाता है. अगर आपको डिफ़ॉल्ट ऐक्शन और सेटिंग का इस्तेमाल करना है, तो मार्कर के लिए क्लिक लिसनर जोड़ने की ज़रूरत नहीं है.

बधाई हो! आपने एक Flutter ऐप्लिकेशन बनाया है, जो Google मैप दिखाता है. इसमें किसी खास जगह को दिखाने के लिए मार्कर और जानकारी विंडो में अतिरिक्त जानकारी दी गई है. आपने Google Maps for Flutter पैकेज इस्तेमाल करने का तरीका भी सीखा.