Posts

Implementasi Google maps pada FLutter

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 :

https://lh5.googleusercontent.com/rm3J7qSXism4A8nJQXHLQd7P1Ih5VC1yunTjFnC4eBjkoc8TBjQsAwB5LZZ4TfRwNY3AmJ_O3aH9Ax5esfCqLsR1FFj8BcLJ343pFyjKq8o0yI5Va25y3P1Idr0bpQaItDzpWX85

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

https://lh4.googleusercontent.com/vlOX9xCTA8JicdgZA_g3iI6oyK9gKzazgCq5efJk81WM1re4UIi_7L-8Xh-I8VcIwflkkrxOSUH4n4ipNAsyxkURpjRuS0HOYX6XYCgr_dD3KiTEs5lNPO_gfgEKii0t5dLFrsgl

  • Kembali pada kredensial, pilih buat kredensial

https://lh5.googleusercontent.com/LVkE9eK0EF03nA-uCFSrHX3mqui0SkdulZGIJkMZHSrX8KkSgNiBT3I1bmUgpMA1hB6A6w137tUWM9-PjndQqWlyBCEykmRGcLU_dbYRC1B7_gemmWKdpoUW04grCTozdryYLt0U

  • 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

1 Comment :

  1. bcnpmt April 13, 2020 at 1:59 pm

    Sorry, I get this Error

    The getter ‘latitude’ was called on null.
    I/flutter (22516): Receiver: null
    I/flutter (22516): Tried calling: latitude
    I/flutter (22516):
    I/flutter (22516): The relevant error-causing widget was:

    Reply

Leave a Reply :

* Your email address will not be published.