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
dibagianpubspec.yaml
google_maps_flutter: ^0.5.11
-
Menambahkan
Google Map
di tampilanclass 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.