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

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

ফ্লাটার প্রজেক্ট সেট আপ করার আগে নিশ্চিত হয়ে নিন যে আপনি 'শুরু করার আগে ' অংশের পূর্বশর্ত ধাপগুলো সম্পন্ন করেছেন। বিলিং চালু করা এবং একটি এপিআই কী তৈরি করার পরে, আপনি আপনার অ্যাপ ডেভেলপ করার জন্য ফ্লাটার প্রজেক্টটি সেট আপ করতে পারবেন।

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

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

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

ফ্লাটার একটি ফ্লাটার প্লাগইন হিসেবে Google Maps for Flutter প্যাকেজটি প্রদান করে।

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

`flutter create` ব্যবহার করে একটি নতুন ফ্লাটার প্রজেক্ট তৈরি করুন:
```
  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!

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

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

অ্যান্ড্রয়েডের জন্য সর্বনিম্ন 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 উল্লেখ করুন।
আপনার প্রোজেক্টের পরিবর্তনগুলো গ্রেডলের সাথে সিঙ্ক করুন।

আইওএস

সর্বনিম্ন iOS প্ল্যাটফর্ম সংস্করণ সেট করুন।

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

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

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

নিম্নলিখিত উদাহরণগুলিতে, YOUR_API_KEY এর জায়গায় আপনার এপিআই কী (API key) বসান।

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

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

অ্যান্ড্রয়েডের জন্য সিক্রেটস গ্রেডল প্লাগইন ইনস্টল করতে এবং আপনার এপিআই কী সংরক্ষণ করতে:

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

গ্রুভি

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

আপনার অ্যাপ-লেভেলের build.gradle ফাইলটি খুলুন এবং plugins এলিমেন্টে নিম্নলিখিত কোডটি যোগ করুন।

গ্রুভি

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

কোটলিন

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

আপনি যদি অ্যান্ড্রয়েড স্টুডিও ব্যবহার করেন, তাহলে আপনার প্রজেক্টটি গ্রেডলের সাথে সিঙ্ক করুন ।
আপনার প্রজেক্ট লেভেল ডিরেক্টরিতে থাকা local.properties ফাইলটি খুলুন এবং নিচের কোডটি যোগ করুন। YOUR_API_KEY এর জায়গায় আপনার API কী বসান।
```
MAPS_API_KEY=YOUR_API_KEY
```
আপনার 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 হলো প্রস্তাবিত মেটাডেটা নাম। এই নামের একটি কী অ্যান্ড্রয়েড প্ল্যাটফর্মে ফ্লাটার এসডিকে সহ একাধিক গুগল ম্যাপস-ভিত্তিক এপিআই-তে প্রমাণীকরণের জন্য ব্যবহার করা যেতে পারে। পূর্ববর্তী সংস্করণের সাথে সামঞ্জস্যের জন্য, এপিআইটি com.google.android.maps.v2.API_KEY নামটি সমর্থন করে। এই পুরোনো নামটি শুধুমাত্র অ্যান্ড্রয়েড ম্যাপস এপিআই v2-তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন এপিআই কী মেটাডেটা নামগুলোর মধ্যে শুধুমাত্র একটি নির্দিষ্ট করতে পারে। যদি উভয়ই নির্দিষ্ট করা হয়, তাহলে এপিআই একটি ব্যতিক্রম (exception) প্রদর্শন করে।

দ্রষ্টব্য: উপরে যেমন দেখানো হয়েছে, API কী-এর জন্য com.google.android.geo.API_KEY হলো প্রস্তাবিত মেটাডেটা নাম। এই নামের একটি কী অ্যান্ড্রয়েড প্ল্যাটফর্মে, ফ্লাটার SDK সহ, একাধিক গুগল ম্যাপস-ভিত্তিক API-তে প্রমাণীকরণের জন্য ব্যবহার করা যেতে পারে। পূর্ববর্তী সংস্করণের সাথে সামঞ্জস্যের জন্য, API-টি com.google.android.maps.v2.API_KEY নামটি সমর্থন করে। এই পুরোনো নামটি শুধুমাত্র অ্যান্ড্রয়েড ম্যাপস API v2-তে প্রমাণীকরণের অনুমতি দেয়। একটি অ্যাপ্লিকেশন API কী মেটাডেটা নামগুলোর মধ্যে শুধুমাত্র একটি নির্দিষ্ট করতে পারে। যদি উভয়ই নির্দিষ্ট করা হয়, তাহলে API-টি একটি ব্যতিক্রমী ত্রুটি (exception) দেখায়।

আইওএস

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

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

import GoogleMaps

আপনার application(_:didFinishLaunchingWithOptions:) মেথডে আপনার API যোগ করুন, এবং YOUR_API_KEY এর জায়গায় আপনার 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)
  }
}

ওয়েব

আপনার এপিআই কী (API key) আপনার index.html অ্যাপ্লিকেশন ফাইলে যোগ করুন।

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

<head> ট্যাগের ভিতরে নিম্নলিখিত স্ক্রিপ্ট ট্যাগটি যোগ করুন, যেখানে YOUR_API_KEY এর জায়গায় আপনার API কী বসান।

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

ধাপ ৫: একটি মানচিত্র যোগ করুন

নিম্নলিখিত কোডটিতে দেখানো হয়েছে কিভাবে একটি নতুন ফ্লাটার অ্যাপে একটি সাধারণ ম্যাপ যোগ করতে হয়।

আপনার পছন্দের IDE ব্যবহার করে আপনার ফ্লাটার প্রজেক্টের 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 কমান্ডটি চালালে, ফ্লাটার আপনাকে এই বিকল্পগুলি দেখাবে। যদি আপনার ডেভেলপমেন্ট সিস্টেমে কোনো এমুলেটর চালু না থাকে বা কোনো টেস্ট ডিভাইস সংযুক্ত না থাকে, তাহলে ফ্লাটার ক্রোম খোলার বিকল্পটি বেছে নেবে।
প্রতিটি প্ল্যাটফর্মে অস্ট্রেলিয়ার সিডনিকে কেন্দ্র করে একটি মানচিত্র প্রদর্শিত হওয়া উচিত। আপনি যদি মানচিত্রটি দেখতে না পান, তবে যাচাই করুন যে আপনি আপনার এপিআই কী (API key) যথাযথ টার্গেট প্রজেক্টে যোগ করেছেন কিনা।

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

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

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