Flutter प्रोजेक्ट सेट अप करने से पहले पक्का करें कि आपने शुरू करने से पहले में दिए गए ज़रूरी चरणों को पूरा कर लिया है. बिलिंग की सुविधा चालू करने और एपीआई पासकोड बनाने के बाद, Flutter प्रोजेक्ट सेट अप किया जा सकता है. इसका इस्तेमाल अपना ऐप्लिकेशन बनाने के लिए किया जाता है.
पहला चरण: ज़रूरी सॉफ़्टवेयर इंस्टॉल करें
Google Maps for Flutter पैकेज का इस्तेमाल करके प्रोजेक्ट बनाने के लिए, आपको Flutter SDK टूल इंस्टॉल करना होगा और अपने टारगेट प्लैटफ़ॉर्म के लिए डेवलपमेंट एनवायरमेंट सेट अप करना होगा. ज़्यादा जानकारी के लिए, Flutter इंस्टॉल गाइड देखें.
दूसरा चरण: नए प्रोजेक्ट में Flutter के लिए Google Maps पैकेज इंस्टॉल करना
Flutter, Flutter प्लगिन के रूप में Google Maps for Flutter पैकेज की सुविधा देता है.
Flutter प्रोजेक्ट बनाएं और Maps प्लगिन जोड़ें.
-
`flutter create` का इस्तेमाल करके नया 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
में है. अपना ऐप्लिकेशन चलाने के लिए, टाइप करें:cd google_maps_in_flutter
flutter run
-
इस प्रोजेक्ट में Flutter पैकेज प्लगिन के लिए Google Maps जोड़ें.
flutter pub add google_maps_flutter
Resolving dependencies... [Listing of dependencies elided] Changed 14 dependencies!
तीसरा चरण: प्लैटफ़ॉर्म का वर्शन सेट करना
Android
Android के लिए, SDK टूल का कम से कम वर्शन सेट करें.
android/app/build.gradle
कॉन्फ़िगरेशन फ़ाइल को, अपने पसंदीदा IDE में खोलें.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 कॉन्फ़िगर करें.- फ़ाइल सेव करें और Gredle की मदद से अपने प्रोजेक्ट में किए गए बदलावों को सिंक करें.
iOS
iOS प्लैटफ़ॉर्म का सबसे कम वर्शन सेट करें.
ios/Podfile
कॉन्फ़िगरेशन फ़ाइल को, अपने पसंदीदा IDE में खोलें.- इस 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
याbuild.gradle.kts
फ़ाइल खोलें औरbuildscript
में जाकर,dependencies
एलिमेंट में इस कोड को जोड़ें.ग्रूवी
buildscript { dependencies { classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1" } }
Kotlin
buildscript { dependencies { classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1") } }
-
अपने मॉड्यूल-लेवल की
build.gradle
फ़ाइल खोलें औरplugins
एलिमेंट में यह कोड जोड़ें.ग्रूवी
plugins { // ... id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' }
Kotlin
plugins { id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") }
- अपनी मॉड्यूल-लेवल की
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}" />
Note:
com.google.android.geo.API_KEY
is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the namecom.google.android.maps.v2.API_KEY
. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception. -
In Android Studio, open your module-level
build.gradle
orbuild.gradle.kts
file and edit thesecrets
property. If thesecrets
property does not exist, add it.Edit the properties of the plugin to set
propertiesFileName
tosecrets.properties
, setdefaultPropertiesFileName
tolocal.defaults.properties
, and set any other properties.Groovy
secrets { // Optionally specify a different file name containing your secrets. // The plugin defaults to "local.properties" 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.*" }
Kotlin
secrets { // Optionally specify a different file name containing your secrets. // The plugin defaults to "local.properties" 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 के लिए पुष्टि करने की अनुमति देता है. कोई ऐप्लिकेशन, एपीआई कुंजी के मेटाडेटा के लिए सिर्फ़ एक नाम तय कर सकता है. अगर दोनों के बारे में बताया जाता है, तो एपीआई अपवाद दिखाता है.iOS
अपनी
AppDelegate.swift
फ़ाइल में एपीआई पासकोड जोड़ें.ios/Runner/AppDelegate.swift
फ़ाइल को, अपने Flutter प्रोजेक्ट में अपने पसंदीदा IDE के साथ खोलें.- अपने ऐप्लिकेशन में Flutter पैकेज के लिए Google Maps जोड़ने के लिए नीचे दिया गया इंपोर्ट स्टेटमेंट जोड़ें:
- अपने एपीआई को
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
की ऐप्लिकेशन फ़ाइल में जोड़ें.web/index.html
फ़ाइल को, अपने Flutter प्रोजेक्ट में अपने पसंदीदा IDE के साथ खोलें.- अपने एपीआई पासकोड को
YOUR_API_KEY
की जगह इस्तेमाल करते हुए,<head>
टैग में यहां दिया गया स्क्रिप्ट टैग जोड़ें.<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
फ़ाइल को, अपने Flutter प्रोजेक्ट में अपने पसंदीदा IDE के साथ खोलें.- अपने ऐप्लिकेशन के डिफ़ॉल्ट मुख्य तरीके में तरीके जोड़ें या अपडेट करें, ताकि
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 पर कोड के सैंपल
जब तक कुछ अलग से न बताया जाए, तब तक इस पेज की सामग्री को Creative Commons Attribution 4.0 License के तहत और कोड के नमूनों को Apache 2.0 License के तहत लाइसेंस मिला है. ज़्यादा जानकारी के लिए, Google Developers साइट नीतियां देखें. Oracle और/या इससे जुड़ी हुई कंपनियों का, Java एक रजिस्टर किया हुआ ट्रेडमार्क है.
आखिरी बार 2024-05-03 (UTC) को अपडेट किया गया.