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

Gereksinimler ve Ön Hazırlık

Uygulamanıza başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. 2026 standartlarında Flutter 3.x ve üzeri sürümlerle çalışmanız önerilir. İhtiyacınız olan temel araçlar ve kütüphaneler şunlardır:

• Google Cloud Console hesabı ve aktif bir faturalandırma profili.
• Google Maps SDK (Android ve iOS için etkinleştirilmiş).
• Google Directions API anahtarı.
• Flutter projenize eklemeniz gereken paketler: google_maps_flutter, http (API istekleri için) ve flutter_polyline_points (rota koordinatlarını işlemek için).

Google Cloud üzerinde "Maps SDK for Android/iOS" ve "Directions API" servislerini aktif etmeyi unutmayın. Aksi takdirde harita boş görünecek ve API istekleriniz reddedilecektir.

Google Maps ve API Entegrasyonu

İlk adım, pubspec.yaml dosyanıza gerekli bağımlılıkları eklemektir. Bu paketler, harita bileşenlerini ve rota verilerini yönetmemizi sağlar.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.9.0
  http: ^1.2.0
  flutter_polyline_points: ^2.0.0

Bağımlılıkları ekledikten sonra terminalde flutter pub get komutunu çalıştırarak paketleri projenize dahil edin. Ardından, Android için android/app/src/main/AndroidManifest.xml dosyasına API anahtarınızı meta-data olarak ekleyin.

Kritik Güvenlik Uyarısı: API anahtarınızı asla doğrudan kaynak kodunuzda (hard-coded) bırakmayın. Üretim ortamında (production) anahtarlarınızı .env dosyalarında saklayın ve uygulama yayınlanırken API kısıtlamalarını (HTTP Referrer veya IP kısıtlaması) mutlaka Google Cloud Console üzerinden tanımlayın.

Rota Verilerini Google Directions API ile Alma

Harita üzerinde bir rota çizmek için başlangıç ve bitiş koordinatları arasındaki yolu "Directions API" üzerinden bir JSON verisi olarak çekmemiz gerekir. Aşağıdaki fonksiyon, belirli bir başlangıç ve bitiş noktası için API'ye istek atar.

Future getRouteData(LatLng origin, LatLng destination) async {
  String apiKey = "YOUR_API_KEY";
  String url = "https://maps.googleapis.com/maps/api/directions/json?origin=${origin.latitude},${origin.longitude}&destination=${destination.latitude},${destination.longitude}&key=$apiKey";
  
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Rota verisi alınamadı');
  }
}

Bu fonksiyon, Google'ın sunduğu rota verisini ham metin olarak döndürür. Bu verinin içindeki "overview_polyline" alanı, haritada çizilecek olan koordinat dizisini barındırır.

Koordinatları Poliline Olarak İşleme

API'den gelen karmaşık veriyi, haritanın anlayabileceği Polyline nesnesine dönüştürmemiz gerekir. flutter_polyline_points paketi, bu kodlanmış dizeyi (encoded string) koordinat listesine dönüştürmek için kullanılır.

PolylinePoints polylinePoints = PolylinePoints();
List polylineCoordinates = [];

void getPolyline(String encodedString) {
  PolylineResult result = polylinePoints.decodePolyline(encodedString);
  if (result.points.isNotEmpty) {
    result.points.forEach((PointLatLng point) {
      polylineCoordinates.add(LatLng(point.latitude, point.longitude));
    });
  }
}

Bu işlem, API'den gelen veriyi harita üzerinde görselleştirebileceğimiz bir LatLng listesine dönüştürür. Bu liste, GoogleMap widget'ı içindeki polylines parametresine aktarılacaktır.

Harita Üzerinde Rotayı Çizme

Artık elimizde koordinatlar var. Şimdi bu koordinatları harita üzerinde bir çizgi olarak gösterme zamanı. GoogleMap widget'ı içerisinde polylines kümesini tanımlayarak rotayı ekranda görselleştirebiliriz.

Set _polylines = {};

void addPolyline() {
  _polylines.add(Polyline(
    polylineId: PolylineId('rota1'),
    points: polylineCoordinates,
    color: Colors.blue,
    width: 5,
  ));
}

Bu kod bloğu, harita üzerinde 5 birim kalınlığında mavi bir çizgi oluşturur. setState fonksiyonunu kullanarak bu işlemi tetiklediğinizde, rota anlık olarak haritanın üzerine çizilecektir.

Karşılaştırma: Rota Çizim Yöntemleri

Sıkça Sorulan Sorular

Rota neden haritada görünmüyor?

Genellikle API anahtarının kısıtlamalarından veya Directions API'nin Google Cloud Console'da aktif edilmemesinden kaynaklanır. Ayrıca, başlangıç ve bitiş koordinatlarının geçerli olduğundan emin olun.

Rota çizimi için kota sınırı var mı?

Evet, Google Maps Platform'un aylık ücretsiz bir kredi limiti vardır. Bu limit aşıldığında faturalandırma başlar. Projelerinizde API çağrılarını optimize etmek için önbellekleme (caching) yöntemlerini kullanın.

Kullanıcı hareket ettikçe rota güncellenebilir mi?

Evet, Geolocator paketi ile kullanıcının konumunu takip ederek, her konum değişiminde getRouteData fonksiyonunu tekrar çağırıp rotayı yeniden çizebilirsiniz.

Poliline rengini değiştirebilir miyim?

Elbette, Polyline nesnesi içerisindeki color parametresini değiştirerek rotayı istediğiniz renkte gösterebilirsiniz.

iOS tarafında özel bir ayar gerekiyor mu?

Evet, Info.plist dosyasına konum izinlerini (NSLocationWhenInUseUsageDescription) eklemeniz zorunludur, aksi takdirde uygulama çökebilir.

Performans Optimizasyonu ve Büyük Veri Yönetimi

Google Directions API üzerinden gelen rota verileri, özellikle uzun mesafeli yolculuklarda binlerce koordinat noktası içerebilir. Bu durum, Polyline nesnesinin harita üzerinde render edilmesini zorlaştırarak uygulama performansını düşürebilir. Kullanıcı deneyimini korumak için aşağıdaki optimizasyon tekniklerini uygulamalısınız:

• Koordinat Sadeleştirme (Decimation): Rota üzerindeki her noktayı çizmek yerine, belirli bir mesafe eşiğinin altındaki noktaları filtreleyerek çizim yükünü azaltın.
• Lazy Loading: Harita görünür alanına (viewport) girmeyen rota parçalarını dinamik olarak yükleyin.
• Isolate Kullanımı: JSON verisinin parse edilmesi ve koordinatların dönüştürülmesi işlemini, ana UI thread'ini dondurmamak için compute fonksiyonu ile ayrı bir isolate içinde gerçekleştirin.

import 'package:flutter/foundation.dart';

// JSON verisini arka planda işleme
Future parseRouteInBackground(String responseData) async {
  return compute(_decodePolyline, responseData);
}

List _decodePolyline(String data) {
  // Polyline algoritması ile koordinat çözme mantığı burada çalışır
  return decodedPoints;
}

Rota Çiziminde Hata Ayıklama ve Loglama

Rota çiziminin gerçekleşmediği durumlarda sorunun API kaynaklı mı yoksa istemci tarafındaki mantıksal bir hata mı olduğunu anlamak için kapsamlı bir hata ayıklama süreci izlenmelidir. Özellikle HTTP yanıt kodlarını kontrol etmek en kritik adımdır.

Geliştirme aşamasında dio veya http paketlerini kullanırken, istek ve yanıtları konsola detaylı bir şekilde yazdırmak hata ayıklama süresini ciddi oranda kısaltır:

try {
  final response = await dio.get(apiUrl);
  if (response.statusCode == 200) {
    // İşleme devam et
  }
} catch (e) {
  debugPrint("Rota API Hatası: ${e.toString()}");
  // Kullanıcıya hata mesajı göster
}

Alternatif: Flutter Map ve OpenStreetMap Kullanımı

Google Maps yerine maliyet avantajı sağlayan veya açık kaynaklı çözümler arıyorsanız, flutter_map kütüphanesi ile OpenStreetMap (OSM) entegrasyonu harika bir alternatiftir. Bu kütüphane, OSRM (Open Source Routing Machine) ile birlikte kullanıldığında Google Maps'e benzer bir rota deneyimi sunar.

Avantajları:

1. Tamamen ücretsiz ve sınırsız kullanım (OSRM sunucusu kullanıldığında).
2. Özelleştirilebilir harita stilleri (Tile server değiştirme imkanı).
3. Daha düşük bellek tüketimi.

Bu yöntemi tercih ettiğinizde, PolylineLayer bileşenini kullanarak rotalarınızı tıpkı Google Maps'teki gibi görselleştirebilirsiniz.

Sonuç

Flutter ve Google Maps kullanarak rota çizimi yapmak, doğru kütüphaneler ve API yönetimiyle oldukça verimli bir süreçtir. Bu rehberde, API entegrasyonundan poliline çizimine kadar temel adımları tamamladınız. Bir sonraki adım olarak, harita üzerine "Marker" (işaretleyici) ekleyerek başlangıç ve bitiş noktalarını görselleştirebilir veya trafik verilerini harita katmanına dahil edebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Uygulamanızın canlıya alınması sürecinde, API anahtarlarınızın güvenliğini sağlamak ve Google Maps Platform kullanım şartlarına (Terms of Service) uyum sağlamak geliştiricinin sorumluluğundadır.

Mobil dünyada rotalarınız her zaman açık olsun. Başarılar dilerim.