Flutter İle Google Haritalar Entegrasyonu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Google Haritalar SDK'sını kullanabilmek için öncelikle Google Cloud Platform (GCP) üzerinde bir proje oluşturmanız ve faturalandırma hesabını aktif etmeniz gerekmektedir. Harita servisleri belirli bir kotaya kadar ücretsiz olsa da, API kullanımı için bir ödeme yöntemi tanımlanması zorunludur.

• Google Cloud Console üzerinde yeni bir proje oluşturun.
• Maps SDK for Android ve Maps SDK for iOS servislerini etkinleştirin.
• API anahtarınızı (API Key) oluşturun ve kısıtlamalar (restrictions) sekmesinden sadece uygulamanızın paket ismine izin verin.

Proje Yapılandırması ve Bağımlılıklar

Flutter projenizde harita özelliklerini kullanabilmek için google_maps_flutter paketini kullanacağız. Bu paket, Google'ın resmi harita kütüphanelerini Flutter ile haberleştiren bir köprü görevi görür.

pubspec.yaml dosyanıza aşağıdaki bağımlılığı ekleyerek terminal üzerinden flutter pub get komutunu çalıştırın:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.9.0

Bu işlem, gerekli kütüphanelerin projenize dahil edilmesini sağlar. Ardından Android için android/app/src/main/AndroidManifest.xml dosyasına API anahtarınızı tanımlamanız gerekir.

Adım Adım Harita Bileşeni Oluşturma

Harita bileşenini ekrana getirmek için GoogleMap widget'ını kullanırız. Bu widget, haritanın başlangıç konumunu ve kamera ayarlarını yönetmemizi sağlar. Aşağıdaki örnek kod, basit bir harita görünümü oluşturur.

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

class HaritaSayfasi extends StatefulWidget {
  @override
  _HaritaSayfasiState createState() => _HaritaSayfasiState();
}

class _HaritaSayfasiState extends State {
  late GoogleMapController haritaKontrolcusu;

  final CameraPosition baslangicKonumu = CameraPosition(
    target: LatLng(41.0082, 28.9784), // İstanbul koordinatları
    zoom: 12.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: baslangicKonumu,
        onMapCreated: (GoogleMapController controller) {
          haritaKontrolcusu = controller;
        },
      ),
    );
  }
}

Yukarıdaki kod bloğu, uygulamanızda temel bir harita penceresi açar. onMapCreated fonksiyonu, harita tamamen yüklendiğinde tetiklenir ve harita üzerinde işlem yapmamızı sağlayan kontrolcüyü bize verir.

Haritaya İşaretçi (Marker) Ekleme

Harita üzerinde belirli noktaları vurgulamak için Marker sınıfını kullanırız. İşaretçiler, kullanıcının bir konumu daha kolay anlamasına yardımcı olur. Her işaretçinin benzersiz bir MarkerId değerine sahip olması gerekir.

Set isaretciler = {};

void _isaretciEkle() {
  setState(() {
    isaretciler.add(
      Marker(
        markerId: MarkerId('konum1'),
        position: LatLng(41.0082, 28.9784),
        infoWindow: InfoWindow(title: 'İstanbul', snippet: 'Harika bir şehir'),
      ),
    );
  });
}

Bu kod, harita üzerinde bir nokta oluşturur. infoWindow özelliği ise kullanıcı işaretçiye tıkladığında açılan bilgi penceresini yönetir.

Harita Yöntemleri Karşılaştırma Tablosu

Kamera Hareketlerini Yönetme

Kullanıcıyı belirli bir konuma yönlendirmek veya haritayı animasyonlu bir şekilde hareket ettirmek için animateCamera metodunu kullanırız. Bu, kullanıcı deneyimini daha akıcı hale getiren profesyonel bir yaklaşımdır.

void _konumaGit() {
  haritaKontrolcusu.animateCamera(
    CameraUpdate.newLatLngZoom(LatLng(40.1885, 29.0610), 15.0),
  );
}

Bu fonksiyon, haritayı belirtilen koordinata belirli bir zoom seviyesinde animasyonlu olarak odaklar.

Güvenlik Uyarısı: API anahtarınızı asla doğrudan kaynak kodunuzda (Git gibi platformlarda) herkese açık paylaşmayın. Üretim ortamında (production) anahtarlarınızı .env dosyalarında saklayın ve Google Cloud konsolundan API anahtarınıza "HTTP Referrer" kısıtlaması ekleyerek kötü niyetli kullanımların önüne geçin.

Sıkça Sorulan Sorular

Harita neden boş görünüyor?

Genellikle API anahtarının AndroidManifest veya iOS Info.plist dosyalarına yanlış eklenmesinden veya API anahtarının kısıtlamalarının (restriction) çok dar olmasından kaynaklanır.

Harita üzerinde özel stil kullanabilir miyim?

Evet, Google Cloud Console üzerinden "Map Styles" oluşturabilir ve elde ettiğiniz JSON kodunu googleMapOptions içerisinde style parametresine tanımlayarak haritanın renklerini değiştirebilirsiniz.

Kullanıcı konumu nasıl alınır?

geolocator paketini kullanarak kullanıcının anlık konum verisini alabilir ve bu veriyi LatLng nesnesine dönüştürerek harita üzerinde gösterebilirsiniz.

Ücretlendirme nasıl işliyor?

Google, aylık belirli bir miktarda ücretsiz kredi sunar. Kullanımınız bu krediyi aşarsa, tanımladığınız kredi kartından otomatik olarak çekim yapılır. Kullanım limitlerini konsol üzerinden sınırlayabilirsiniz.

Harita üzerinde çizim yapabilir miyim?

Evet, Polyline veya Polygon sınıflarını kullanarak harita üzerinde rotalar çizebilir veya belirli alanları vurgulayabilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Uygulamanızda harita verilerini işlerken KVKK ve GDPR gibi kişisel veri koruma kanunlarına uygun hareket ettiğinizden emin olun.

Performans Optimizasyonu ve Bellek Yönetimi

Google Haritalar, özellikle çok sayıda işaretçi (marker) veya karmaşık poligonlar içeren uygulamalarda yüksek bellek tüketimine neden olabilir. Uygulamanızın akıcı çalışması için aşağıdaki optimizasyon stratejilerini uygulamanız kritik öneme sahiptir.

İşaretçi Kümeleme (Marker Clustering)

Ekranda yüzlerce işaretçi olduğunda, bunların her birini ayrı ayrı render etmek performansı ciddi oranda düşürür. Bunun yerine google_maps_cluster_manager gibi yardımcı kütüphaneler kullanarak, birbirine yakın işaretçileri tek bir grupta toplayabilirsiniz.

Gereksiz Render İşlemlerini Engelleme

Harita bileşeni içerisinde setState kullanırken dikkatli olunmalıdır. Tüm harita widget'ını yeniden oluşturmak yerine, sadece güncellenmesi gereken katmanları (örneğin sadece bir poligonun koordinatları) yöneten bir state yapısı kurun. Harita nesnesini onMapCreated içerisinde bir Completer ile yakalayıp, sadece ihtiyaç duyulduğunda metodlarını tetiklemek en sağlıklı yöntemdir.

// Yanlış: Her state değişiminde tüm haritayı yeniden yüklemek
// Doğru: Controller üzerinden sadece ilgili katmanı güncellemek

void _updateMarkerPosition(LatLng newPosition) {
  _controller.future.then((mapController) {
    // Sadece marker'ı güncelle, haritayı değil
    setState(() {
      _markers.clear();
      _markers.add(Marker(
        markerId: MarkerId('user_pos'),
        position: newPosition,
      ));
    });
  });
}

Üretim Ortamı (Deployment) İçin Güvenlik İpuçları

Uygulamanızı markete yüklemeden önce API anahtarınızın güvenliğini sağlamak, beklenmedik faturalar ve güvenlik açıkları ile karşılaşmamak için zorunludur.

API Anahtarı Kısıtlamaları

Google Cloud Console panelinden API anahtarınızı oluşturduktan sonra mutlaka "Application Restrictions" (Uygulama Kısıtlamaları) bölümünü yapılandırın:

• Android İçin: Uygulamanızın paket adını (package name) ve SHA-1 parmak izini ekleyin.
• iOS İçin: Uygulamanızın Bundle ID'sini ekleyin.
• API Kısıtlamaları: "API Restrictions" kısmından, sadece Maps SDK for Android ve Maps SDK for iOS servislerine izin vererek anahtarınızın başka servislerde kullanılmasını engelleyin.

Çevresel Değişkenlerin Kullanımı

API anahtarınızı doğrudan kod içerisinde (hardcoded) bırakmak yerine, .env dosyaları veya Flutter'ın --dart-define özelliğini kullanarak derleme aşamasında enjekte edin. Bu sayede anahtarınızın kaynak kodlarınızla birlikte sürüm kontrol sistemlerine (GitHub vb.) sızmasını önlemiş olursunuz.

// Derleme aşamasında anahtarı geçirme örneği:
// flutter build apk --dart-define=GOOGLE_MAPS_API_KEY=AIzaSy...

const String apiKey = String.fromEnvironment('GOOGLE_MAPS_API_KEY');

İpucu: Uygulamanızın trafik kullanımını Google Cloud Console üzerinden düzenli olarak kontrol edin. "Budget Alerts" (Bütçe Uyarıları) kurarak, günlük kullanım belirli bir tutarı geçtiğinde bildirim almayı unutmayın.

Sonuç

Flutter ile Google Haritalar entegrasyonu, doğru adımları izlediğinizde oldukça verimli bir süreçtir. Bu makalede harita kurulumundan işaretçi yönetimine ve kamera hareketlerine kadar temel yapı taşlarını öğrendiniz. Bir sonraki adım olarak, geolocator kütüphanesini projeye dahil ederek kullanıcı konumunu harita üzerinde canlı takip eden bir "Canlı Konum Takip" uygulaması geliştirmeyi deneyebilirsiniz.