Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Configura un progetto Flutter

Prima di configurare un progetto Flutter, assicurati di aver completato i passaggi dei prerequisiti descritti in Prima di iniziare. Dopo aver attivato la fatturazione e creato una chiave API, puoi configurare il progetto Flutter che utilizzi per sviluppare la tua app.

Passaggio 1: installa il software richiesto

Per creare un progetto utilizzando il pacchetto Google Maps per Flutter, devi installare l'SDK Flutter e configurare l'ambiente di sviluppo per la piattaforma di destinazione. Per maggiori dettagli, consulta la guida all'installazione di Flutter.

Passaggio 2: installa il pacchetto Google Maps per Flutter in un nuovo progetto

Flutter offre il pacchetto Google Maps per Flutter come plug-in Flutter.

Creare il progetto Flutter e aggiungere il plug-in Maps.

Crea un nuovo progetto Flutter utilizzando "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!
```
Il codice dell'applicazione è in google_maps_in_flutter/lib/main.dart. Per eseguire l'applicazione, digita:
```
  cd google_maps_in_flutter
  flutter run
```
Questa applicazione è destinata a iOS, Android e web. Al momento l'SDK di Google Maps non supporta le applicazioni desktop al di fuori di un browser.

Aggiungi il plug-in del pacchetto Google Maps per Flutter a questo progetto.

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

  Changed 14 dependencies!

Passaggio 3: imposta la versione della piattaforma

Android

Imposta la versione minima dell'SDK per Android.

Apri il file di configurazione android/app/build.gradle nell'IDE che preferisci.

Modifica il valore di 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
    }
    //...
  }

Quando configuri defaultConfig, specifica il tuo ApplicationID univoco.
Sincronizza le modifiche al progetto con Gradle.

iOS

Imposta la versione minima della piattaforma iOS.

Apri il file di configurazione ios/Podfile nell'IDE che preferisci.

Aggiungi le seguenti righe all'inizio di questo Podfile:

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

Passaggio 4: aggiungi la chiave API al progetto

In Prima di iniziare, hai generato una chiave API per la tua app. Ora aggiungi questa chiave al tuo progetto Flutter. Per Flutter, devi aggiungere questa chiave API a tutte le piattaforme di destinazione: iOS, Android e web.

Negli esempi riportati di seguito, sostituisci YOUR_API_KEY con la tua chiave API.

Android

Per semplificare questa attività, ti consigliamo di utilizzare il plug-in Secrets Gradle per Android.

Per installare il plug-in Secrets Gradle per Android e archiviare la chiave API:

In Android Studio, apri il file build.gradle.kts o build.gradle di primo livello e aggiungi il seguente codice al blocco plugins.

Kotlin

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

Groovy

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

Apri il file build.gradle.kts o build.gradle a livello di modulo e aggiungi il seguente codice all'elemento plugins.

Kotlin

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

Groovy

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

Se utilizzi Android Studio, sincronizza il progetto con Gradle.
Apri il file secrets.properties nella directory di primo livello, quindi aggiungi il codice seguente. Sostituisci YOUR_API_KEY con la tua chiave API. Assicurati di aggiungere secrets.properties al file .gitignore (o di escluderlo in altro modo dal sistema di controllo della versione) in modo da non inserire la chiave API nel controllo della versione.
Nota: se il file secrets.properties non esiste, crealo nella stessa cartella del file local.properties.
```
MAPS_API_KEY=YOUR_API_KEY
```
Crea il file local.defaults.properties nella directory di primo livello, la stessa cartella del file secrets.properties, quindi aggiungi il codice seguente.

Nota: inserisci il codice così come viene mostrato. Non sostituire DEFAULT_API_KEY con la tua chiave API.
```
MAPS_API_KEY=DEFAULT_API_KEY
```
Lo scopo di questo file è fornire una posizione di backup per la chiave API se il file secrets.properties non viene trovato, in modo che le build non abbiano esito negativo. Questo può accadere se cloni l'app da un sistema di controllo della versione che omette secrets.properties e non hai ancora creato un file secrets.properties localmente per fornire la tua chiave API.
Nel file AndroidManifest.xml, vai a com.google.android.geo.API_KEY e aggiorna l'attributo android:value come segue:
```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
    
```
Nota: com.google.android.geo.API_KEY è il nome dei metadati consigliato per la chiave API. Una chiave con questo nome può essere utilizzata per l'autenticazione in più API basate su Google Maps sulla piattaforma Android, incluso l'SDK Flutter. Per la compatibilità con le versioni precedenti, l'API supporta anche il nome com.google.android.maps.v2.API_KEY. Questo nome legacy consente l'autenticazione solo per l'API di Google Maps v2 per Android. Un'applicazione può specificare solo uno dei nomi dei metadati della chiave API. Se vengono specificati entrambi, l'API genera un'eccezione.

In Android Studio, apri il file build.gradle.kts o build.gradle a livello di modulo e modifica la proprietà secrets. Se la proprietà secrets non esiste, aggiungila.

Modifica le proprietà del plug-in per impostare propertiesFileName su "secrets.properties", defaultPropertiesFileName su "local.defaults.properties" e qualsiasi altra proprietà.

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

Groovy

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

Nota: come mostrato sopra, com.google.android.geo.API_KEY è il nome dei metadati consigliato per la chiave API. Una chiave con questo nome può essere utilizzata per l'autenticazione in più API basate su Google Maps sulla piattaforma Android, incluso l'SDK Flutter. Per la compatibilità con le versioni precedenti, l'API supporta anche il nome com.google.android.maps.v2.API_KEY. Questo nome legacy consente l'autenticazione solo per l'API di Google Maps per Android v2. Un'applicazione può specificare solo uno dei nomi dei metadati della chiave API. Se vengono specificati entrambi, l'API genera un'eccezione.

iOS

Aggiungi la chiave API al file AppDelegate.swift.

Apri il file ios/Runner/AppDelegate.swift nel tuo progetto Flutter con l'IDE che preferisci.
Aggiungi la seguente istruzione di importazione per aggiungere il pacchetto Google Maps per Flutter alla tua app:

import GoogleMaps

Aggiungi l'API al metodo application(_:didFinishLaunchingWithOptions:), sostituendo la chiave API con YOUR_API_KEY:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
Salva e chiudi il file AppDelegate.swift.

Il file AppDelegate.swift completato dovrebbe essere simile al seguente:

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

Aggiungi la chiave API al file dell'applicazione index.html.

Apri il file web/index.html nel tuo progetto Flutter con l'IDE che preferisci.

Aggiungi il seguente tag di script all'interno del tag <head>, sostituendo la chiave API con 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>

Salva e chiudi il file index.html.

La sezione head completa del index.html dovrebbe essere simile alla seguente:

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

Passaggio 5: aggiungi una mappa

Il seguente codice mostra come aggiungere una mappa semplice a una nuova app Flutter.

Apri il file lib/main.dart nel tuo progetto Flutter con l'IDE che preferisci.

Aggiungi o aggiorna i metodi nel metodo principale predefinito dell'app per creare e inizializzare un'istanza di 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,
                ),
              ),
            ),
          );
        }
      }

Avvia gli emulatori o i dispositivi su cui vuoi eseguire l'applicazione.
Esegui l'applicazione. Dovresti vedere un output simile al seguente:
```
  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"): 
```
Digita il numero della piattaforma che vuoi eseguire. Ogni volta che richiami flutter run, Flutter ti presenterà queste scelte. Se nel tuo sistema di sviluppo non è in esecuzione un emulatore o non è connesso un dispositivo di test, Flutter dovrebbe scegliere di aprire Chrome.

Ogni piattaforma dovrebbe mostrare una mappa centrata su Sydney, in Australia. Se non hai visto la mappa, verifica di aver aggiunto la chiave API al progetto di destinazione appropriato.

Passaggi successivi

Ora che hai una chiave API e un progetto Flutter, puoi creare ed eseguire app. Il pacchetto Google Maps per Flutter fornisce molti tutorial e app di esempio che possono aiutarti a iniziare. Per saperne di più, consulta le seguenti risorse:

Tutorial Aggiunta di una mappa con un indicatore
Codelab per Flutter con Google Maps Platform
Esempi di codice su GitHub

Configura un progetto Flutter Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Passaggio 1: installa il software richiesto

Passaggio 2: installa il pacchetto Google Maps per Flutter in un nuovo progetto

Passaggio 3: imposta la versione della piattaforma

Android

iOS

Passaggio 4: aggiungi la chiave API al progetto

Android

Kotlin

Groovy

Kotlin

Groovy

Kotlin

Groovy

iOS

Web

Passaggio 5: aggiungi una mappa

Passaggi successivi

Configura un progetto Flutter