Flutter प्रोजेक्ट सेट अप करने से पहले, पक्का करें कि आपने ज़रूरी शर्तें पूरी कर ली हैं शुरू करने से पहलेमें जाने के चरण में देखें. चालू करने के बाद बिलिंग एपीआई पासकोड बनाने के बाद, उस Flutter प्रोजेक्ट को सेट अप किया जा सकता है जिसका इस्तेमाल अपना ऐप्लिकेशन डेवलप करें.
पहला चरण: ज़रूरी सॉफ़्टवेयर इंस्टॉल करना
Google Maps for Flutter पैकेज का इस्तेमाल करके प्रोजेक्ट बनाने के लिए, आपको Flutter SDK टूल इस्तेमाल करें और अपने टारगेट प्लैटफ़ॉर्म के लिए डेवलपमेंट एनवायरमेंट को सेटअप करें. Flutter इंस्टॉलेशन के बारे में जानें गाइड पढ़ें.
दूसरा चरण: नए प्रोजेक्ट में Google Maps for Flutter पैकेज इंस्टॉल करना
Flutter, Google Maps for Flutter पैकेज को Flutter प्लगिन के रूप में ऑफ़र करता है.
Flutter प्रोजेक्ट बनाएं और Maps प्लगिन जोड़ें.
-
`फ़्लटर बनाएं` का इस्तेमाल करके, नया Flutter प्रोजेक्ट बनाएं:
आपका आवेदन कोडflutter create google_maps_in_flutter --platforms=android,ios,web
Creating project google_maps_in_flutter... [Listing of created files elided] Wrote 127 files. All done!google_maps_in_flutter/lib/main.dart
में है. अपना ऐप्लिकेशन चलाने के लिए, यह टाइप करें: यह ऐप्लिकेशन iOS, Android, और वेब को टारगेट करता है. Google Maps SDK फ़िलहाल ब्राउज़र के बाहर के डेस्कटॉप ऐप्लिकेशन पर काम नहीं करता.cd google_maps_in_flutter
flutter run
-
इस प्रोजेक्ट में Google Maps for Flutter पैकेज प्लगिन जोड़ें.
flutter pub add google_maps_flutter
Resolving dependencies... [Listing of dependencies elided] Changed 14 dependencies!
तीसरा चरण: प्लैटफ़ॉर्म का वर्शन सेट करना
Android
Android के लिए, SDK टूल का कम से कम वर्शन सेट करें.
- अपने पसंदीदा IDE में
android/app/build.gradle
कॉन्फ़िगरेशन फ़ाइल खोलें. android.defaultConfig.minSdkVersion
की वैल्यू को21
में बदलें:android { //... defaultConfig { applicationId "com.example.google_maps_in_flutter" minSdkVersion 21 // Set to 21 targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName } //... }
defaultConfig
को कॉन्फ़िगर करते समय, अपना यूनीक ApplicationID डालें.- फ़ाइल सेव करें और अपने प्रोजेक्ट में किए गए बदलावों को Gradle के साथ सिंक करें.
iOS
iOS प्लैटफ़ॉर्म का सबसे कम वर्शन सेट करें.
- अपने पसंदीदा आईडीई में
ios/Podfile
कॉन्फ़िगरेशन फ़ाइल खोलें. - इस Podfile की शुरुआत में ये लाइनें जोड़ें:
# Set platform to 14.0 to enable latest Google Maps SDK platform :ios, '14.0'
चौथा चरण: प्रोजेक्ट में एपीआई पासकोड जोड़ना
शुरू करने से पहले, आपने अपने ऐप्लिकेशन के लिए एक एपीआई पासकोड जनरेट किया था. अब जोड़ें आपके Flutter प्रोजेक्ट की कुंजी है. Flutter के लिए आपको यह एपीआई पासकोड जोड़ना चाहिए टारगेट किए गए सभी प्लैटफ़ॉर्म: iOS, Android, और वेब.
यहां दिए गए उदाहरणों में, YOUR_API_KEY
को अपने एपीआई पासकोड से बदलें.
Android
इस टास्क को आसान बनाने के लिए, हमारा सुझाव है कि आप Android के लिए सीक्रेट ग्रेडल प्लग इन.
अपने Google Maps प्रोजेक्ट में Android के लिए Secrets Gradle प्लग इन इंस्टॉल करने के लिए:
-
Android Studio में, अपना टॉप-लेवल
build.gradle.kts
याbuild.gradle
खोलें फ़ाइल को डाउनलोड करें और निम्न कोड कोdependencies
तत्व मेंbuildscript
.Kotlin
buildscript { dependencies { classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1") } }
ग्रूवी
buildscript { dependencies { classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1" } }
-
अपनी मॉड्यूल-लेवल
build.gradle.kts
याbuild.gradle
फ़ाइल खोलें और जोड़ेंplugins
एलिमेंट के लिए नीचे दिया गया कोड.Kotlin
plugins { // ... id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") }
ग्रूवी
plugins { // ... id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' }
- अपने मॉड्यूल-लेवल की
build.gradle.kts
याbuild.gradle
फ़ाइल में, पक्का करें कि वहtargetSdk
औरcompileSdk
सेट हैं 34 तक. - फ़ाइल सेव करें और Gredle के साथ प्रोजेक्ट सिंक करते हैं.
-
अपनी शीर्ष-स्तरीय डायरेक्ट्री में
secrets.properties
फ़ाइल खोलें, और फिर जोड़ें .YOUR_API_KEY
को अपनी एपीआई पासकोड से बदलें. अपनी कुंजी इस फ़ाइल में सेव करें क्योंकि वर्शन कंट्रोल मेंsecrets.properties
की जांच नहीं की गई है सिस्टम.MAPS_API_KEY=YOUR_API_KEY
- फ़ाइल सेव करें.
-
अपनी टॉप-लेवल डायरेक्ट्री में
local.defaults.properties
फ़ाइल बनाएं. फ़ोल्डर कोsecrets.properties
फ़ाइल के रूप में चुनकर यह कोड जोड़ें.MAPS_API_KEY=DEFAULT_API_KEY
इस फ़ाइल का मकसद, एपीआई पासकोड के लिए बैकअप जगह की जानकारी देना है, अगर
secrets.properties
फ़ाइल नहीं मिली है, ताकि बिल्ड विफल न हो. ऐसा तब हो सकता है, जब आपने वर्शन कंट्रोल सिस्टम से ऐप्लिकेशन का क्लोन बनाया है. इसमेंsecrets.properties
और आपने अभी तक स्थानीय भाषा मेंsecrets.properties
फ़ाइल नहीं बनाई है. एपीआई पासकोड. - फ़ाइल सेव करें.
-
अपनी
AndroidManifest.xml
फ़ाइल में, इस पर जाएंcom.google.android.geo.API_KEY
औरandroid:value attribute
अपडेट करें. अगर<meta-data>
टैग मौजूद नहीं है, तो उसे<application>
टैग.<meta-data android:name="com.google.android.geo.API_KEY" android:value="${MAPS_API_KEY}" />
ध्यान दें:
com.google.android.geo.API_KEY
सुझाया गया मेटाडेटा नाम है एपीआई पासकोड के लिए. इस नाम वाली कुंजी का उपयोग एकाधिक को प्रमाणित करने के लिए किया जा सकता है Android प्लैटफ़ॉर्म पर Google Maps-आधारित एपीआई, जिनमें Flutter SDK टूल. पुराने सिस्टम के साथ काम करने की सुविधा के लिए, एपीआईcom.google.android.maps.v2.API_KEY
नाम का समर्थन करता है. यह लेगसी name सिर्फ़ Android Maps API v2 पर पुष्टि करने की अनुमति देता है. एक ऐप्लिकेशन ये काम कर सकता है: API कुंजी मेटाडेटा नामों में से केवल एक को दर्ज करें. अगर दोनों के बारे में बताया गया हो, तो एपीआई एक अपवाद देता है. -
Android Studio में, अपना मॉड्यूल-लेवल
build.gradle.kts
खोलें याbuild.gradle
फ़ाइल में बदलाव करें औरsecrets
प्रॉपर्टी में बदलाव करें. अगरsecrets
प्रॉपर्टी मौजूद नहीं है, इसे जोड़ें.propertiesFileName
को सेट करने के लिए, प्लग इन की प्रॉपर्टी में बदलाव करेंsecrets.properties
,defaultPropertiesFileName
को इस पर सेट करेंlocal.defaults.properties
और कोई अन्य प्रॉपर्टी सेट करें.Kotlin
secrets { // To add your Maps API key to this project: // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file. // 2. Add this line, where YOUR_API_KEY is your API key: // MAPS_API_KEY=YOUR_API_KEY propertiesFileName = "secrets.properties" // A properties file containing default secret values. This file can be // checked in version control. defaultPropertiesFileName = "local.defaults.properties" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
ग्रूवी
secrets { // To add your Maps API key to this project: // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file. // 2. Add this line, where YOUR_API_KEY is your API key: // MAPS_API_KEY=YOUR_API_KEY propertiesFileName = "secrets.properties" // A properties file containing default secret values. This file can be // checked in version control. defaultPropertiesFileName = "local.defaults.properties" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
ध्यान दें: जैसा कि ऊपर दिखाया गया है,
com.google.android.geo.API_KEY
सुझाया गया मेटाडेटा नाम है
एपीआई पासकोड के लिए. इस नाम वाली कुंजी का उपयोग एकाधिक को प्रमाणित करने के लिए किया जा सकता है
Android प्लैटफ़ॉर्म पर Google Maps-आधारित एपीआई, जिनमें
Flutter SDK टूल. पुराने सिस्टम के साथ काम करने की सुविधा के लिए, एपीआई
com.google.android.maps.v2.API_KEY
नाम का समर्थन करता है. इस लेगसी नाम का इस्तेमाल करके, सिर्फ़ Android Maps API v2 को ऑथेंटिकेट किया जा सकता है. एक ऐप्लिकेशन ये काम कर सकता है:
API कुंजी मेटाडेटा नामों में से केवल एक को दर्ज करें. अगर दोनों के बारे में बताया गया हो, तो एपीआई
एक अपवाद देता है.
iOS
अपनी AppDelegate.swift
फ़ाइल में एपीआई पासकोड जोड़ें.
ios/Runner/AppDelegate.swift
फ़ाइल को अपने पसंदीदा IDE के साथ Flutter प्रोजेक्ट में खोलें.- Google Maps for Flutter पैकेज को अपने ऐप्लिकेशन में जोड़ने के लिए, यह इंपोर्ट स्टेटमेंट जोड़ें:
- अपने एपीआई को
application(_:didFinishLaunchingWithOptions:)
तरीके में जोड़ें. साथ ही, YOUR_API_KEY के लिए एपीआई पासकोड बदलें:GMSServices.provideAPIKey("YOUR_API_KEY")
AppDelegate.swift
फ़ाइल को सेव करें और बंद करें.
import GoogleMaps
पूरी की गई AppDelegate.swift
फ़ाइल इस तरह की होनी चाहिए:
import UIKit import Flutter import GoogleMaps // Add this import @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) // TODO: Add your Google Maps API key GMSServices.provideAPIKey("YOUR_API_KEY") return super.application(application, didFinishLaunchingWithOptions: launchOptions) } }
वेब
अपनी index.html
ऐप्लिकेशन फ़ाइल में अपनी एपीआई कुंजी जोड़ें.
- अपने पसंदीदा IDE की मदद से, Flutter प्रोजेक्ट में
web/index.html
फ़ाइल खोलें. <head>
टैग में, इस स्क्रिप्ट टैग को जोड़ें और अपनी एपीआई पासकोड कोYOUR_API_KEY
से बदलें.<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
index.html
फ़ाइल को सेव करें और बंद करें.index.html
का पूराhead
सेक्शन इससे मिलता-जुलता होना चाहिए:<head> <base href="/"> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="A new Flutter project."> <!-- iOS meta tags & icons --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script> <title>google_maps_in_flutter</title> <link rel="manifest" href="manifest.json"> </head>
पांचवां चरण: मैप जोड़ना
नीचे दिया गया कोड, नए Flutter ऐप्लिकेशन में आसान मैप जोड़ने का तरीका बताता है.
lib/main.dart
फ़ाइल को अपने पसंदीदा IDE के साथ Flutter प्रोजेक्ट में खोलें.mapController
का इंस्टेंस बनाने और शुरू करने के लिए, अपने ऐप्लिकेशन के डिफ़ॉल्ट मुख्य तरीके में तरीके जोड़ें या अपडेट करें.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, ), ), ), ); } }
- ऐसे सभी एम्युलेटर या डिवाइस चालू करें जिन पर आपको अपना ऐप्लिकेशन चलाना है.
- अपना ऐप्लिकेशन चलाएं. आपको इससे मिलता-जुलता आउटपुट दिखेगा:
flutter run
Multiple devices found: Android phone (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator) iPhone (mobile) • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator) Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124 [1]: Android phone [2]: iPhone [3]: Chrome Please choose one (To quit, press "q/Q"):जिस प्लैटफ़ॉर्म को चलाना है उसका नंबर लिखें. हर बार
flutter run
को शुरू करने पर, Flutter आपको इन विकल्पों के बारे में बताएगा. अगर आपके डेवलपमेंट सिस्टम में कोई एम्युलेटर नहीं चल रहा है या कोई टेस्ट डिवाइस कनेक्ट नहीं है, तो Flutter को Chrome खोलने का विकल्प चुनना चाहिए.हर प्लैटफ़ॉर्म को एक मैप दिखाना चाहिए, जो सिडनी, ऑस्ट्रेलिया के बीच में हो. अगर आपको मैप नहीं दिखता, तो पक्का करें कि आपने एपीआई पासकोड को सही टारगेट प्रोजेक्ट में जोड़ा हो.
अगले चरण
अब आपके पास एपीआई पासकोड और Flutter प्रोजेक्ट है. इसलिए, ऐप्लिकेशन बनाए और चलाए जा सकते हैं. Flutter पैकेज के लिए Google Maps, कई ट्यूटोरियल और सैंपल ऐप्लिकेशन उपलब्ध कराता है से आपको शुरुआत करने में मदद मिल सकती है. ज़्यादा जानकारी के लिए, ये संसाधन देखें:
- मार्कर के साथ मैप जोड़ना ट्यूटोरियल
- कोडलैब Google Maps Platform के साथ Flutter के लिए
- कोड सैंपल GitHub पर