flutter.it
Tutti i tutorial
Integrare Google Maps in Flutter con google_maps_flutter
GuideIntermedio40 min Flutter 3.x

Integrare Google Maps in Flutter con google_maps_flutter

Le mappe sono un componente fondamentale in moltissime app: dalla ricerca di locali alla visualizzazione di percorsi. In questo tutorial vedremo come integrare Google Maps in un'app Flutter utilizzando il pacchetto ufficiale google_maps_flutter.

Partiremo dalla configurazione delle chiavi API su Android e iOS, mostreremo una mappa interattiva, aggiungeremo dei marker personalizzati e infine gestiremo la posizione dell'utente centrando la camera sulle coordinate desiderate.

Prerequisiti: un progetto Flutter funzionante, un account Google Cloud con la fatturazione attiva per generare le chiavi API.

  1. 1

    Ottenere le chiavi API di Google Maps

    Prima di scrivere codice serve una chiave API valida.

    1. Vai sulla Google Cloud Console.
    2. Crea un nuovo progetto (o selezionane uno esistente).
    3. Abilita le API: Maps SDK for Android e Maps SDK for iOS.
    4. Vai su Credenziali → Crea credenziali → Chiave API.
    5. Copia la chiave generata: la useremo nei prossimi passi.

    È consigliato limitare la chiave per applicazione (package name + SHA-1 per Android, bundle ID per iOS) per motivi di sicurezza.

    Risultato atteso

    Hai una chiave API valida con Maps SDK abilitato per Android e iOS.

  2. 2

    Aggiungere la dipendenza al progetto

    Aggiungi il pacchetto google_maps_flutter al tuo pubspec.yaml. Aggiungiamo anche geolocator che useremo più avanti per la posizione dell'utente.

    dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.9.0
  geolocator: ^13.0.1

    Risultato atteso

    Dopo `flutter pub get` i pacchetti sono installati senza errori.

  3. 3

    Configurare Android e iOS

    Android — Apri android/app/src/main/AndroidManifest.xml e inserisci la chiave dentro il tag <application>.

    Assicurati inoltre che minSdkVersion sia almeno 21 in android/app/build.gradle.

    iOS — Apri ios/Runner/AppDelegate.swift e registra la chiave prima del return.

    Aggiungi anche i permessi di localizzazione (li useremo più avanti) in ios/Runner/Info.plist:

    <key>NSLocationWhenInUseUsageDescription</key>
<string>L'app usa la posizione per mostrarla sulla mappa</string>

    <!-- AndroidManifest.xml, dentro <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="LA_TUA_CHIAVE_API"/>

// AppDelegate.swift
import GoogleMaps

@main
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("LA_TUA_CHIAVE_API")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

    Risultato atteso

    Le piattaforme sono configurate con la chiave API e i permessi necessari.

  4. 4

    Mostrare la prima mappa interattiva

    Creiamo un widget StatefulWidget che mostra un GoogleMap centrato su una posizione iniziale. Usiamo un Completer per ottenere il controller della mappa, utile per manipolare la camera in seguito.

    La proprietà initialCameraPosition definisce dove parte la mappa: target sono le coordinate e zoom il livello di ingrandimento.

    import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final Completer<GoogleMapController> _controller = Completer();

  static const CameraPosition _initialPosition = CameraPosition(
    target: LatLng(45.4642, 9.1900), // Milano
    zoom: 13,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps')),
      body: GoogleMap(
        initialCameraPosition: _initialPosition,
        myLocationButtonEnabled: false,
        onMapCreated: (controller) => _controller.complete(controller),
      ),
    );
  }
}

    Risultato atteso

    Avviando l'app vedi una mappa interattiva centrata su Milano, con zoom e pan funzionanti.

  5. 5

    Aggiungere marker personalizzati

    Un marker rappresenta un punto di interesse sulla mappa. Ogni marker ha un markerId univoco, una posizione e opzionalmente una InfoWindow che appare al tocco.

    Aggiungiamo un Set<Marker> allo stato e lo passiamo alla proprietà markers del GoogleMap. Con BitmapDescriptor.defaultMarkerWithHue possiamo cambiarne il colore.

    final Set<Marker> _markers = {
  const Marker(
    markerId: MarkerId('duomo'),
    position: LatLng(45.4641, 9.1919),
    infoWindow: InfoWindow(
      title: 'Duomo di Milano',
      snippet: 'Piazza del Duomo',
    ),
  ),
  Marker(
    markerId: const MarkerId('castello'),
    position: const LatLng(45.4705, 9.1795),
    icon: BitmapDescriptor.defaultMarkerWithHue(
      BitmapDescriptor.hueGreen,
    ),
    infoWindow: const InfoWindow(title: 'Castello Sforzesco'),
  ),
};

// Nel widget GoogleMap aggiungi:
// markers: _markers,

    Risultato atteso

    Sulla mappa compaiono due marker; toccandoli si apre la InfoWindow con titolo e descrizione.

  6. 6

    Ottenere la posizione dell'utente e centrare la camera

    Usiamo geolocator per richiedere i permessi e ottenere la posizione corrente. Poi animiamo la camera verso quelle coordinate con animateCamera e aggiungiamo un marker sulla posizione dell'utente.

    Ricorda di gestire il caso in cui i permessi vengano negati.

    import 'package:geolocator/geolocator.dart';

Future<void> _goToUserLocation() async {
  // Verifica e richiede i permessi
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) return;
  }
  if (permission == LocationPermission.deniedForever) return;

  final position = await Geolocator.getCurrentPosition();
  final controller = await _controller.future;

  await controller.animateCamera(
    CameraUpdate.newCameraPosition(
      CameraPosition(
        target: LatLng(position.latitude, position.longitude),
        zoom: 15,
      ),
    ),
  );

  setState(() {
    _markers.add(
      Marker(
        markerId: const MarkerId('me'),
        position: LatLng(position.latitude, position.longitude),
        infoWindow: const InfoWindow(title: 'Sei qui'),
      ),
    );
  });
}

// Aggiungi un FloatingActionButton allo Scaffold:
// floatingActionButton: FloatingActionButton(
//   onPressed: _goToUserLocation,
//   child: const Icon(Icons.my_location),
// ),

    Risultato atteso

    Premendo il pulsante la mappa si sposta con un'animazione sulla posizione reale dell'utente, mostrando un marker 'Sei qui'.

  7. 7

    Buone pratiche e conclusioni

    Hai integrato Google Maps in Flutter con successo! Alcuni consigli finali:

    • Sicurezza chiavi: limita sempre le chiavi API per package/bundle e SHA-1 e monitora l'utilizzo nella console per evitare costi imprevisti.
    • Performance: con molti marker valuta il clustering usando pacchetti come google_maps_cluster_manager.
    • Permessi: mostra all'utente una spiegazione chiara prima di richiedere la posizione.
    • Stili personalizzati: puoi applicare uno stile custom alla mappa con controller.setMapStyle(jsonString) generato da Snazzy Maps.

    Con queste basi puoi costruire funzionalità avanzate come tracciamento di percorsi (Polyline), aree evidenziate (Polygon) e ricerca di luoghi tramite le Places API.

    Risultato atteso

    Hai un'app funzionante con mappa interattiva, marker e geolocalizzazione, pronta per essere estesa.

CondividiXLinkedInFacebookWhatsApp

Commenti (0)

Ancora nessun commento. Inizia tu!