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 के लिए सीक्रेट ग्रेडल प्लग इन का इस्तेमाल करें.

Android के लिए Secrets Gradle Plugin इंस्टॉल करने और अपनी एपीआई कुंजी सेव करने के लिए:

1. Android Studio में, अपनी रूट-लेवल की build.gradle फ़ाइल खोलें. इसके बाद, 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")
       }
   }

2. ऐप्लिकेशन-लेवल की build.gradle फ़ाइल खोलें और plugins एलिमेंट में यह कोड जोड़ें.

   ग्रूवी

   plugins {
       id 'com.android.application'
       // ...
       id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
   }

   Kotlin

   plugins {
       id("com.android.application")
       // ...
       id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
   }

3. अगर Android Studio का इस्तेमाल किया जाता है, तो अपने प्रोजेक्ट को Gradle के साथ सिंक करें.
4. अपने प्रोजेक्ट लेवल की डायरेक्ट्री में मौजूद local.properties खोलें. इसके बाद, यह कोड जोड़ें. YOUR_API_KEY को अपने एपीआई पासकोड से बदलें.

   MAPS_API_KEY=YOUR_API_KEY

5. अपनी AndroidManifest.xml फ़ाइल में, com.google.android.geo.API_KEY पर जाएं और android:value एट्रिब्यूट को इस तरह अपडेट करें:

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

ध्यान दें: ऊपर दिखाए गए तरीके के मुताबिक, एपीआई पासकोड के लिए com.google.android.geo.API_KEY मेटाडेटा का नाम इस्तेमाल करने का सुझाव दिया जाता है. इस नाम वाली कुंजी का इस्तेमाल, Android प्लैटफ़ॉर्म पर Google Maps पर आधारित कई एपीआई के लिए पुष्टि करने के लिए किया जा सकता है. इनमें Flutter SDK भी शामिल है. पुराने सिस्टम के साथ काम करने की सुविधा के लिए, API 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>