Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

Flutter प्रोजेक्ट सेट अप करने से पहले, पक्का करें कि आपने ज़रूरी शर्तें पूरी कर ली हों जो शुरू करने से पहले सेक्शन में बताई गई हैं. बिलिंग की सुविधा चालू करने और एपीआई पासकोड बनाने के बाद, Flutter प्रोजेक्ट सेट अप किया जा सकता है. इसका इस्तेमाल, ऐप्लिकेशन डेवलप करने के लिए किया जाता है.

पहला चरण: ज़रूरी सॉफ़्टवेयर इंस्टॉल करना

Google Maps for Flutter पैकेज का इस्तेमाल करके कोई प्रोजेक्ट बनाने के लिए, आपको Flutter SDK टूल इंस्टॉल करना होगा. साथ ही, टारगेट प्लैटफ़ॉर्म के लिए अपना डेवलपमेंट एनवायरमेंट सेट अप करना होगा. ज़्यादा जानकारी के लिए, Flutter को इंस्टॉल करने से जुड़ी गाइड देखें.

दूसरा चरण: किसी नए प्रोजेक्ट में Google Maps for Flutter पैकेज इंस्टॉल करना

Flutter, Google Maps for Flutter पैकेज को 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
```
यह ऐप्लिकेशन, iOS, Android, और वेब को टारगेट करता है. फ़िलहाल, Google Maps SDK टूल, ब्राउज़र के अलावा डेस्कटॉप ऐप्लिकेशन के साथ काम नहीं करता.

इस प्रोजेक्ट में, 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 प्लैटफ़ॉर्म का कम से कम वर्शन सेट करें.

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

Android के लिए सीक्रेट ग्रेडल प्लग इन इंस्टॉल करने और अपना एपीआई पासकोड सेव करने के लिए:

Android Studio में, अपनी टॉप-लेवल build.gradle.kts या build.gradle फ़ाइल खोलें और plugins ब्लॉक में यह कोड जोड़ें.

Kotlin

plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") version "2.0.1" apply false
}

Groovy

plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' version '2.0.1' apply false
}

अपने मॉड्यूल-लेवल build.gradle.kts या build.gradle फ़ाइल खोलें और plugins एलिमेंट में यह कोड जोड़ें.

Kotlin

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

Groovy

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

अगर Android Studio का इस्तेमाल किया जा रहा है, तो अपने प्रोजेक्ट को Gradle के साथ सिंक करें.
अपनी टॉप-लेवल डायरेक्ट्री में मौजूद secrets.properties फ़ाइल खोलें. इसके बाद, यह कोड जोड़ें. YOUR_API_KEY की जगह अपना एपीआई पासकोड डालें. पक्का करें कि आपने secrets.properties को अपनी .gitignore फ़ाइल में जोड़ा हो. इसके अलावा, इसे वर्शन कंट्रोल सिस्टम से बाहर रखें, ताकि वर्शन कंट्रोल में आपका एपीआई पासकोड शामिल न हो.
ध्यान दें: अगर secrets.properties फ़ाइल मौजूद नहीं है, तो इसे उसी फ़ोल्डर में बनाएं जिसमें local.properties फ़ाइल है.
```
MAPS_API_KEY=YOUR_API_KEY
```
अपनी टॉप-लेवल डायरेक्ट्री में, local.defaults.properties फ़ाइल बनाएं. यह फ़ाइल, secrets.properties फ़ाइल वाले फ़ोल्डर में ही होनी चाहिए. इसके बाद, यह कोड जोड़ें.

ध्यान दें: कोड को ठीक उसी तरह डालें जैसा दिखाया गया है. `DEFAULT_API_KEY` की जगह अपना एपीआई पासकोड न डालें.
DEFAULT_API_KEY
```
MAPS_API_KEY=DEFAULT_API_KEY
```
इस फ़ाइल का मकसद, एपीआई पासकोड के लिए बैकअप की जगह उपलब्ध कराना है. ऐसा इसलिए, ताकि अगर secrets.properties फ़ाइल न मिले, तो भी बिल्ड न रुकें. ऐसा तब हो सकता है, जब आपने किसी वर्शन कंट्रोल सिस्टम से ऐप्लिकेशन को क्लोन किया हो. इस सिस्टम में secrets.properties फ़ाइल शामिल नहीं होती. साथ ही, आपने एपीआई पासकोड उपलब्ध कराने के लिए, स्थानीय तौर पर secrets.properties फ़ाइल नहीं बनाई है.
अपनी 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 की पुष्टि की जा सकती है. कोई ऐप्लिकेशन, एपीआई पासकोड के मेटाडेटा के नामों में से सिर्फ़ एक नाम तय कर सकता है. अगर दोनों नाम तय किए जाते हैं, तो एपीआई में गड़बड़ी की जानकारी दिखती है.

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 root directory (the same folder as the root 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"
}

Groovy

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the root directory (the same folder as the root 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 फ़ाइल में, एपीआई पासकोड जोड़ें.

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

import GoogleMaps

अपने application(_:didFinishLaunchingWithOptions:) तरीके में, एपीआई पासकोड जोड़ें. साथ ही, YOUR_API_KEY की जगह अपना एपीआई पासकोड डालें:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
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 ऐप्लिकेशन फ़ाइल में, एपीआई पासकोड जोड़ें.

अपने पसंदीदा IDE की मदद से, अपने Flutter प्रोजेक्ट में मौजूद web/index.html फ़ाइल खोलें.

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 ऐप्लिकेशन में सामान्य मैप जोड़ने का तरीका बताया गया है.

अपने पसंदीदा IDE की मदद से, अपने Flutter प्रोजेक्ट में मौजूद lib/main.dart फ़ाइल खोलें.

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

मार्कर के साथ मैप जोड़ने का ट्यूटोरियल
कोडलैब Google Maps Platform के साथ Flutter के लिए
कोड सैंपल GitHub पर