Google Maps in Flutter 2.0

,Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Implementation of Google Maps in your Flutter App”. Nantinya saya juga akan menggunakan Google Maps API Key, Mari disimak yuk.

Create Google API Key

  1. Pertama, buat project baru pada aplikasi Flutter dengan nama flutter_google_maps.
Project baru dengan nama flutter_google_maps

2. Langkah selanjutnya ialah menambahkan dependecies “google_maps_flutter” pada pubspec.yaml yang bisa kita dapatkan dari https://pub.dev/.

dependencies:
  google_maps_flutter: ^2.0.6

3. Kemudian kita menuju console.developers.google.com/ untuk mangkases Google Maps API Key. Pilih menu APIs & Services, kemudian klik Library.

Menu APIs & Services > Library

4. Search Maps SDK for Android lalu klik enable (tersedia)

Maps SDK for Android > Enabled

5. Pilih Menu APIs & Services kemudian pilih Credential.

Menu APIs & Services > Credential

6. Lalu Create Credential

Create Credential

7. Selamat! kita sudah mendapatkan API Key dari Google

API Key Google

8. Tambahkan meta data yang didapat dari pub.dev > google_maps_flutter > read me. Kemudian copy dan pindah ke project flutter pada app > main > AndroidManifest.xml. Buat saja dibawah <application ya.

set up YOUR KEY HERE dengan API Key Google masing-masing.

Siap! Kita sudah bisa langsung membuat tampilannya.

Membuat Tampilan

  1. Pada main.dart, buat class steless sebagai berikut.
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapPage(), //ubah disini yah
    );
  }
}

Import yang dibutuhkan ini yah.

import 'package:flutter/material.dart';
import 'package:flutter_google_maps2/ui/map_page.dart';

2. Buat package baru didalam lib dengan ui dan file dengan nama map_page.dart. Kemudian buat class stful sebagai berikut.

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

3. Kembali ke main.dart dan import library yang dibutuhkan.

4. Pada kelas map_page.dart kita membuat body dengan ListView karna kita akan menampilkan beberapa Map nantinya.

class _MapPageState extends State<MapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Maps in Flutter"),
        backgroundColor: Colors.blueGrey,
      ),
      body: ListView(         // menggunakanlist view karna ingin menampilkan beberapa maps
        children: <Widget>[
       ],
     ),
   }
}

5. Kemudian kita akan mencari Latitude & Longitude. Disini saya ingin menampilkan map Udacoding, dan Ancol. Teman-teman boleh mencari yang lain kok.

Latitude & Longitude bisa kita dapatkan pada bagian atas link pada tempat yang kita cari. Disini saya menampilkan Latitude & Longitude dari Udacoding ya.

6. Kemudian kita buat variabelnya , final tipenya latlang lalu kita beri nama sesuai tempat yang sudah dicari, kemudian kita inisialiasasikan dan tambahkan nilai latitude dan langitude nya.

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  // tempat untuk membuat variabel

  final LatLng udacoding = LatLng(-6.296951600000007, 106.6984811);
  final LatLng ancol = LatLng(-6.1329751, 8266873);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Maps in Flutter"),
        backgroundColor: Colors.blueGrey,
      ),
      body: ListView(
        // nampilin list view karna ingin nampilin beberapa maps
        children: <Widget>[ ]
     ),
    ),
   }
  }

7. Kemudian kita membuat Card serta menampilkan map

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  // tempat untuk membuat variabel

  final LatLng udacoding = LatLng(-6.296951600000007, 106.6984811);
  final LatLng ancol = LatLng(-6.1329751, 8266873);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Maps in Flutter"),
        backgroundColor: Colors.blueGrey,
      ),
      body: ListView(
        // nampilin list view karna ingin nampilin beberapa maps
        children: <Widget>[
          //coba buat didalam card
          Card(
             child: Padding(
               padding: EdgeInsets.all(32.0),
            child: Column(
              children: <Widget>[
                Text(
                  'Udacoding',
                  style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.red),
                ),

                // kita tampilin map nya
                Center(
                  child: SizedBox(
                    width: 300.0,
                    height: 300.0,
                    child: GoogleMap( //ctrl+p disini
                      //bikin dulu google maps, lalu ctrl+p dan tambahkan initialcamera
                      // initialcamera position berfungsi sebagai titik fokus pertama kali yang akan ditampilkan
                      initialCameraPosition: CameraPosition(
                        target: udacoding,
                        zoom: 11.0,
                              
                      ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

8. Kemudian kita akan memberi pin merah atau tanda diatas.

 markers: <Marker>[
                        // 1
                        Marker(
                          markerId: MarkerId('udacoding'), // baru diisi dari sini
                          position: udacoding,
                          infoWindow: InfoWindow(title: 'Udacoding'),
                        ),
                      ].toSet(), //2 baru buat to set

9. Tambahkan gesture recognizers.

 //tambahkan gecture untuk mudah scrol dan pindah2
                      gestureRecognizers:
                          <Factory<OneSequenceGestureRecognizer>>[
                        //bertipe factory
                        Factory<OneSequenceGestureRecognizer>(
                            () => ScaleGestureRecognizer())
                      ].toSet(), //ingat ya tambahkan ini dulu baru isi factor ditengahnya

10. Berikut codingan lengkapnya ya :

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  // tempat untuk membuat variabel
  
  final LatLng udacoding = LatLng(-6.296951600000007, 106.6984811);
  final LatLng ancol = LatLng(-6.1329751, 8266873);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Maps in Flutter"),
        backgroundColor: Colors.blueGrey,
      ),
      body: ListView(
        // nampilin list view karna ingin nampilin beberapa maps
        children: <Widget>[
          //coba buat didalam card
          Card(
             child: Padding(
               padding: EdgeInsets.all(32.0),
            child: Column(
              children: <Widget>[
                Text(
                  'Udacoding',
                  style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.red),
                ),

                // kita tampilin map nya
                Center(
                  child: SizedBox(
                    width: 300.0,
                    height: 300.0,
                    child: GoogleMap(
                      //bikin dulu google maps, lalu ctrl+p dan tambahkan initialcamera
                      // initialcamera position berfungsi sebagai titik fokus pertama kali yang akan ditampilkan
                      initialCameraPosition: CameraPosition(
                        target: udacoding,
                        zoom: 11.0,
                      ),

                      // memberi tanda atau pin merah diatas
                      markers: <Marker>[
                        // 1
                        Marker(
                          markerId: MarkerId('udacoding'), // baru diisi dari sini
                          position: udacoding,
                          infoWindow: InfoWindow(title: 'Udacoding'),
                        ),
                      ].toSet(), //2 baru buat to set

                      //tambahkan gecture untuk mudah scrol dan pindah2
                      gestureRecognizers:
                          <Factory<OneSequenceGestureRecognizer>>[
                        //bertipe factory
                        Factory<OneSequenceGestureRecognizer>(
                            () => ScaleGestureRecognizer())
                      ].toSet(), //ingat ya tambahkan ini dulu baru isi factor ditengahnya
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Import yang dibutuhkan pada kelas map_page.dart adalah :

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

Berikut adalah hasil testingnya :

Udacoding on Google Maps Flutter

Kita coba tampilkan menjadi list yah

Jadikan Card sebagai widget yang terpisah dengan cara menambahkan class berikut.

//dibawah Scaffold
class MyMap extends StatelessWidget {
  const MyMap({Key? key, required this.udacoding, this.title}) // juga ubah menjadu title
      : super(key: key);

  final LatLng udacoding;
  final String? title; // Tambahkan parameter baru agar namanya menjadi dinamis

2. Berikut adalah codingan setelah menambahkan List View

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

class MapPage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MapPage> {

  final LatLng udacoding = LatLng(-6.2969516, 106.6984811);
  final LatLng pantaiancol = LatLng(-6.119024810259329, 106.85023544011754);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map Flutter"),
      ),
      body: ListView(
        children: <Widget>[
          MyMap(
            udacoding: udacoding,
            title: 'Udacoding',
          ),
          MyMap(
            udacoding: pantaiancol,
            title: 'Pantai Ancol',
          ),

        ],
      ),
    );
  }
}

class MyMap extends StatelessWidget {
  const MyMap({Key? key, required this.udacoding, this.title})
      : super(key: key);

  final LatLng udacoding;
  final String? title;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[
            Text(
              title!,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.red,
              ),
            ),
            Center(
              child: SizedBox(
                width: 300.0,
                height: 300.0,
                child: GoogleMap(
                  initialCameraPosition:
                      CameraPosition(target: udacoding, zoom: 11.0),
                  markers: <Marker>[
                    Marker(
                      markerId: MarkerId('udacoding'),
                      position: udacoding,
                      infoWindow: InfoWindow(
                        title: 'udacoding',
                      ),
                    ),
                  ].toSet(),
                  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
                    Factory<OneSequenceGestureRecognizer>(
                        () => ScaleGestureRecognizer()),
                  ].toSet(),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Ini hasil testingnya :

Udacoding
Pantai Ancol

Tentunya masih banyak lagi hal yang bisa kita lakukan selain fungsi-fungsi yang sudah saya jelaskan pada artikel kali ini. Teman-teman bisa mencoba kreasikan sendiri.

Semoga membantu yah sobat Flutter! 😀

Subscribe

Related articles

Panduan Migrasi Database di Laravel

Pendahuluan Migrasi database adalah salah satu fitur penting di Laravel...

Penggunaan Machine Learning dalam Pengembangan Web

Machine learning (ML) adalah cabang dari kecerdasan buatan (AI)...

Mengenal Vue.js: Membuat Antarmuka Pengguna yang Dinamis

Vue.js adalah salah satu framework JavaScript yang populer digunakan...

Keamanan Aplikasi Web: Mengamankan Aplikasi Laravel Anda

Keamanan aplikasi web adalah aspek kritis yang harus diperhatikan...

Membangun API dengan Laravel: Best Practices

Laravel adalah framework PHP yang sangat populer untuk membangun...

LEAVE A REPLY

Please enter your comment!
Please enter your name here