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

शुरुआती जानकारी

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

कोड पाना

फ़्लटर सैंपल डेटा स्टोर करने की जगह का क्लोन बनाएं या उसे डाउनलोड करें. यह सैंपल कोड, google_maps डायरेक्ट्री में देखा जा सकता है.

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

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

1. Flutter पैकेज के लिए Google Maps इंपोर्ट करें

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

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 ऐप्लिकेशन शुरू करें:

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

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

समस्या हल करना

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

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

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

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

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

2. सिडनी, ऑस्ट्रेलिया पर केंद्रित मैप बनाएँ.

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

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

   @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
     }
   }

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

      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
      ...

5. मार्कर में एक जानकारी विंडो जोड़ें.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   डिफ़ॉल्ट रूप से, Google Maps for Flutter पैकेज, जानकारी विंडो का कॉन्टेंट तब दिखाता है, जब उपयोगकर्ता किसी मार्कर पर टैप करता है. अगर आपको डिफ़ॉल्ट तरीके का इस्तेमाल करना है, तो मार्कर के लिए क्लिक लिसनर जोड़ने की कोई ज़रूरत नहीं है.

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