Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

Flutter projesi oluşturun

Flutter projesi oluşturmadan önce Başlamadan önce bölümündeki ön koşul adımlarını tamamladığınızdan emin olun. Faturalandırmayı etkinleştirip API anahtarı oluşturduktan sonra uygulamanızı geliştirmek için kullandığınız Flutter projesini ayarlayabilirsiniz.

1. adım: Gerekli yazılımı yükleyin

Flutter için Google Haritalar paketini kullanarak bir proje oluşturmak istiyorsanız Flutter SDK'yı yüklemeniz ve hedef platformunuz için geliştirme ortamınızı ayarlamanız gerekir. Ayrıntılar için Flutter yükleme kılavuzuna göz atın.

2. adım: Flutter için Google Haritalar paketini yeni bir projeye yükleyin

Flutter, Flutter için Google Haritalar paketini bir Flutter eklentisi olarak sunar.

Flutter projesini oluşturma ve Haritalar eklentisini ekleme

`flutter create` komutunu kullanarak yeni bir Flutter projesi oluşturun:
```
  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!
```
Uygulama kodunuz google_maps_in_flutter/lib/main.dart içinde yer alıyor. Uygulamanızı çalıştırmak için şunu yazın:
```
  cd google_maps_in_flutter
  flutter run
```
Bu uygulama iOS, Android ve web'i hedefler. Google Haritalar SDK'sı şu anda tarayıcı dışındaki masaüstü uygulamalarını desteklememektedir.

Flutter için Google Haritalar paket eklentisini bu projeye ekleyin.

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

  Changed 14 dependencies!

3. adım: Platform sürümünü ayarlayın

Android

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

android/app/build.gradle yapılandırma dosyasını tercih ettiğiniz IDE'de açın.

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
    }
    //...
  }

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

iOS

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

ios/Podfile yapılandırma dosyasını tercih ettiğiniz IDE'de açın.

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'

4. adım: API anahtarınızı projeye ekleyin

Başlamadan önce bölümünde uygulamanız için bir API anahtarı oluşturmuştunuz. Şimdi bu anahtarı Flutter projenize ekleyin. Flutter için bu API anahtarını tüm hedef platformlara (iOS, Android ve web) eklemeniz gerekir.

Aşağıdaki örneklerde YOUR_API_KEY kısmını API anahtarınızla değiştirin.

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:

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
}

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

Android Studio kullanıyorsanız projenizi Gradle ile senkronize edin.
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 dosyanıza .gitignore eklediğinizden (veya sürüm denetim sisteminizden hariç tuttuğunuzdan) emin olun.
Not: secrets.properties dosyası yoksa local.properties dosyasıyla aynı klasörde oluşturun.
```
MAPS_API_KEY=YOUR_API_KEY
```
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.

Not: Kodu gösterildiği şekilde girin. DEFAULT_API_KEY kısmını API anahtarınızla değiştirmeyin.
```
MAPS_API_KEY=DEFAULT_API_KEY
```
Bu dosyanın amacı, secrets.properties dosyası bulunamazsa API anahtarı için yedek bir konum sağlamaktır. Böylece derlemeler başarısız olmaz. Bu durum, uygulamayı secrets.properties dosyasını atlayan bir sürüm denetim sisteminden klonlarsanız ve API anahtarınızı sağlamak için henüz yerel olarak bir secrets.properties dosyası oluşturmadıysanız meydana gelebilir.
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: API anahtarı için önerilen meta veri adı com.google.android.geo.API_KEY'dir. Bu ada sahip bir anahtar, Flutter SDK'sı da dahil olmak üzere Android platformundaki birden fazla Google Haritalar tabanlı 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ğrulamasına izin verir. Bir uygulama yalnızca API anahtarı meta veri adlarından birini belirtebilir. Her ikisi de belirtilirse API istisna oluşturur.

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 özelliğini "secrets.properties", defaultPropertiesFileName özelliğini "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 istisna oluşturur.

iOS

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

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

import GoogleMaps

API'nizi application(_:didFinishLaunchingWithOptions:) yönteminize ekleyin ve API anahtarınızı YOUR_API_KEY ile değiştirin:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
AppDelegate.swift dosyasını kaydedip kapatın.

Tamamlanan AppDelegate.swift dosyası aşağıdakine 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.

Flutter projenizdeki web/index.html dosyasını tercih ettiğiniz IDE ile açın.

<head> etiketi içine aşağıdaki komut dosyası etiketini ekleyin ve YOUR_API_KEY yerine API anahtarınızı girin.

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

5. adım: Harita ekleme

Aşağıdaki kodda, yeni bir Flutter uygulamasına basit bir haritanın nasıl ekleneceği gösterilmektedir.

Flutter projenizdeki lib/main.dart dosyasını tercih ettiğiniz IDE ile açın.

mapController örneği oluşturmak ve ilk kullanıma hazırlamak için uygulamanızın varsayılan ana yöntemine yöntemler ekleyin veya mevcut yöntemleri güncelleyin.

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

Uygulamanızı çalıştırmak istediğiniz tüm emülatörleri veya cihazları başlatın.
Uygulamanızı çalıştırın. Şuna benzer bir çıkış alırsınız:
```
  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"): 
```
Çalıştırmak istediğiniz platformun numarasını yazın. flutter run işlevini her çağırdığınızda Flutter size bu seçenekleri sunar. Geliştirme sisteminizde çalışan bir emülatör veya bağlı bir test cihazı yoksa Flutter, Chrome'u açmayı seçmelidir.

Her platformda, Avustralya'nın Sidney şehri merkezli bir harita gösterilmelidir. Haritayı görmediyseniz API anahtarınızı uygun hedef projeye eklediğinizden emin olun.

Sonraki adımlar

API anahtarınız ve Flutter projeniz olduğuna göre artık uygulama oluşturup çalıştırabilirsiniz. Flutter için Google Haritalar paketi, başlamanıza yardımcı olabilecek birçok eğitim ve örnek uygulama sunar. Daha fazla bilgi edinmek için aşağıdaki kaynakları inceleyin:

İşaretçiyle Harita Ekleme eğitimi
Google Haritalar Platformu ile Flutter için Codelab'ler
GitHub'daki kod örnekleri

Flutter projesi oluşturun Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. adım: Gerekli yazılımı yükleyin

2. adım: Flutter için Google Haritalar paketini yeni bir projeye yükleyin

3. adım: Platform sürümünü ayarlayın

Android

iOS

4. adım: API anahtarınızı projeye ekleyin

Android

Kotlin

Modern

Kotlin

Modern

Kotlin

Modern

iOS

Web

5. adım: Harita ekleme

Sonraki adımlar

Flutter projesi oluşturun