UDACODING

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 :

X4qGJjMb3zQSiqd3pnBiVovSqq8kfCD2jYJ6tNvwHITv5slzPc0SKwnXbXi1ppxWKjKK8hpIrwqXdCj2fnu8hXeZ8v4mTIvEtmY4sKKWFx6wOqseguXCA3lSe8llGgIsBWx6CnQ Implementasi Google maps pada FLutter

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

8774wzdCRt-oA6bNBJmWOKR5QgKRyOqAZL-1kM4hhMJyZqgFyrnIf5LrT1H1Fn2DXzJeQey9CB_JS_xQqylQ6nG3DrdwPwimlc6KSgD6_iRh6AUdWtlCN_DBrMRzN04YJVIxyq4 Implementasi Google maps pada FLutter

  • Kembali pada kredensial, pilih buat kredensial

LJDhMxry8GB7WiXNCL7vnqRv20Yx_23DgCpS7VQluDTM377lpjQvmiHc45RyR8fuozQ30kb2muZT_P0hInwhzva_6suAoo537BhFlTc8-jR2Ue37R3b_6eq9K9kaiZ41q_2mIyo Implementasi Google maps pada FLutter

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

R3RyyN0id_1UjgOKm9lZBq-2buOFbw9InGJdFwh72lS7Sn3eec71YY0w7gFA4y7F-PddvoI-eonWD_WsHeT6yHNv2bCJEATMeT8i7dzv7L9wLTDs_MozlucyiPwFb6u6bP4kORs Implementasi Google maps pada FLutter

  • Tambahkan packages google maps flutter dan geolocator

PPmjm2DxwEV4pm5id4YXEhydVhFRqDmcJRocZ_Akqe8E9I4UDr3ngt3oPhdXBZEAr1A8TqLzfjJPmX9RWFCX3dWKDE_HRRAtsHph8J8gGuHE3QasgvFHfkaU_0O8ZYOHoPfUzD8 Implementasi Google maps pada FLutter

  • Copykan credential yang telah kita buat sebelumnya pada bagian manifest

E-ESv27yt631oKHOQSZ0lknaWA3FGs14EiCdNmKIHe3lcu33AxILas9-ZwSA68kjtyk4PS0bDkneL32GDEBRJ6C5gTHJ_TueisTzAWgjRDBPIYKMR_skOBVCSBqVvu3m17zGIjM Implementasi Google maps pada FLutter

  • 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
Screenshot_2020-03-30-15-39-45-399_com.sitiflutter.flutter_maps1-576x1024 Implementasi Google maps pada FLutter

2 Comments :

  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
  2. social signals for seo May 9, 2020 at 1:11 pm

    social signals for seo

    nobhgefjt kdzvt crivbpe ktsm ngxdrqgtgxudfdg

    Reply

Leave a Reply :

* Your email address will not be published.