title: Flutter Google Maps - Move camera to current position
body: <p>In my Flutter project I use the Google Maps plugin to display a map in the app. On the map I want to show the current location of the user and for this I use Geolocator.</p>
  <p>When the map loads it will load on a static point and when the user denies the location permissions the user can still use the map without location. When the user accepts the permissions I want to move the camera to the users current location.</p>
  <p>I have implement above in the code below but I also get the following error and I can't figure out how to solve it.</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter/foundation.dart';
  import 'package:flutter/gestures.dart';
  import 'dart:typed_data';
  import 'package:google_maps_flutter/google_maps_flutter.dart';
  import 'package:geolocator/geolocator.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  import 'package:hvd_test/styling/colors.dart';
  import 'package:hvd_test/models/navigation.dart';
  import 'package:hvd_test/models/markers.dart';
  
  // This page shows a Google Map plugin with all stations (HvD and Total). The markers are pulled from a Firebase database.
  
  class StationsMap extends StatefulWidget {
    @override
    _StationsMap createState() =&gt; _StationsMap();
  }
  
  class _StationsMap extends State&lt;StationsMap&gt; {
    bool _isLocationGranted = false;
  
    var currentLocation;
  
    GoogleMapController mapController;
  
    Map&lt;MarkerId, Marker&gt; markers = &lt;MarkerId, Marker&gt;{};
  
  // Below function initiates all HvD stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.
  
    void initMarkerHvD(specify, specifyId) async {
      var markerIdVal = specifyId;
      final Uint8List markerHvD =
          await getBytesFromAsset('images/Pin-HvD.JPG', 70);
      final MarkerId markerId = MarkerId(markerIdVal);
      final Marker marker = Marker(
        markerId: markerId,
        onTap: () {
          showModalBottomSheet(
              context: context,
              builder: (context) =&gt; SingleChildScrollView(
                    child: Container(
                      padding: EdgeInsets.only(
                          bottom: MediaQuery.of(context).viewInsets.bottom),
                      child: Container(
                        color: Color(0xff757575),
                        child: Container(
                          padding: EdgeInsets.all(20.0),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  topLeft: const Radius.circular(20.0),
                                  topRight: const Radius.circular(20.0))),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Text(
                                specify['stationName'],
                                style: TextStyle(
                                    color: PaletteBlue.hvdblue,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16),
                                textAlign: TextAlign.center,
                              ),
                              SizedBox(height: 10),
                              Text(specify['stationAddress']),
                              Text(specify['stationZIP'] +
                                  ' ' +
                                  specify['stationCity']),
                              SizedBox(height: 20),
                              ElevatedButton(
                                  child: Text(
                                    'Navigeer naar locatie',
                                    style: TextStyle(
                                      color: Colors.white,
                                    ),
                                  ),
                                  style: ButtonStyle(
                                      backgroundColor: MaterialStateProperty.all(
                                          PaletteOrange.hvdorange)),
                                  onPressed: () {
                                    MapUtils.openMap(
                                        specify['stationLocation'].latitude,
                                        specify['stationLocation'].longitude);
                                  }),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ));
        },
        position: LatLng(specify['stationLocation'].latitude,
            specify['stationLocation'].longitude),
        infoWindow: InfoWindow(),
        icon: BitmapDescriptor.fromBytes(markerHvD),
      );
      setState(() {
        markers[markerId] = marker;
      });
    }
  
  // Below function initiates all Total stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.
  
    void initMarkerTotal(specify, specifyId) async {
      var markerIdVal = specifyId;
      final Uint8List markerTotal =
          await getBytesFromAsset('images/Pin-Total.JPG', 70);
      final MarkerId markerId = MarkerId(markerIdVal);
      final Marker marker = Marker(
        markerId: markerId,
        onTap: () {
          showModalBottomSheet(
              context: context,
              builder: (context) =&gt; SingleChildScrollView(
                    child: Container(
                      padding: EdgeInsets.only(
                          bottom: MediaQuery.of(context).viewInsets.bottom),
                      child: Container(
                        color: Color(0xff757575),
                        child: Container(
                          padding: EdgeInsets.all(20.0),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  topLeft: const Radius.circular(20.0),
                                  topRight: const Radius.circular(20.0))),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Text(
                                specify['stationName'],
                                style: TextStyle(
                                    color: PaletteBlue.hvdblue,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16),
                                textAlign: TextAlign.center,
                              ),
                              SizedBox(height: 10),
                              Text(specify['stationAddress']),
                              Text(specify['stationZIP'] +
                                  ' ' +
                                  specify['stationCity']),
                              SizedBox(height: 20),
                              ElevatedButton(
                                  child: Text(
                                    'Navigeer naar locatie',
                                    style: TextStyle(
                                      color: Colors.white,
                                    ),
                                  ),
                                  style: ButtonStyle(
                                      backgroundColor: MaterialStateProperty.all(
                                          PaletteOrange.hvdorange)),
                                  onPressed: () {
                                    MapUtils.openMap(
                                        specify['stationLocation'].latitude,
                                        specify['stationLocation'].longitude);
                                  }),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ));
        },
        position: LatLng(specify['stationLocation'].latitude,
            specify['stationLocation'].longitude),
        infoWindow: InfoWindow(),
        icon: BitmapDescriptor.fromBytes(markerTotal),
      );
      setState(() {
        markers[markerId] = marker;
      });
    }
  
  // Below functions pulls all HvD markers from the database.
  
    getMarkerDataHvD() async {
      FirebaseFirestore.instance
          .collection('hvd-stations')
          .get()
          .then((myMarkers) {
        if (myMarkers.docs.isNotEmpty) {
          for (int i = 0; i &lt; myMarkers.docs.length; i++) {
            initMarkerHvD(myMarkers.docs[i].data(), myMarkers.docs[i].id);
          }
        }
      });
    }
  
  // Below function pulls all Total markers from the database.
  
    getMarkerDataTotal() async {
      FirebaseFirestore.instance
          .collection('total-stations')
          .get()
          .then((myMarkers) {
        if (myMarkers.docs.isNotEmpty) {
          for (int i = 0; i &lt; myMarkers.docs.length; i++) {
            initMarkerTotal(myMarkers.docs[i].data(), myMarkers.docs[i].id);
          }
        }
      });
    }
  
  // Below function initiates all previous functions on the page. This happens when the user navigates to the page.
  
    void initState() {
      getMarkerDataHvD();
      getMarkerDataTotal();
      super.initState();
      Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
          .then((currloc) {
        setState(() {
          currentLocation = currloc;
          _isLocationGranted = true;
        });
        mapController.moveCamera(CameraUpdate.newLatLng(LatLng(currentLocation.latitude, currentLocation.longitude))) as CameraPosition;
      });
    }
  
    CameraPosition _initialCameraPosition =
        CameraPosition(target: const LatLng(51.9244201, 4.4777325), zoom: 12);
    
  
  // Below function is used to display all previous functions to the page.
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Stack(
            children: &lt;Widget&gt;[
              GoogleMap(
                onMapCreated: onMapCreated,
                markers: Set&lt;Marker&gt;.of(markers.values),
                gestureRecognizers: &lt;Factory&lt;OneSequenceGestureRecognizer&gt;&gt;[
                  new Factory&lt;OneSequenceGestureRecognizer&gt;(
                    () =&gt; new EagerGestureRecognizer(),
                  ),
                ].toSet(),
                mapToolbarEnabled: false,
                zoomGesturesEnabled: true,
                zoomControlsEnabled: false,
                scrollGesturesEnabled: true,
                myLocationEnabled: _isLocationGranted,
                myLocationButtonEnabled: true,
                initialCameraPosition: _initialCameraPosition,
              ),
            ],
          ),
        ),
      );
    }
  
    onMapCreated(GoogleMapController controller) {
      mapController = controller;
    }
  }
  </code></pre>
  <p>The error I get is this:</p>
  <pre><code>E/flutter ( 7769): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: type 'Future&lt;void&gt;' is not a subtype of type 'CameraPosition' in type cast
  E/flutter ( 7769): #0      _StationsMap.initState.&lt;anonymous closure&gt;
  E/flutter ( 7769): #1      _rootRunUnary (dart:async/zone.dart:1362:47)
  E/flutter ( 7769): #2      _CustomZone.runUnary (dart:async/zone.dart:1265:19)
  E/flutter ( 7769): &lt;asynchronous suspension&gt;
  </code></pre>
  <p>Can someone please give me some assistance?</p>