আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

Flutter প্রোজেক্ট সেট-আপ করা

Flutter প্রোজেক্ট সেট-আপ করার আগে, শুরু করার আগে-এর অধীনে প্রয়োজনীয় ধাপগুলি সম্পূর্ণ করেছেন কিনা তা নিশ্চিত করুন। আপনি বিলিং চালু করার পরে API কী তৈরি করলে, আপনার অ্যাপ ডেভেলপ করার জন্য Flutter প্রোজেক্ট সেট-আপ করতে পারবেন।

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

Flutter প্যাকেজের জন্য Google Maps ব্যবহার করে কোনও প্রোজেক্ট তৈরি করতে, আপনাকে অবশ্যই Flutter SDK ইনস্টল করতে হবে এবং আপনার টার্গেট প্ল্যাটফর্মের জন্য ডেভেলপমেন্ট এনভায়রনমেন্ট সেট-আপ করতে হবে। বিস্তারিত জানতে Flutter ইনস্টল করার গাইড দেখুন।

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

Flutter, Flutter প্লাগ-ইন হিসেবে Flutter প্যাকেজের জন্য Google Maps অফার করে।

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

ধাপ ৪: প্রোজেক্টে আপনার API key যোগ করুন

শুরু করার আগে, আপনি নিজের অ্যাপের জন্য একটি API key তৈরি করেছেন। এখন সেই কী আপনার Flutter প্রোজেক্টে যোগ করুন। Flutter-এর জন্য, আপনাকে এই API কী সব টার্গেট প্ল্যাটফর্মে যোগ করতে হবে: iOS, Android এবং ওয়েব।

নিচের উদাহরণে, YOUR_API_KEY-এর জায়গায় আপনার API key লিখুন।

Android

এই টাস্কটি স্ট্রিমলাইন করতে, আমরা আপনাকে Android-এর জন্য Secrets Gradle প্লাগ-ইন ব্যবহার করার সাজেশন দিই।

Android-এর জন্য Secrets Gradle প্লাগ-ইন ইনস্টল করতে এবং আপনার API key স্টোর করতে:

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-এর জায়গায় আপনার API key লিখুন। আপনার .gitignore ফাইলে secrets.properties যোগ করতে ভুলবেন না (অথবা আপনার ভার্সন কন্ট্রোল সিস্টেম থেকে এটি বাদ দিন) যাতে আপনি ভার্সন কন্ট্রোলে আপনার API কী চেক না করেন।
মনে রাখবেন: যদি secrets.properties ফাইলটি না থাকে, তাহলে local.properties ফাইলের মতো একই ফোল্ডারে এটি তৈরি করুন।
```
MAPS_API_KEY=YOUR_API_KEY
```
আপনার টপ-লেভেল ডিরেক্টরিতে local.defaults.properties ফাইল তৈরি করুন, secrets.properties ফাইলের মতো একই ফোল্ডারে এবং তারপর নিম্নলিখিত কোড যোগ করুন।

মনে রাখবেন: যেমন দেখানো হয়েছে ঠিক সেইভাবে কোড লিখুন। আপনার API key দিয়ে DEFAULT_API_KEY পরিবর্তন করবেন না।
```
MAPS_API_KEY=DEFAULT_API_KEY
```
secrets.properties ফাইলটি খুঁজে না পাওয়া গেলে, API কী-এর জন্য ব্যাক-আপ লোকেশন প্রদান করাই এই ফাইলের উদ্দেশ্য, যাতে বিল্ড ফেল না করে। আপনি যদি এমন কোনও ভার্সন কন্ট্রোল সিস্টেম থেকে অ্যাপ ক্লোন করেন যা secrets.properties বাদ দেয় এবং আপনি এখনও API কী প্রদান করার জন্য স্থানীয়ভাবে 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}" />
    
```
মনে রাখবেন: API কী-এর জন্য সাজেস্ট করা মেটাডেটার নাম হল com.google.android.geo.API_KEY। এই নামের কী ব্যবহার করে Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API যাচাই করা যেতে পারে, এর মধ্যে Flutter SDK অন্তর্ভুক্ত। ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য, API-তে com.google.android.maps.v2.API_KEY নামও কাজ করে। এই পুরনো নামটি শুধুমাত্র Android Maps API v2-এর জন্য যাচাইকরণ করতে দেয়। কোনও অ্যাপ্লিকেশন শুধুমাত্র একটি API কী মেটাডেটার নাম উল্লেখ করতে পারে। দুটিই নির্দিষ্ট করা থাকলে, API ব্যতিক্রম দেখায়।

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

মনে রাখবেন: উপরে যেমন দেখানো হয়েছে, API কী-এর জন্য সাজেস্ট করা মেটাডেটার নাম হল com.google.android.geo.API_KEY। এই নামের কী ব্যবহার করে Android প্ল্যাটফর্মে একাধিক Google Maps-ভিত্তিক API যাচাই করা যেতে পারে, এর মধ্যে Flutter SDK অন্তর্ভুক্ত। পুরনো ভার্সনের সাথে মানানসই হওয়ার জন্য, API-তে com.google.android.maps.v2.API_KEY নামও কাজ করে। এই লিগ্যাসি নাম শুধুমাত্র Android Maps API v2-এর জন্য যাচাইকরণ করতে দেয়। কোনও অ্যাপ্লিকেশন শুধুমাত্র একটি API কী মেটাডেটার নাম উল্লেখ করতে পারে। দুটিই নির্দিষ্ট করা থাকলে, API ব্যতিক্রম দেখায়।

iOS

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

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

import GoogleMaps

YOUR_API_KEY-এর জন্য আপনার API key প্রতিস্থাপন করে, আপনার application(_:didFinishLaunchingWithOptions:) পদ্ধতিতে API যোগ করুন:
```
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 key যোগ করুন।

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

<head> ট্যাগের মধ্যে নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করুন, YOUR_API_KEY-এর জন্য আপনার 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>

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 খোলার বিকল্প বেছে নেওয়া উচিত।

প্রতিটি প্ল্যাটফর্মে সিডনি, অস্ট্রেলিয়াকে কেন্দ্র করে ম্যাপ দেখাতে হবে। আপনি ম্যাপ দেখতে না পেলে, উপযুক্ত টার্গেট প্রোজেক্টে API কী যোগ করেছেন কিনা তা চেক করুন।

পরবর্তী ধাপ

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

মার্কার সহ ম্যাপ যোগ করা টিউটোরিয়াল
Google Maps Platform-এর সাথে Flutter-এর জন্য কোডল্যাব
GitHub-এ কোড স্যাম্পেল