परिचय
इस ट्यूटोरियल में, 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 ऐप्लिकेशन को शुरू करें:
- अपने IDE से,
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 ...
- मार्कर में जानकारी विंडो जोड़ें.
डिफ़ॉल्ट रूप से, Flutter पैकेज के लिए Google Maps, जानकारी का कॉन्टेंट दिखाता है विंडो दिखाता है, जब उपयोगकर्ता किसी मार्कर पर टैप करता है. क्लिक लिसनर जोड़ने की ज़रूरत नहीं है इस्तेमाल करें.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 for Flutter पैकेज को इस्तेमाल करने का तरीका भी जान लिया है.