Menggunakan Google Map di Flutter

Jika kita ingin menampilkan peta pada aplikasi, tentu saja Google Map menjadi salah satu opsi, yang sangat banyak digunakan. Google Map atau yang disebut juga dengan Google Maps Platform adalah platform yang disediakan oleh Google untuk ngehandle hal-hal terkait lokasi seperti menampilkan peta (statik maupun dinamik), perutean, jarak, pencarian lokasi dan banyak hal lainnya.

Kenapa menggunakan Google Map?

1. Android merupakan salah satu jenis smartphone yang sangat banyak digunakan. Google map tersedia secara default di android, dan sangat familiar bagi seluruh pengguna android. Karena hal ini, tentu kita juga ingin memberikan data / peta yang sangat familiar bagi pengguna kan?
2. Tidak jarang pengguna menambahkan / memperbarui data lokasi di Google Map, baik secara suka rela, ataupun keperluan bisnis. Tidak hanya itu, Google juga memiliki pegawai yang akan berkeliling, untuk memperbarui datanya. Hal-hal ini menyebabkan data di Google Map menjadi lebih update.
3. Jika berbicara dengan angka. Google map telah mencakup 99% data dunia (lebih dari 200 negara dan wilayah), 25 juta pembaruan harian, dan 1 miliar pengguna aktif bulanan.
4. Dikembangkan oleh Google :3

Sebelum kita ke code, jangan lupa cek pricingnya ya. Ada beberapa perubahan di design pricingnya, namun berdasarkan info yang mimin dapatkan, map statis untuk mobile masih gratis.

Oke sekarang kita ke codenya, Yuk Ngoding 😀

1. API Key

API Key dibutuhkan agar kita dapat menggunakan layanan yang disediakan oleh google map nantinya. Dan tentunya kita juga bisa melihat analisis penggunaan dari API yang kita gunakan.

• Buka dan login pada website Google Cloud Platform
• Buka halaman Google Map Platform, pada menu sisi kiri

• Jika kita ingin menggunakan map untuk project android, klik ENABLE pada Maps SDK for Android. Sedangkan untuk iOS, klik ENABLE pada Maps SDK for iOS.

“Kita juga bisa melakukan hal yang sama, melalui search”

• Setelah enable, kita akan melakukan pembuatan credential, klik menu Credentials

• Lalu klik CREATE CREDENTIALS

• Copy API key yang tertera, untuk kita gunakan nanti. Restrict Key digunakan untuk membatasi penggunaan dari API key, baik berdasarkan platform (seperti: Android, iOS) atau berdasarkan API (seperti: Place API, Directions API)

• API Key yang telah kita buat, akan tertera di menu Credentials

2. Setup project – Android

Atur minSdkVersion pada file android/app/build.gradle menjadi seperti berikut:

android {
    defaultConfig {
        minSdkVersion 20
    }
}

Lalu tambahkan API Key pada android/app/src/main/AndroidManifest.xml

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

3. Setup project – iOS

Pada iOS dibutuhkan SDK 9.0 atau yang lebih tinggi. Pengaturan dapat dilakukan pada file Runner > General > Deployment Info.

Selanjutnya kita akan menambahkan API Key. Jika menggunakan ios/Runner/AppDelegate.m perbarui code menjadi seperti berikut ini:

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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Jika menggunakan swift, perbaiki code pada ios/Runner/AppDelegate.swift menjadi seperti berikut ini:

import UIKit
import Flutter
import GoogleMaps

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

4. Map sederhana

Gunakan code berikut ini:

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: GoogleMapSample(),
    );
  }
}

class GoogleMapSample extends StatefulWidget {
  @override
  State<GoogleMapSample> createState() => GoogleMapSampleState();
}

class GoogleMapSampleState extends State<GoogleMapSample> {
  Completer<GoogleMapController> _controller = Completer();

  CameraPosition _mapInitialPosition = CameraPosition(
    target: LatLng(-6.1753924, 106.8271528),
    zoom: 15.0,
  );

  CameraPosition _anotherPosition = CameraPosition(
    target: LatLng(-6.3753924, 106.9271528),
    zoom: 15.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _mapInitialPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _moveCamera,
        label: Text('GO'),
        icon: Icon(Icons.directions_walk),
      ),
    );
  }

  Future<void> _moveCamera() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_anotherPosition));
  }
}

• mapType digunakan untuk menampilkan type peta seperti apa yang kita inginkan. Terdapat beberapa type seperti none, normal, satellite, terrain dan hybrid. Properti ini memiliki nilai default normal.
• Function _moveCamera akan membuat peta berpindah ke titik lokasi tujuan.

Sekian tulisan kali ini, dan pada tulisan selanjutnya kita akan bahas lebih detail tentang Google Map dan hal menarik lainnya ya. Terimakasih dan semoga bermanfaat ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Membuat animasi dengan Motion Layout di Android (Part-1)
• Map di Android dengan menggunakan mapbox (Part 1)
• Memulai dengan Kotlin Multiplatform
• Penyimpanan data lokal pada Flutter (shared_preferences)
• Mengelompokkan Berbagai Widget dengan Column