راه‌اندازی پروژه Flutter

Android

حداقل نسخه کیت توسعه نرم‌افزار را برای Android تنظیم کنید.

1. فایل پیکربندی android/app/build.gradle را در IDE ترجیحی‌تان باز کنید.
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. فایل پیکربندی ios/Podfile را در IDE ترجیحی‌تان باز کنید.
2. خطوط زیر را به ابتدای این Podfile اضافه کنید:

     # Set platform to 14.0 to enable latest Google Maps SDK
     platform :ios, '14.0'

Android

برای ساده‌سازی این کار، توصیه می‌کنیم از افزایه Secrets Gradle ویژه Android استفاده کنید.

برای نصب افزایه Secrets Gradle ویژه Android و ذخیره کلید میانای برنامه‌سازی کاربردی:

1. در Android Studio، فایل build.gradle سطح ریشه را باز کنید و کد زیر را به عنصر dependencies در buildscript اضافه کنید.

   Groovy

   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 اضافه کنید.

   Groovy

   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» استفاده می‌کنید، پروژه‌تان را با 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 نام فراداده توصیه‌شده برای کلید API است. از کلیدی با این نام می‌توان برای اصالت‌سنجی در چندین میانای برنامه‌سازی کاربردی مبتنی بر Google Maps در پلاتفرم Android، ازجمله Flutter SDK، استفاده کرد. برای سازگاری با نسخه قدیمی، این میانای برنامه‌سازی کاربردی از نام com.google.android.maps.v2.API_KEY نیز پشتیبانی می‌کند. این نام قدیمی فقط اصالت‌سنجی را برای Android Maps API v2 امکان‌پذیر می‌کند. برنامه فقط می‌تواند یکی از نام‌های فراداده کلید میانای برنامه‌سازی کاربردی را مشخص کند. اگر هر دو مشخص شده باشند، میانای برنامه‌سازی کاربردی استثنایی را ایجاد می‌کند.

توجه: همان‌طور که در بالا نشان داده شده است، com.google.android.geo.API_KEY نام فراداده توصیه‌شده برای کلید API است. از کلیدی با این نام می‌توان برای اصالت‌سنجی در چندین میانای برنامه‌سازی کاربردی مبتنی بر Google Maps در پلاتفرم Android، ازجمله Flutter SDK، استفاده کرد. برای سازگاری با نسخه قدیمی، این میانای برنامه‌سازی کاربردی از نام com.google.android.maps.v2.API_KEY نیز پشتیبانی می‌کند. این نام قدیمی فقط امکان اصالت‌سنجی در Android Maps API v2 را فراهم می‌کند. برنامه فقط می‌تواند یکی از نام‌های فراداده کلید میانای برنامه‌سازی کاربردی را مشخص کند. اگر هر دو مشخص شده باشند، API استثنایی را ایجاد می‌کند.

iOS

کلید میانای برنامه‌سازی کاربردی خود را به فایل AppDelegate.swift اضافه کنید.

1. فایل ios/Runner/AppDelegate.swift را در پروژه Flutter خود با IDE ترجیحی‌تان باز کنید.
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. فایل web/index.html را در پروژه Flutter خود با IDE ترجیحی‌تان باز کنید.
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 را ذخیره کنید و ببندید.

   بخش کامل head در index.html باید شبیه به موارد زیر باشد:

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