How to Move Google Map Camera to New Coordinate Position in Flutter

In this example, we are going to show you how to move the position of the map camera to new longitude and latitude coordinate position with animation on Google Map in Flutter App. See the example below:

Before starting this tutorial, you have to integrate google Maps correctly on your project:

• How to Add Google Map in Flutter App

To move the map camera to a new position, use your map controller like below:

GoogleMapController? mapController;

GoogleMap(
    onMapCreated: (controller) { //method called when map is created
      setState(() {
        mapController = controller; 
      });
    },
)

Move the map camera to new coordinates:

LatLng newlatlang = LatLng(27.7149298,85.2903343);
mapController?.animateCamera( 
        CameraUpdate.newCameraPosition(
              CameraPosition(target: newlatlang, zoom: 17) 
              //17 is new zoom level
        )
      );

mapController is from the above declaration.

Full Flutter code example:

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String googleApikey = "GOOGLE_MAP_API_KEY";
  GoogleMapController? mapController; //contrller for Google map
  LatLng startLocation = LatLng(27.6602292, 85.308027); 

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Move to New Position of Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          floatingActionButton: FloatingActionButton(
             child: Text("Move"),
             onPressed: (){
                 LatLng newlatlang = LatLng(27.7149298,85.2903343);
                 mapController?.animateCamera( 
                          CameraUpdate.newCameraPosition(
                                CameraPosition(target: newlatlang, zoom: 17) 
                                //17 is new zoom level
                          )
                        );
                //move position of map camera to new location
             },
           ),
          body: Container(
            child:GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: startLocation, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
             ),
          )
       );
  }
}

Here, we have implemented a Google map with its initial longitude and latitude position, and we have a floating action button too. When the user presses the button, the map camera position will move to new location with animation and a new zoom level.

Output Screenshot:

In this way, you can move Google map camera position to new longitude and latitude coordinates programmatically in Flutter.