Using Google Maps on Flutter for Android

Mobile Apps Development A-Z Guide.

Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.

Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.

Pharos Production Youtube channel

In this article, I would like to consider in detail how you can add Google Maps to the Flutter application. So let’s start!

Step 1. Creating a new project and add the necessary dependencies to pubspect.yaml and then run packages get in terminal or in your IDE:

dependencies:
  google_maps_flutter: ^0.3.0+2

Step 2. Now you need to get an API key. There are many ways for obtaining a key. The main idea is that you need to create a new application and activate Google Maps API for it. You can do this by going to Google Maps Platform. If your project was previously registered, you just need to activate the API or create a new project.

Step 3. Next, add the metadata to the application Manifest:

<application
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"

  <meta-data android:name="com.google.android.geo.API_KEY"
    android:value="<Your API Key>"/>

Step 4. Next, we will create a page to display the map itself and consider certain features when working with it. When creating a map, it is necessary by default to specify the minimum set of parameters, namely:initialCameraPosition. This parameter accepts coordinates and zoom at the input.

Widget _buildGoogleMap(BuildContext context) {
  return Container(
    child: GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: vegasPosition,
    ),
  );
}

CameraPosition vegasPosition = CameraPosition(target: LatLng(36.0953103, -115.1992098), zoom: 10);

If you need to display a map of a specific size and in a specific location on the page, you can set the dimensions of the container in which the map is loaded. For this example, I use the Stack widget as the parent container. And the widget with the map will be wrapped with Positioned widget:

Widget _buildGoogleMap(BuildContext context) {
  return Positioned(
    left: 50,
    right: 30,
    top: 100,
    bottom: 300,
    child: Container(
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: vegasPosition,
      ),
    ),
  );
}

In any case, later in the article, I will give examples with a map in full screen.

Step 5: Controller

When creating a map, the onMapCreated method is executed. Using this method, you can get a reference to GoogleMapsController.

class SearchResultsState extends State<Map> {
  Completer<GoogleMapController> _controller = Completer();
                             ...
Widget _buildGoogleMap(BuildContext context) {
  return Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: vegasPosition,
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
    ),
  );
}

Using the received controller, you can perform for example an animated transition to a newly specified coordinate. For example, add the coordinates of Los Angeles:

CameraPosition losAngelesPosition = CameraPosition(target: LatLng(34.0345471, -118.2643037), zoom: 9);

Create a method that performs the transition from the current coordinate to the new one given:

Future<void> _goToLosAngeles() async {
  final GoogleMapController controller = await _controller.future;
  controller.animateCamera(CameraUpdate.newCameraPosition(losAngelesPosition));
}

The controller allows you to get current coordinates, add an event listener, make a transition, and so on:

When you stop to work with Map, do not forget to cancel all actions associated with the controller:

@override
void dispose() {
  _disposeController();
  super.dispose();
}

Future<void> _disposeController() async {
  final GoogleMapController controller = await _controller.future;
  controller.dispose();
}

Step 6: Markers.
To add markers, use the Marker A Set of which is directly transmitted to the map constructor. Let's create two markers for Tokyo and Fuji mount:

Marker vegasMarker = Marker(
  markerId: MarkerId('vegas'),
  position: LatLng(36.0953103, -115.1992098),
  infoWindow: InfoWindow(title: 'Las Vegas'),
);

Marker losAngelesMarker = Marker(
  markerId: MarkerId('losAngeles'),
  position: LatLng(34.0345471, -118.2643037),
  infoWindow: InfoWindow(title: 'Los Angeles'),
);

And pass these markers directly into GoogleMap constructor:

GoogleMap(
  mapType: MapType.normal,
  initialCameraPosition: tokyoPosition,
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
  markers: {vegasMarker, losAngelesMarker},
),

The constructor of the Marker allows you to effortlessly rotate the marker at a certain angle, use your own picture to display, transparent and more.

An example of the layout of the main screen and the entire application you can find on the link below:

PharosProduction/tutorial-flutter-google-maps

Thanks for reading.