,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
- Pertama, buat project baru pada aplikasi Flutter 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.63. Kemudian kita menuju console.developers.google.com/ untuk mangkases Google Maps API Key. Pilih menu APIs & Services, kemudian klik Library.
4. Search Maps SDK for Android lalu klik enable (tersedia)
5. Pilih Menu APIs & Services kemudian pilih Credential.
6. Lalu Create Credential
7. Selamat! kita sudah mendapatkan API Key dari 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
- 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 set9. 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 ditengahnya10. 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 :
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 dinamis2. 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 :
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! 😀
