Belajar Membuat Google MAP Menggunakan Flutter

Belajar Membuat Google MAP Menggunakan Flutter

2019-05-01 · 448 words · 3 minute read

Google baru-baru ini menerbitkan plugin Google Maps resmi untuk flutter. Artikel ini membahas bagaimana cara menambahkan Google Map ke project flutter dan fitur serta penyesuaian yang tersedia.

Sebelum Anda mulai membuat project flutter, Anda membutuhkan API keys supaya aplikasi dapat berjalan dengan Google Maps, untuk membuat Google Maps API key disini

Langkah-Langkah Membuat Project

Untuk membuat project baru silahkan anda masuk pada halaman berikut ini

Tambahkan key dibagian manifest.xml

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

Tambahkan dependencies google map dibagian pubspec.yaml
```
google_maps_flutter: ^0.5.11
```

Menambahkan Google Map di tampilan

class KodetrApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
     title: 'Flutter Google Maps',
      home: Scaffold(
        body: GoogleMap(
            // type dari map dengan beberapa type yakni hybrid, normal, satellite, terrain dan none
            mapType: MapType.normal,
            // posisi camera dengan menentukan lokasi berdasar latitude dan longitude
            initialCameraPosition: CameraPosition(
              target: LatLng(-8.591204, 116.116208),
              zoom: 14.4746, 
            ),
          ),
      ),
    );
  }
}

Jika anda jalankan kode tersebut, anda bisa lihat hasilnya

Jika anda ingin mengubah type map, anda tinggal memilih parameter berikut: hybrid, normal, satellite, terrain dan none.

class KodetrApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
     title: 'Flutter Google Maps',
      home: Scaffold(
        body: GoogleMap(
            // type dari map dengan beberapa type yakni hybrid, normal, satellite, terrain dan none
            mapType: MapType.satellite,
            // posisi camera dengan menentukan lokasi berdasar latitude dan longitude
            initialCameraPosition: CameraPosition(
              target: LatLng(-8.591204, 116.116208),
              zoom: 14.4746, 
            ),
        ),
      ),
    );
  }
}

Maka hasilnya untuk type map satellite.

Membuat Map dengan Zoom Controller Posision dengan Animate Camera

Menentukan posisi camera default

static final CameraPosition _kGooglePlex = CameraPosition(
   target: LatLng(-8.591204, 116.116208),
   zoom: 14.4746,
);

Menentukan posisi camera saat tombol button zoom ditekan

static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(-8.591204, 116.116208),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

Kode lengkapnya akan seperti ini

import 'dart:async';

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

void main() {
  runApp(new KodetrApp());
}

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

class AppGoogleMap extends StatefulWidget {
  @override
  State<AppGoogleMap> createState() => MapSampleState();
}

class MapSampleState extends State<AppGoogleMap> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(-8.591204, 116.116208),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(-8.591204, 116.116208),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

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

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

Jika aplikasi dijalankan maka hasilnya akan seperti berikut

Demikian yang dapat saya sampaikan dari artikel ini semoga bermanfaat, jika anda mengalami kesulitan anda bisa melihat vidio yang sudah disediakan atau melalui komentar dibawah, selamat mencoba.