Ein Flutter-Projekt einrichten

Bevor Sie ein Flutter-Projekt einrichten, müssen Sie die unter Vorbereitung beschriebenen Schritte ausführen. Nachdem Sie die Abrechnung aktiviert und einen API-Schlüssel erstellt haben, können Sie das Flutter-Projekt für die Entwicklung Ihrer Anwendung einrichten.

Schritt 1: Erforderliche Software installieren

Wenn Sie ein Projekt mit dem Google Maps for Flutter-Paket erstellen möchten, müssen Sie das Flutter SDK installieren und eine Entwicklungsumgebung für Ihre Zielplattform einrichten. Weitere Informationen finden Sie in der Installationsanleitung für Flutter.

Schritt 2: Google Maps for Flutter-Paket in einem neuen Projekt installieren

Flutter bietet das Google Maps for Flutter-Paket als Flutter-Plug-in an.

Erstellen Sie das Flutter-Projekt und fügen Sie das Maps-Plug-in hinzu.

  1. Stellen Sie mit „flutter create“ ein neues Flutter-Projekt: 
      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!
    Sie finden Ihren Anwendungscode unter google_maps_in_flutter/lib/main.dart. Geben Sie Folgendes ein, um die Anwendung auszuführen: 
      cd google_maps_in_flutter
  flutter run
    Diese Anwendung ist für iOS, Android und das Web gedacht. Das Google Maps SDK unterstützt derzeit keine Anwendungen auf dem Computer, die nicht in einem Browser ausgeführt werden.
  2. Fügen Sie dem Projekt das Plug-in für das Paket „Google Maps for Flutter“ hinzu: 
    flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

Schritt 3: Plattformversion festlegen

Android

Legen Sie die mindestens erforderliche SDK-Version für Android fest.

  1. Öffnen Sie die Konfigurationsdatei android/app/build.gradle in Ihrer bevorzugten IDE.
  2. Ändern Sie den Wert von android.defaultConfig.minSdkVersion in 21: 
      android {
    //...
    defaultConfig {
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 21     // Set to 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    //...
  }
  3. Legen Sie bei der Konfiguration der defaultConfig Ihre eigene eindeutige Anwendungs-ID fest.
  4. Speichern Sie die Datei und synchronisieren Sie die Änderungen an Ihrem Projekt mit Gradle.

iOS

Legen Sie die mindestens erforderliche iOS-Plattformversion fest.

  1. Öffnen Sie die Konfigurationsdatei ios/Podfile in Ihrer bevorzugten IDE.
  2. Fügen Sie am Anfang dieser Podfile-Datei die folgenden Zeilen ein: 
      # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'

Schritt 4: API-Schlüssel zum Projekt hinzufügen

Während der Vorbereitung haben Sie einen API-Schlüssel für Ihre Anwendung generiert. Diesen Schlüssel müssen Sie jetzt dem Flutter-Projekt hinzufügen. Bei Flutter müssen Sie diesen API-Schlüssel allen Zielplattformen hinzufügen: iOS, Android und Web.

Ersetzen Sie YOUR_API_KEY in den folgenden Beispielen durch Ihren API-Schlüssel.

Android

Sie können das Secrets Gradle-Plug-in für Android verwenden, um diese Aufgabe zu optimieren.

So installieren Sie das Secrets Gradle-Plug-in für Android in Ihrem Google Maps-Projekt:

  1. Öffnen Sie in Android Studio die Datei build.gradle oder build.gradle.kts auf oberster Ebene und fügen Sie den folgenden Code in das dependencies-Element unter buildscript ein.

    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. Öffnen Sie die Datei build.gradle auf Modulebene und fügen Sie den folgenden Code in das plugins-Element ein.

    Groovy

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

    Kotlin

    plugins {
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}
  3. In der Datei build.gradle auf Modulebene müssen targetSdk und compileSdk auf 34 gesetzt sein.
  4. Speichern Sie die Datei und synchronisieren Sie Ihr Projekt mit Gradle.
  5. Öffnen Sie die Datei secrets.properties im Verzeichnis der obersten Ebene und fügen Sie den folgenden Code ein. Ersetzen Sie dabei YOUR_API_KEY durch Ihren eigenen API-Schlüssel. Speichern Sie den Schlüssel in dieser Datei, da secrets.properties nicht in ein Versionsverwaltungssystem eingecheckt werden kann. 
    MAPS_API_KEY=YOUR_API_KEY
  6. Speichern Sie die Datei.

  7. Erstellen Sie die Datei local.defaults.properties im Verzeichnis der obersten Ebene, im selben Ordner wie die Datei secrets.properties, und fügen Sie folgenden Code ein.

    MAPS_API_KEY=DEFAULT_API_KEY

    Diese Datei ist ein Ersatzspeicherort für den API-Schlüssel, damit Builds nicht fehlschlagen, falls die Datei secrets.properties nicht gefunden wird. Das kann passieren, wenn Sie die App aus einem Versionsverwaltungssystem klonen, in dem secrets.properties nicht vorhanden ist, und noch keine lokale Datei secrets.properties erstellt haben, um Ihren API-Schlüssel bereitzustellen.

  8. Speichern Sie die Datei.
  9. Gehen Sie in der Datei AndroidManifest.xml zu com.google.android.geo.API_KEY und aktualisieren Sie das android:value attribute. Falls das <meta-data>-Tag nicht vorhanden ist, erstellen Sie es als untergeordnetes Element des <application>-Tags. 
    <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

    Note: com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception.

  10. In Android Studio, open your module-level build.gradle or build.gradle.kts file and edit the secrets property. If the secrets property does not exist, add it.

    Edit the properties of the plugin to set propertiesFileName to secrets.properties, set defaultPropertiesFileName to local.defaults.properties, and set any other properties.

    Groovy

    secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Kotlin

secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Hinweis: Für den API-Schlüssel wird com.google.android.geo.API_KEY als Metadatenname empfohlen (siehe oben). Ein Schlüssel mit diesem Namen kann zur Authentifizierung bei mehreren Google Maps-basierten APIs auf der Android-Plattform verwendet werden, einschließlich Flutter SDK. Aus Gründen der Abwärtskompatibilität unterstützt die API auch den Namen com.google.android.maps.v2.API_KEY. Für diesen alten Namen wird nur die Authentifizierung bei Version 2 der Android Maps API unterstützt. In der App können nicht beide Metadatennamen für den API-Schlüssel angegeben werden, sondern nur jeweils einer. Falls beide angegeben werden, gibt die API eine Ausnahme aus.

iOS

Fügen Sie der Datei AppDelegate.swift Ihren API-Schlüssel hinzu.

  1. Öffnen Sie die Datei ios/Runner/AppDelegate.swift in Ihrem Flutter-Projekt in Ihrer bevorzugten IDE.
  2. Geben Sie die folgende Importanweisung an, um das Google Maps for Flutter-Paket in Ihre Anwendung einzubinden:
    3. import GoogleMaps
  3. Fügen Sie Ihre API der Methode application(_:didFinishLaunchingWithOptions:) hinzu und ersetzen Sie Ihren API-Schlüssel durch YOUR_API_KEY: 
    GMSServices.provideAPIKey("YOUR_API_KEY")
  4. Speichern und schließen Sie die Datei AppDelegate.swift.

Die fertige Datei AppDelegate.swift sollte in etwa so aussehen:

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

Fügen Sie der Anwendungsdatei index.html Ihren API-Schlüssel hinzu.

  1. Öffnen Sie die Datei web/index.html in Ihrem Flutter-Projekt in Ihrer bevorzugten IDE.
  2. Fügen Sie das folgende Skript-Tag in das <head>-Tag ein und ersetzen Sie dabei Ihren API-Schlüssel durch 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. Speichern und schließen Sie die Datei index.html.

    Der fertige head-Abschnitt der Datei index.html sollte in etwa so aussehen:

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

Schritt 5: Eine Karte hinzufügen

Mit dem nachstehenden Code wird eine einfache Karte in die neue Flutter-Anwendung eingefügt.

  1. Öffnen Sie die Datei lib/main.dart in Ihrem Flutter-Projekt in Ihrer bevorzugten IDE.
  2. Fügen Sie der standardmäßigen Main-Methode Ihrer Anwendung Methoden hinzu oder aktualisieren Sie sie, um eine Instanz vom mapController zu erstellen und zu initialisieren. 
          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,
                ),
              ),
            ),
          );
        }
      }
  3. Starten Sie alle Emulatoren oder Geräte, auf denen Ihre Anwendung ausgeführt werden soll.
  4. Führen Sie die Anwendung aus. Die Ausgabe sollte in etwa so aussehen: 
      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"):

    Geben Sie die Nummer der Plattform ein, die Sie ausführen möchten. Jedes Mal, wenn Sie flutter run aufrufen, haben Sie in Flutter diese Optionen. Wenn in Ihrem Entwicklungssystem kein Emulator ausgeführt wird oder kein Testgerät damit verbunden ist, wird normalerweise Chrome geöffnet.

    Auf jeder Plattform sollte eine Karte angezeigt werden, auf der Sydney, Australien in der Mitte liegt. Wenn Sie die Karte nicht sehen konnten, prüfen Sie, ob Sie Ihren API-Schlüssel dem richtigen Zielprojekt hinzugefügt haben.

Nächste Schritte

Da Sie nun einen API-Schlüssel und ein Flutter-Projekt haben, können Sie Anwendungen erstellen und ausführen. Das Google Maps for Flutter-Paket enthält viele Tutorials und Beispielanwendungen zum Einstieg. Weitere Informationen finden Sie in den folgenden Ressourcen: