Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to activate location when clicking on button using google maps flutter?

I am new using Flutter and i am making a app. In that i need to use google maps and show my location only if activated by a button.

I am using the example in:

https://pub.dartlang.org/packages/google_maps_flutter

That give you a button that redirect the camera to a certain point, but how can i turn that button to be the trigger of using my location or not?

I made something like this but i get an error:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart' as LocationManager;

void main() => runApp(Lugares());

class Lugares extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lugares',
      home: MapSample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      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);
        },
        myLocationEnabled: true,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
        target: getUserLocation() == null ? LatLng(0, 0) : getUserLocation(), zoom: 15.0)));
  }

  Future<LatLng> getUserLocation() async {
    var currentLocation = <String, double>{};
    final location = LocationManager.Location();
    try {
      currentLocation = (await location.getLocation()) as Map<String, double>;
      final lat = currentLocation["latitude"];
      final lng = currentLocation["longitude"];
      final center = LatLng(lat, lng);
      return center;
    } on Exception {
      currentLocation = null;
      return null;
    }
  }

}

UPDATE:

Thanks to @Vishal G. Gohel that share his code i could acomplish what i want, this is the code:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

void main() => runApp(Lugares());

class Lugares extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lugares',
      home: MapSample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _currentLocation,
        label: Text('Ir a mi Ubicacion!'),
        icon: Icon(Icons.location_on),
      ),
    );
  }



void _currentLocation() async {
   final GoogleMapController controller = await _controller.future;
   LocationData currentLocation;
   var location = new Location();
   try {
     currentLocation = await location.getLocation();
     } on Exception {
       currentLocation = null;
       }

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(currentLocation.latitude, currentLocation.longitude),
        zoom: 17.0,
      ),
    ));
  }

}
like image 263
xtrios Avatar asked Mar 28 '19 05:03

xtrios


2 Answers

You can check below method which i made for get current location.

void _currentLocation() async {
    Location _location = new Location();
    Map<String, double> location;

    try {
      location = await _location.getLocation();
    } on PlatformException catch (e) {
      print(e.message);
      location = null;
    }

    mapController.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(location["latitude"], location["longitude"]),
        zoom: 17.0,
      ),
    ));

    mapController.addMarker(
      MarkerOptions(
        position: LatLng(location["latitude"], location["longitude"]),
      ),
    );
  }
like image 163
Vishal G. Gohel Avatar answered Sep 23 '22 14:09

Vishal G. Gohel


updated answer

 void _current_location() async {
final GoogleMapController controller = await _controller.future;

var makerIdValue = "val";
final MarkerId markerId = MarkerId(makerIdValue);

LocationData location;
var _location = new Location();
try {
  location = await _location.getLocation();
} catch (e) {
  print('ERROR' + e.toString());
  location = null;
}

controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
    bearing: 0,
    target: LatLng(location.latitude, location.longitude),
    zoom: 17.0)));

//create marker
final Marker marker = Marker(
  markerId: markerId,
  position: LatLng(location.latitude, location.longitude),
);

setState(() {
  markers[markerId] = marker;
});

}

like image 21
Cordelia Avatar answered Sep 22 '22 14:09

Cordelia