এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি ফ্লাটার প্রকল্প সেট আপ করুন

একটি Flutter প্রকল্প সেট আপ করার আগে নিশ্চিত করুন যে আপনি "Before you begin" এর অধীনে পূর্বশর্ত পদক্ষেপগুলি সম্পন্ন করেছেন। বিলিং সক্ষম করার পরে এবং একটি API কী তৈরি করার পরে, আপনি আপনার অ্যাপটি তৈরি করতে যে Flutter প্রকল্পটি ব্যবহার করেন তা সেট আপ করতে পারেন।

ধাপ ১: প্রয়োজনীয় সফ্টওয়্যার ইনস্টল করুন

গুগল ম্যাপস ফর ফ্লাটার প্যাকেজ ব্যবহার করে একটি প্রকল্প তৈরি করতে, আপনাকে ফ্লাটার SDK ইনস্টল করতে হবে এবং আপনার লক্ষ্য প্ল্যাটফর্মের জন্য আপনার ডেভেলপমেন্ট পরিবেশ সেটআপ করতে হবে। বিস্তারিত জানার জন্য ফ্লাটার ইনস্টল গাইডটি দেখুন।

ধাপ ২: একটি নতুন প্রকল্পে Google Maps for Flutter প্যাকেজ ইনস্টল করুন

ফ্লাটার একটি ফ্লাটার প্লাগইন হিসেবে গুগল ম্যাপস ফর ফ্লাটার প্যাকেজ অফার করে।

ফ্লাটার প্রজেক্ট তৈরি করুন এবং ম্যাপস প্লাগইন যোগ করুন।

`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 এবং Web-কে লক্ষ্য করে। Google Maps SDK বর্তমানে ব্রাউজারের বাইরে ডেস্কটপ অ্যাপ্লিকেশনগুলিকে সমর্থন করে না।

এই প্রকল্পে Google Maps for Flutter প্যাকেজ প্লাগইন যোগ করুন।

flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

ধাপ ৩: প্ল্যাটফর্ম সংস্করণ সেট করুন

অ্যান্ড্রয়েড

অ্যান্ড্রয়েডের জন্য সর্বনিম্ন 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 প্ল্যাটফর্ম সংস্করণ সেট করুন।

আপনার পছন্দের IDE তে ios/Podfile কনফিগারেশন ফাইলটি খুলুন।
এই পডফাইলের শুরুতে নিম্নলিখিত লাইনগুলি যোগ করুন:
```
  # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'
```

ধাপ ৪: প্রকল্পে আপনার API কী যোগ করুন

" শুরু করার আগে , আপনি আপনার অ্যাপের জন্য একটি API কী তৈরি করেছেন। এখন আপনার Flutter প্রকল্পে সেই কীটি যুক্ত করুন। Flutter এর জন্য, আপনার এই API কীটি সমস্ত লক্ষ্য প্ল্যাটফর্মে যুক্ত করা উচিত: iOS, Android এবং Web।

নিম্নলিখিত উদাহরণগুলিতে, YOUR_API_KEY আপনার API কী দিয়ে প্রতিস্থাপন করুন।

অ্যান্ড্রয়েড

এই কাজটি সহজ করার জন্য, আমরা আপনাকে অ্যান্ড্রয়েডের জন্য সিক্রেটস গ্রেডল প্লাগইন ব্যবহার করার পরামর্শ দিচ্ছি।

আপনার গুগল ম্যাপস প্রজেক্টে অ্যান্ড্রয়েডের জন্য সিক্রেটস গ্রেডল প্লাগইন ইনস্টল করতে:

অ্যান্ড্রয়েড স্টুডিওতে, আপনার শীর্ষ-স্তরের build.gradle.kts অথবা build.gradle ফাইলটি খুলুন এবং buildscript অধীনে dependencies উপাদানে নিম্নলিখিত কোডটি যুক্ত করুন।

কোটলিন

plugins {
    alias(libs.plugins.android.application) apply false
    alias(libs.plugins.jetbrains.kotlin.android) apply false
    alias(libs.plugins.kotlin.compose) apply false
    alias(libs.plugins.secrets.gradle.plugin) apply false
}

খাঁজকাটা

buildscript {
    dependencies {
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
}

আপনার মডিউল-স্তরের build.gradle.kts অথবা build.gradle ফাইলটি খুলুন এবং plugins উপাদানে নিম্নলিখিত কোডটি যোগ করুন।
কোটলিন
```
plugins {
    // ...
    alias(libs.plugins.secrets.gradle.plugin)
}
```
খাঁজকাটা
```
plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}
```
আপনার মডিউল-স্তরের build.gradle.kts অথবা build.gradle ফাইলে, নিশ্চিত করুন যে targetSdk এবং compileSdk 34 তে সেট করা আছে।
আপনার প্রকল্পটি Gradle এর সাথে সিঙ্ক করুন ।
আপনার টপ-লেভেল ডিরেক্টরিতে secrets.properties ফাইলটি খুলুন, এবং তারপর নিম্নলিখিত কোডটি যোগ করুন। YOUR_API_KEY আপনার API কী দিয়ে প্রতিস্থাপন করুন। এই ফাইলটিতে আপনার কীটি সংরক্ষণ করুন কারণ secrets.properties একটি সংস্করণ নিয়ন্ত্রণ সিস্টেমে চেক করা থেকে বাদ দেওয়া হয়।
দ্রষ্টব্য: যদি secrets.properties ফাইলটি বিদ্যমান না থাকে, তাহলে এটি local.properties ফাইলের মতো একই ফোল্ডারে তৈরি করুন।
```
MAPS_API_KEY=YOUR_API_KEY
```
আপনার টপ-লেভেল ডিরেক্টরিতে secrets.properties ফাইলের মতো একই ফোল্ডারে local.defaults.properties ফাইলটি তৈরি করুন এবং তারপর নিম্নলিখিত কোডটি যোগ করুন।
দ্রষ্টব্য: দেখানো কোডটি লিখুন। DEFAULT_API_KEY আপনার API কী দিয়ে প্রতিস্থাপন করবেন না।
```
MAPS_API_KEY=DEFAULT_API_KEY
```
এই ফাইলটির উদ্দেশ্য হল যদি secrets.properties ফাইলটি না পাওয়া যায়, তাহলে API কী-এর জন্য একটি ব্যাকআপ লোকেশন প্রদান করা যাতে বিল্ডগুলি ব্যর্থ না হয়। এটি ঘটতে পারে যদি আপনি এমন একটি সংস্করণ নিয়ন্ত্রণ ব্যবস্থা থেকে অ্যাপটি ক্লোন করেন যা secrets.properties বাদ দেয় এবং আপনি এখনও আপনার API কী প্রদানের জন্য স্থানীয়ভাবে একটি 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 হল API কী-এর জন্য প্রস্তাবিত মেটাডেটা নাম। এই নামের একটি কী Flutter SDK সহ Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API-তে প্রমাণীকরণ করতে ব্যবহার করা যেতে পারে। ব্যাকওয়ার্ড সামঞ্জস্যের জন্য, API com.google.android.maps.v2.API_KEY নামটিও সমর্থন করে। এই লিগ্যাসি নামটি শুধুমাত্র Android Maps API v2-তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন API কী মেটাডেটা নামগুলির মধ্যে শুধুমাত্র একটি নির্দিষ্ট করতে পারে। যদি উভয়ই নির্দিষ্ট করা থাকে, তাহলে API একটি ব্যতিক্রম দেয়।

অ্যান্ড্রয়েড স্টুডিওতে, আপনার মডিউল-লেভেল build.gradle.kts অথবা build.gradle ফাইলটি খুলুন এবং secrets সম্পত্তিটি সম্পাদনা করুন। যদি secrets সম্পত্তিটি বিদ্যমান না থাকে, তাহলে এটি যোগ করুন।

প্লাগইনের বৈশিষ্ট্য সম্পাদনা করে propertiesFileName secrets.properties এ সেট করুন, 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"
}

খাঁজকাটা

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 হল API কী-এর জন্য প্রস্তাবিত মেটাডেটা নাম। এই নামের একটি কী Flutter SDK সহ Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API-তে প্রমাণীকরণ করতে ব্যবহার করা যেতে পারে। ব্যাকওয়ার্ড সামঞ্জস্যের জন্য, API com.google.android.maps.v2.API_KEY নামটিও সমর্থন করে। এই লিগ্যাসি নামটি শুধুমাত্র Android Maps API v2-তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন API কী মেটাডেটা নামগুলির মধ্যে শুধুমাত্র একটি নির্দিষ্ট করতে পারে। যদি উভয়ই নির্দিষ্ট করা থাকে, তাহলে API একটি ব্যতিক্রম দেয়।

আইওএস

আপনার AppDelegate.swift ফাইলে আপনার API কী যোগ করুন।

আপনার পছন্দের IDE দিয়ে আপনার Flutter প্রজেক্টে ios/Runner/AppDelegate.swift ফাইলটি খুলুন।
আপনার অ্যাপে Google Maps for Flutter প্যাকেজ যোগ করতে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

import GoogleMaps

আপনার application(_:didFinishLaunchingWithOptions:) পদ্ধতিতে আপনার API যোগ করুন, আপনার API কীটি 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 অ্যাপ্লিকেশন ফাইলে আপনার API কী যোগ করুন।

আপনার পছন্দের IDE দিয়ে আপনার Flutter প্রজেক্টে web/index.html ফাইলটি খুলুন।

আপনার API কীটি 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 এর একটি ইনস্ট্যান্স তৈরি এবং আরম্ভ করতে আপনার অ্যাপের ডিফল্ট main পদ্ধতিতে পদ্ধতি যোগ বা আপডেট করুন।

      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 খোলা উচিত।
প্রতিটি প্ল্যাটফর্মে অস্ট্রেলিয়ার সিডনিকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করা উচিত। যদি আপনি মানচিত্রটি না দেখে থাকেন, তাহলে পরীক্ষা করে দেখুন যে আপনি আপনার API কীটি উপযুক্ত লক্ষ্য প্রকল্পে যোগ করেছেন কিনা।

পরবর্তী পদক্ষেপ

এখন যেহেতু আপনার কাছে একটি API কী এবং একটি Flutter প্রকল্প আছে, আপনি অ্যাপ তৈরি এবং চালাতে পারেন। Google Maps for Flutter প্যাকেজে অনেক টিউটোরিয়াল এবং নমুনা অ্যাপ রয়েছে যা আপনাকে শুরু করতে সাহায্য করতে পারে। আরও জানতে, নিম্নলিখিত সংস্থানগুলি দেখুন:

মার্কার টিউটোরিয়াল সহ একটি মানচিত্র যোগ করা
গুগল ম্যাপস প্ল্যাটফর্মের সাথে ফ্লটারের জন্য কোডল্যাব
GitHub-এ কোড নমুনা