Flutter Google Maps

How to integrate Google Maps in Flutter

Pengenalan

Perkembangan Flutter dari hari ke hari sepertinya semakin melesat naik ini terbuktinya dari jumlah penggunanya yang semakin bertambah. Dan berikut hasil google trends jika kita lihat berdasarkan pada waktu tulisan ini diterbitkan.

Perbandingan Flutter dengan React Native di seluruh dunia

Pada gambar diatas menunjukkan bahwa ketenaran Flutter semakin hari semakin naik jika kita filter berdasarkan seluruh dunia. Lalu, bagaimana pula dengan perkembangan Flutter di negara Indonesia. Berikut hasilnya.

Perbandingan Flutter dengan React Native di Indonesia

Bisa kita lihat juga bahwa hasilnya tidak jauh berbeda dengan filter seluruh dunia. Dari hasil kedua gambar tersebut saya dapat ambil kesimpulan bahwa penggunaan teknologi Flutter sepertinya semakin lama semakin meningkat. Jadi, saya sebagai developer Android yang lagi belajar Flutter ingin ikut juga meramaikan tulisan-tulisan di internet mengenai Flutter.

Pada tulisan ini kita akan mengkombinasikan kedua produk Google yang sangat hebat dan keren yaitu Flutter dengan Google Maps. Berdasarkan tulisan ini diterbitkan saya lihat di situs https://pub.dev sepertinya Google Maps masih dalam tahap pengembangan untuk bisa diintegrasikan dengan Flutter. Tapi, walaupun masih dalam tahap pengembangan bukan berarti kita tidak bisa mencobanya.

google_maps_flutter | Flutter Package

Package Google Maps masih tahap Developers Preview

Requirement

Pada artikel ini saya anggap kita semua telah memasang Flutter dengan benar di lokalnya masing-masing dan sudah bisa berjalan dengan baik.

Getting Started

Sekarang kita buat projek baru dengan nama flutter_google_maps. Pada artikel ini saya menggunakan Intellij IDEA sebagai IDE-nya.

Pembuatan projek

Google Maps API Key

Sekarang kita coba buat API Key yang kita perlukan untuk kita pakai di aplikasi kita. Karena Flutter bisa berjalan di Android dan iOS maka, dibagian pengaturannya kita harus mengaktifkan SDK untuk Android dan iOS.

Aktifkan Maps SDK untuk Android dan iOS

Jika sudah kita aktifkan jangan lupa kita catat API Key-nya.

Installing Package

Selanjutnya, kita buka file pubspec.yaml dan tambahkan dependency google maps-nya seperti berikut.

Pasang package google maps flutter

Harap menggunakan versi google_maps_flutter yang terbaru. Saat tulisan ini diterbitkan google_maps_flutter versi-nya ^0.5.19+2

Jika sudah, sekarang jalankan perintah flutter packages get untuk mengunduh package-nya ke projek kita.

Android

Di sisi Android, kita perlu setup API Key-nya didalam file AndroidManifest.xml dan tambahkan kode berikut.

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="flutter_google_maps"
    android:icon="@mipmap/ic_launcher">
    <activity
        ...
    </activity>
    <!-- Tambahkan kode berikut -->
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="API KEY GOOGLE MAPS" />
</application>

iOS

Lalu, di sisi iOS-nya kita perlu kode berikut di file ios/Runner/AppDelegate.m jika kita menggunakan Objective C.

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"API KEY GOOGLE MAPS"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Dan jika kita menggunakan Swift maka kita tambahkan kode berikut di dalam file ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("API KEY GOOGLE MAPS")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Selanjutnya, kita buka file ios/Runner/Info.plist dan tambahkan key io.flutter.embedded_views_preview lalu kita set nilai-nya ke true seperti pada gambar berikut.

Tambahkan key di file Info.plist

main.dart

Sekarang kita buka file main.dart dan buat kodenya menjadi seperti berikut.

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

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Flutter'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: LatLng(3.595196, 98.672226),
          zoom: 14.0,
        ),
      ),
    );
  }
}

Testing

Sekarang coba jalankan pada Android dan iOS. Jikalau berhasil seharusnya tampilannya seperti berikut.

Testing Menampilkan Google Maps

Markers

Kita sudah berhasil menampilkan Google Maps di aplikasi Flutter-nya. Sekarang kita coba untuk menampilkan marker di Google Maps-nya. Ubah widget HomeScreen menjadi seperti berikut.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final Set<Marker> _markers = {};
  final LatLng _currentPosition = LatLng(3.595196, 98.672226);

  @override
  void initState() {
    _markers.add(
      Marker(
        markerId: MarkerId("3.595196, 98.672226"),
        position: _currentPosition,
        icon: BitmapDescriptor.defaultMarker,
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Flutter'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: _currentPosition,
          zoom: 14.0,
        ),
        markers: _markers,
      ),
    );
  }
}

Sekarang coba jalankan lagi programnya. Seharusnya tampilannya akan menjadi seperti berikut.

Testing Menampilkan Marker

Google Maps onTap

Selanjutnya kita coba tambahkan fungsi agar kita bisa tambahkan jumlah marker-nya sesuai dengan koordinat yang kita tap. Caranya kita cukup tambahkan kode berikut didalam widget GoogleMap.

onTap: (position) {
  setState(() {
    _markers.add(
      Marker(
        markerId:
            MarkerId("${position.latitude}, ${position.longitude}"),
        icon: BitmapDescriptor.defaultMarker,
        position: position,
      ),
    );
  });
}

Sekarang coba test jalankan lagi programnya dan tap koordinat yang ada di Google Maps sehingga tampilannya akan menjadi seperti berikut.

Testing Google Maps onTap

Kesimpulan

Untuk saat ini hanya itu saja yang bisa saya contohkan dan masih banyak lagi hal yang bisa kita lakukan selain fungsi-fungsi yang sudah saya jelaskan pada artikel ini. Silakan explore sendiri ya.

CoderJava/Flutter-Google-Maps