Flutter & Mobil İle Google Maps Entegrasyonlu Rota Çizimi Nasıl Yapılır?

Flutter & Mobil İle Google Maps Entegrasyonlu Rota Çizimi Nasıl Yapılır?
Flutter & Mobil İle Google Maps Entegrasyonlu Rota Çizimi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. Flutter 3.x ve üzeri sürümler, performans ve güvenlik güncellemeleri nedeniyle zorunludur. Projenizde kullanacağınız temel kütüphaneler şunlardır:

  • google_maps_flutter: Google Haritalar'ı uygulamaya entegre etmek için temel paket.
  • flutter_polyline_points: Google Directions API'den gelen veriyi harita üzerinde çizilebilir koordinatlara dönüştürmek için kullanılır.
  • geolocator: Kullanıcının cihaz konumunu almak için gerekli servis.

Öncelikle Google Cloud Console üzerinden bir API anahtarı almalı ve hem Android (AndroidManifest.xml) hem de iOS (AppDelegate.swift) tarafında gerekli izinleri yapılandırmalısınız. API anahtarınızı asla doğrudan kod içerisinde açık metin olarak tutmayın; .env dosyaları veya güvenli yapılandırma yöntemlerini tercih edin.

Google Maps ve API Yapılandırması

Uygulamanızın harita verilerini çekebilmesi için Google Cloud Platform üzerinde "Maps SDK for Android/iOS" ve "Directions API" servislerini aktif etmeniz gerekir. Directions API, iki nokta arasındaki rota verisini (yol koordinatlarını) sağlayan ana servistir.


// AndroidManifest.xml içerisine eklenecek meta-data

Bu yapılandırma, uygulamanızın Google sunucuları ile güvenli bir şekilde iletişim kurmasını sağlar. API anahtarınızın sadece belirli paket isimleri ve SHA-1 parmak izleri ile çalışacak şekilde kısıtlandığından emin olun.

Adım Adım Rota Çizimi: Poliline Oluşturma

Rota çizimi, Directions API'den gelen karmaşık JSON verisinin PolylinePoints sınıfı ile işlenerek, Google Maps widget'ı üzerinde bir çizgi dizisine dönüştürülmesi işlemidir. Aşağıdaki örnek, iki koordinat arasında nasıl rota oluşturulacağını göstermektedir.


Future getPolylinePoints(LatLng start, LatLng end) async {
  PolylinePoints polylinePoints = PolylinePoints();
  PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    googleApiKey: "API_KEY",
    request: PolylineRequest(
      origin: PointLatLng(start.latitude, start.longitude),
      destination: PointLatLng(end.latitude, end.longitude),
      mode: TravelMode.driving,
    ),
  );

  if (result.points.isNotEmpty) {
    result.points.forEach((PointLatLng point) {
      polylineCoordinates.add(LatLng(point.latitude, point.longitude));
    });
    setState(() {});
  }
}

Bu fonksiyon, başlangıç ve bitiş noktalarını alarak API'ye istek gönderir ve dönen koordinat listesini polylineCoordinates değişkenine aktarır. setState çağrısı ile haritanın güncellenmesini tetikleriz.

Harita Üzerinde Rota Gösterimi

Koordinat listesini elde ettikten sonra, bu veriyi Google Maps widget'ının polylines parametresine bağlamamız gerekir. Bu işlem, harita üzerinde görsel bir yol çizilmesini sağlar.


GoogleMap(
  initialCameraPosition: CameraPosition(target: startLocation, zoom: 14),
  polylines: {
    Polyline(
      polylineId: PolylineId("rota"),
      points: polylineCoordinates,
      color: Colors.blue,
      width: 5,
    ),
  },
  onMapCreated: (GoogleMapController controller) {
    mapController = controller;
  },
)

Burada Polyline nesnesi, rotanın görsel stilini (renk, kalınlık) belirler. polylineId benzersiz olmalıdır, aksi takdirde harita üzerinde çakışmalar meydana gelebilir.

Karşılaştırma: Harita Servisleri ve Yöntemler

Yöntem Avantaj Dezavantaj
Google Directions API Yüksek doğruluk, trafik verisi Ücretli (kota aşımında)
OpenStreetMap (OSRM) Ücretsiz, açık kaynak Daha az detaylı trafik bilgisi

Güvenlik Uyarısı: Google Maps API anahtarınızı asla GitHub gibi herkese açık platformlarda paylaşmayın. API anahtarınızı kısıtlamalar (API restriction ve Application restriction) ile sadece kendi uygulamanızın kullanabileceği şekilde yapılandırın.

Yaygın Hatalar ve Debug İpuçları

Geliştirme sürecinde en sık karşılaşılan sorun "API Key Not Found" veya "Request Denied" hatalarıdır. Bu durum genellikle API anahtarının kısıtlamalarından veya faturalandırma hesabının bağlanmamış olmasından kaynaklanır. Ayrıca, çok uzun rotalarda API limitlerine takılmamak için rota verilerini önbelleğe almayı (caching) düşünebilirsiniz.


// Hata yakalama örneği
try {
  await fetchRoute();
} catch (e) {
  print("Rota çizilemedi: $e");
  // Kullanıcıya uygun bir hata mesajı gösterin
}

Hata yönetimi, uygulamanın çökmesini engeller ve kullanıcıya daha profesyonel bir deneyim sunar. Her zaman API yanıtlarını kontrol edin ve boş veya hatalı veri durumlarını yönetin.

Sıkça Sorulan Sorular

Google Maps rota çizimi için ücretli mi?

Google Maps Platform, aylık belirli bir ücretsiz kredi sunar. Bu kredi aşıldığında kullanım başına ücretlendirme başlar.

Rota çizimi sırasında trafik verisi alınabilir mi?

Evet, Directions API içerisinde departure_time parametresini kullanarak trafik yoğunluğuna göre rota hesaplaması yapabilirsiniz.

Harita üzerinde birden fazla rota çizebilir miyim?

Evet, polylines kümesine birden fazla Polyline nesnesi ekleyerek farklı rotaları farklı renklerle gösterebilirsiniz.

Kullanıcı konumu sürekli güncellenmeli mi?

Navigasyon uygulamalarında evet, ancak pil tüketimini optimize etmek için konum güncellemelerini belirli bir mesafe veya süre aralığına göre (geolocator ayarları ile) kısıtlamalısınız.

Rota çizimi için internet bağlantısı şart mı?

Evet, Directions API'den rota verisi almak için aktif bir internet bağlantısı gereklidir.

İleri Seviye Optimizasyon: Performans ve Bellek Yönetimi

Rota çizimi ve harita işlemleri, mobil cihazlarda yüksek bellek tüketimine ve pil ömrünün azalmasına neden olabilir. Özellikle uzun mesafeli rotalar veya çok sayıda poliline içeren haritalar için performans optimizasyonu kritiktir.

Poliline Sadeleştirme (Polyline Simplification)

Google Directions API'den dönen rota verisi bazen gereksiz derecede fazla koordinat noktası içerebilir. Bu durum, harita üzerinde çizim yaparken render performansını düşürür. Koordinatları sadeleştirmek için Douglas-Peucker algoritması gibi yöntemler kullanarak rota üzerindeki gereksiz noktaları filtreleyebilirsiniz.

Harita Bellek Yönetimi

Harita üzerinde çok fazla marker veya poliline kullanıyorsanız, kullanıcı haritayı hareket ettirdiğinde bu öğelerin yeniden oluşturulması (re-render) maliyetlidir. GoogleMapController kullanarak, sadece o an ekranda görünen (viewport) bölgedeki verileri işlemek performansı ciddi oranda artırır.

// Örnek: Poliline güncellerken setState yerine controller kullanımı
void updateRoute(List newPoints) {
  _controller.animateCamera(
    CameraUpdate.newLatLngBounds(
      calculateBounds(newPoints),
      50.0,
    ),
  );
}

Gerçek Dünya Senaryosu: Canlı Konum Takibi ve Rota Güncelleme

Bir teslimat uygulaması geliştiriyorsanız, kullanıcının konumu değiştikçe rotanın dinamik olarak güncellenmesi gerekir. Bu süreçte geolocator paketi ile konum güncellemelerini dinleyip, her yeni konumda API isteği atmak yerine belirli bir mesafe eşiği (distance filter) kullanmalısınız.

Dinamik Rota Güncelleme Mantığı

  1. Kullanıcının mevcut konumunu Geolocator.getPositionStream ile dinleyin.
  2. Konum değişikliği belirli bir metreyi (örneğin 50 metre) aştığında yeni bir rota isteği tetikleyin.
  3. Eski poliline verisini temizleyip yeni gelen veriyi haritaya işleyin.
// Konum güncellemelerini dinleme ve rota tetikleme
Geolocator.getPositionStream(
  locationSettings: const LocationSettings(
    accuracy: LocationAccuracy.high,
    distanceFilter: 50, // Her 50 metrede bir tetikle
  ),
).listen((Position position) {
  fetchRoute(
    start: LatLng(position.latitude, position.longitude),
    end: destination,
  );
});

Hata Ayıklama ve Deployment İpuçları

Uygulamanızı yayına almadan önce mutlaka şu kontrol listesini gözden geçirin:

  • API Kısıtlamaları: Google Cloud Console üzerinden API anahtarınızı mutlaka "HTTP Referrer" veya "IP" bazlı kısıtlayın.
  • Hata Yönetimi: API limitlerine takıldığınızda (OVER_QUERY_LIMIT) kullanıcıya anlamlı bir hata mesajı gösterin.
  • Çevrimdışı Mod: İnternet bağlantısı kesildiğinde son alınan rotayı önbellekte (SharedPreferences veya SQLite) tutarak kullanıcıya göstermeye devam edin.
İpucu: Rota çizimi sırasında API maliyetlerini düşürmek için "Caching" mekanizması kurun. Aynı başlangıç ve bitiş noktası için tekrar API isteği atmak yerine, yerel veritabanınızdaki sonucu kullanın.

Sonuç

Flutter & mobil ile Google Maps entegrasyonlu rota çizimi, doğru kütüphaneler ve yapılandırma ile oldukça verimli bir şekilde gerçekleştirilebilir. Bu rehberde, API yapılandırmasından poliline çizimine kadar temel süreçleri adım adım ele aldık. Bir sonraki adım olarak, kullanıcıya adım adım navigasyon (turn-by-turn navigation) özelliklerini eklemeyi veya harita üzerine özel marker'lar (işaretleyiciler) yerleştirerek deneyimi özelleştirmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce API anahtarlarınızı şifreleyin, hata yönetimini güçlendirin ve Google'ın güncel kullanım politikalarını gözden geçirin.

Bu yazıya tepkinizi paylaşın:
Deniz Arslan

On yıldır dijital içerik üretimi ve editörlük alanında çalışıyorum. Karmaşık süreçleri herkesin anlayabileceği basit ve adım adım rehberlere dönüştürme konusunda uzmanım.

Yorumlar (0)

Yorum Yaz