Posts

Assalamualaikum warahmatullahi wabarakatuh, Hallo sahabat uda semua semoga masih dalam keadaan sehat, Amiin

Pada pertemuan kali ini saya akan menjelaskan langkah-langkah dalam pengimplementasian google maps pada flutter, yaitu :

• Pergi pada halaman console.developer.google.com (https://console.developers.google.com/)

• Jika kita sebelumnya sudah pernah membuat project , maka pilih Kredensial
• Aktifkan beberapa sdk pada library seperti google map, geolocation, geocoding.

• Kembali pada kredensial, pilih buat kredensial

• Pilih kunci API, dan setelah muncul tampilan langsung ditutup dan kunci api nya aka nada dihalaman utama di kredensial, seperti berikut

• Tambahkan packages google maps flutter dan geolocator

• Copykan credential yang telah kita buat sebelumnya pada bagian manifest

• Tambahkan beberapa codingan pada bagian MapsHome.dart, sebagai berikut:

import ‘dart:async’;

import ‘package:flutter/foundation.dart’;
import ‘package:flutter/gestures.dart’;
import ‘package:flutter/material.dart’;
import ‘package:geolocator/geolocator.dart’;
import ‘package:google_maps_flutter/google_maps_flutter.dart’;



class MapsHome extends StatefulWidget {
  @override
  _MapsHomeState createState() => _MapsHomeState();
}

class _MapsHomeState extends State<MapsHome> {
  LatLng myLocation;
  Timer _timer;
  final Map<String, Marker> _marker = {};

  void getCurrentLocation() async{
//    _marker.clear();
    var currentLocation = await Geolocator().getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high
    );
    setState(() {
      final myMarker = Marker(
          markerId: MarkerId(“My Position”),
          position: LatLng(currentLocation.latitude, currentLocation.longitude),
          infoWindow: InfoWindow(
              title: “My Location”,
              snippet: “Udacoding”
          )
      );
      _marker[‘Current Location’] = myMarker;
      myLocation = LatLng(currentLocation.latitude, currentLocation.longitude);
    });
    print(“Lat :  ${currentLocation.latitude}“);
    print(“Lon : ${currentLocation.longitude}“);
  }

  void periodicMethod() async{
    _timer = Timer.periodic(Duration(seconds: 2), (test) async{
      if(this.mounted){
        setState(() {
          getCurrentLocation();
          print(“Get Location Ke ${test.tick}“);
        });
      }
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    periodicMethod();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _timer.cancel();
    periodicMethod();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true, //biar teksnya di tengah
          title: Text(“Google Maps”),
        ),
        body: ListView(
          children: <Widget>[
            Text(“Latitude : ${myLocation.latitude}“),
            Text(“Longitude : ${myLocation.longitude}“),

            Padding(
              padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: myLocation == null ? LatLng(-6.2973249,106.6956355) : myLocation,
                      zoom: 14.0
                  ),
                  markers: _marker.values.toSet(),
                  gestureRecognizers:
                  <Factory<OneSequenceGestureRecognizer>> [
                    Factory<OneSequenceGestureRecognizer>(
                          () => ScaleGestureRecognizer(),
                    )
                  ].toSet(),
                ),
              ),
            ),

          ],
        )
    );
  }
}

• kemudian running, dan hasilnya sebagai berikut