Flutter प्रोजेक्ट सेट अप करें

Android

Android के लिए, एसडीके का कम से कम लेवल वाला वर्शन सेट करें.

1. अपने पसंदीदा IDE में android/app/build.gradle कॉन्फ़िगरेशन फ़ाइल खोलें.
2. 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
       }
       //...
     }

3. defaultConfig को कॉन्फ़िगर करते समय, अपना यूनीक ApplicationID डालें.
4. अपने प्रोजेक्ट में किए गए बदलावों को Gradle के साथ सिंक करें.

iOS

iOS प्लैटफ़ॉर्म का कम से कम वर्शन सेट करें.

1. अपने पसंदीदा IDE में ios/Podfile कॉन्फ़िगरेशन फ़ाइल खोलें.
2. इस Podfile की शुरुआत में, ये लाइनें जोड़ें:

     # Set platform to 14.0 to enable latest Google Maps SDK
     platform :ios, '14.0'

Android

हमारा सुझाव है कि इस काम को आसान बनाने के लिए, Android के लिए सीक्रेट ग्रेडल प्लग इन का इस्तेमाल करें.

अपने Google Maps प्रोजेक्ट में, Android के लिए सीक्रेट ग्रेडल प्लग इन इंस्टॉल करने के लिए:

1. Android Studio में, अपनी टॉप-लेवल build.gradle.kts या build.gradle फ़ाइल खोलें. इसके बाद, buildscript में मौजूद dependencies एलिमेंट में यह कोड जोड़ें.

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

2. अपने मॉड्यूल-लेवल की 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'
   }

3. अपने मॉड्यूल-लेवल की build.gradle.kts या build.gradle फ़ाइल में, पक्का करें कि targetSdk और compileSdk को 34 पर सेट किया गया हो.
4. अपने प्रोजेक्ट को Gradle के साथ सिंक करें.
5. अपनी टॉप-लेवल डायरेक्ट्री में मौजूद secrets.properties फ़ाइल खोलें. इसके बाद, यह कोड जोड़ें. YOUR_API_KEY को अपने एपीआई पासकोड से बदलें. अपनी कुंजी को इस फ़ाइल में सेव करें, क्योंकि secrets.properties को वर्शन कंट्रोल सिस्टम में शामिल नहीं किया जाता.

   MAPS_API_KEY=YOUR_API_KEY

6. अपनी टॉप-लेवल डायरेक्ट्री में local.defaults.properties फ़ाइल बनाएं. यह फ़ाइल, secrets.properties फ़ाइल वाले फ़ोल्डर में ही होनी चाहिए. इसके बाद, यह कोड जोड़ें.

   MAPS_API_KEY=DEFAULT_API_KEY

   इस फ़ाइल का मकसद, एपीआई पासकोड के लिए बैकअप की जगह उपलब्ध कराना है. ऐसा तब किया जाता है, जब secrets.properties फ़ाइल नहीं मिलती है, ताकि बिल्ड फ़ेल न हों. ऐसा तब हो सकता है, जब आपने वर्शन कंट्रोल सिस्टम से ऐप्लिकेशन को क्लोन किया हो, जिसमें secrets.properties शामिल न हो और आपने एपीआई पासकोड देने के लिए, अब तक स्थानीय तौर पर secrets.properties फ़ाइल न बनाई हो.

7. अपनी 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 नाम का इस्तेमाल भी किया जा सकता है. इस लेगसी नाम से, सिर्फ़ Android Maps API v2 के लिए पुष्टि की जा सकती है. कोई ऐप्लिकेशन, एपीआई कुंजी के मेटाडेटा के सिर्फ़ एक नाम के बारे में बता सकता है. अगर दोनों को तय किया जाता है, तो एपीआई एक अपवाद दिखाता है.

8. 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"
   }
           

   ग्रूवी

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

ध्यान दें: ऊपर दिखाए गए तरीके से, एपीआई पासकोड के लिए 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 फ़ाइल में एपीआई पासकोड जोड़ें.

1. अपने पसंदीदा IDE की मदद से, अपने Flutter प्रोजेक्ट में ios/Runner/AppDelegate.swift फ़ाइल खोलें.
2. अपने ऐप्लिकेशन में Google Maps for Flutter पैकेज जोड़ने के लिए, यह इंपोर्ट स्टेटमेंट जोड़ें:

import GoogleMaps

3. अपने एपीआई को application(_:didFinishLaunchingWithOptions:) तरीके में जोड़ें. इसके लिए, अपनी एपीआई कुंजी को YOUR_API_KEY से बदलें:

   GMSServices.provideAPIKey("YOUR_API_KEY")

4. AppDelegate.swift फ़ाइल को सेव करके बंद करें.

भरी गई 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 ऐप्लिकेशन फ़ाइल में एपीआई पासकोड जोड़ें.

1. अपने पसंदीदा IDE की मदद से, अपने Flutter प्रोजेक्ट में web/index.html फ़ाइल खोलें.
2. <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>

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