Flutter projesi oluşturun

Android

Android için minimum SDK sürümünü ayarlayın.

1. android/app/build.gradle yapılandırma dosyasını tercih ettiğiniz IDE'de açın.
2. android.defaultConfig.minSdkVersion değerini 21 olarak değiştirin:

     android {
       //...
       defaultConfig {
           applicationId "com.example.google_maps_in_flutter"
           minSdkVersion 21     // Set to 21
           targetSdkVersion flutter.targetSdkVersion
           versionCode flutterVersionCode.toInteger()
           versionName flutterVersionName
       }
       //...
     }

3. defaultConfig yapılandırılırken kendi benzersiz ApplicationID'nizi belirtin.
4. Proje değişikliklerinizi Gradle ile senkronize edin.

iOS

Minimum iOS platform sürümünü ayarlayın.

1. ios/Podfile yapılandırma dosyasını tercih ettiğiniz IDE'de açın.
2. Bu Podfile'ın başına aşağıdaki satırları ekleyin:

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

Android

Bu görevi kolaylaştırmak için Android için Secrets Gradle Plugin'i kullanmanızı öneririz.

Android için Secrets Gradle Eklentisi'ni yüklemek ve API anahtarınızı depolamak için:

1. Android Studio'da üst düzey build.gradle.kts veya build.gradle dosyanızı açın ve aşağıdaki kodu plugins bloğuna ekleyin.

   Kotlin

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

   Modern

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

2. Modül düzeyindeki build.gradle.kts veya build.gradle dosyanızı açın ve aşağıdaki kodu plugins öğesine ekleyin.

   Kotlin

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

   Modern

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

3. Android Studio kullanıyorsanız projenizi Gradle ile senkronize edin.
4. En üst düzey dizininizde secrets.properties dosyasını açın ve aşağıdaki kodu ekleyin. YOUR_API_KEY kısmını API anahtarınızla değiştirin. API anahtarınızı sürüm denetimine eklememek için secrets.properties dosyasını .gitignore dosyanıza eklediğinizden (veya sürüm denetim sisteminizden hariç tuttuğunuzdan) emin olun.

   MAPS_API_KEY=YOUR_API_KEY

5. En üst düzey dizininizde, secrets.properties dosyasıyla aynı klasörde local.defaults.properties dosyasını oluşturun ve aşağıdaki kodu ekleyin.

   MAPS_API_KEY=DEFAULT_API_KEY

   Bu dosyanın amacı, secrets.properties dosyası bulunamazsa derlemelerin başarısız olmaması için API anahtarına yedek bir konum sağlamaktır. Bu durum, uygulamayı secrets.properties dosyasını atlayan bir sürüm denetim sisteminden klonladıysanız ve API anahtarınızı sağlamak için yerel olarak bir secrets.properties dosyası oluşturmadıysanız ortaya çıkabilir.

6. AndroidManifest.xml dosyanızda com.google.android.geo.API_KEY bölümüne gidin ve android:value özelliğini aşağıdaki gibi güncelleyin:

   <meta-data
       android:name="com.google.android.geo.API_KEY"
       android:value="${MAPS_API_KEY}" />
       

   Not: com.google.android.geo.API_KEY, API anahtarı için önerilen meta veri adıdır. Bu ada sahip bir anahtar, Android platformunda Flutter SDK'sı da dahil olmak üzere Google Haritalar tabanlı birden fazla API'nin kimliğini doğrulamak için kullanılabilir. API, geriye dönük uyumluluk için com.google.android.maps.v2.API_KEY adını da destekler. Bu eski ad, yalnızca Android Maps API v2'de kimlik doğrulamaya izin verir. Bir uygulama, API anahtarı meta veri adlarından yalnızca birini belirtebilir. Her ikisi de belirtilirse API bir istisna oluşturur.

7. Android Studio'da modül düzeyindeki build.gradle.kts veya build.gradle dosyanızı açın ve secrets özelliğini düzenleyin. secrets özelliği yoksa ekleyin.

   Eklentinin özelliklerini düzenleyerek propertiesFileName değerini "secrets.properties", defaultPropertiesFileName değerini "local.defaults.properties" olarak ayarlayın ve diğer özellikleri belirleyin.

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

   Modern

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

Not: Yukarıda gösterildiği gibi, API anahtarı için önerilen meta veri adı com.google.android.geo.API_KEY şeklindedir. Bu ada sahip bir anahtar, Flutter SDK'sı da dahil olmak üzere Android platformundaki Google Haritalar tabanlı birden fazla API'de kimlik doğrulaması yapmak için kullanılabilir. API, geriye dönük uyumluluk için com.google.android.maps.v2.API_KEY adını da destekler. Bu eski ad, yalnızca Android Maps API v2'de kimlik doğrulamaya izin verir. Bir uygulama, API anahtarı meta veri adlarından yalnızca birini belirtebilir. Her ikisi de belirtilirse API bir istisna oluşturur.

iOS

API anahtarınızı AppDelegate.swift dosyanıza ekleyin.

1. Flutter projenizdeki ios/Runner/AppDelegate.swift dosyasını tercih ettiğiniz IDE ile açın.
2. Flutter için Google Haritalar paketini uygulamanıza eklemek üzere aşağıdaki içe aktarma ifadesini ekleyin:

import GoogleMaps

3. API'nizi application(_:didFinishLaunchingWithOptions:) yönteminize ekleyin ve YOUR_API_KEY yerine API anahtarınızı girin:

   GMSServices.provideAPIKey("YOUR_API_KEY")

4. AppDelegate.swift dosyasını kaydedip kapatın.

Tamamlanan AppDelegate.swift dosyası şuna benzer:

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

Web

API anahtarınızı index.html uygulama dosyanıza ekleyin.

1. Flutter projenizdeki web/index.html dosyasını tercih ettiğiniz IDE ile açın.
2. <head> etiketinin içine aşağıdaki komut dosyası etiketini ekleyin ve YOUR_API_KEY yerine API anahtarınızı yazın.

   <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 dosyasını kaydedip kapatın.

   index.html dosyasının head bölümünün tamamı şuna benzemelidir:

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