Flutter Google Maps Implementation: A Step By Step Guide With Code

In this article, we will discuss the step-by-step implementation of Google Maps for Flutter developers. While android and iOS developers may have some idea about implementing Google Maps, Flutter developers may need additional help libraries and their own unique implementation with flutter google maps.

Google Maps has become an essential tool in our daily lives for managing directions, searching for nearby locations, and exploring the world from the palm of our hand.

Let’s do the step-by-step implementation.

Plugin

Before implementing, you must add the plugin below to your pubspec.yaml

google_maps_flutter: ^2.2.3

Here are a few steps you need to follow one by one :

🔹 Google Cloud Platform Project

• You must create a project on the google cloud console, from where you will get the API key..which will require further development.
• To create it, you need to open google cloud console.

• You will need to open the library section from the left menu bar.
• Then you need to enable google Maps for android and iOS.

• Once you have enabled the android & ios map, you can land on this page automatically.

• Now from the left menu, select a Credentials option.
• Once you select can see the +credential icon on top of the page.
•  If we need to select the ‘API Key’ from that section, it will automatically create the API key we need for our implementation.

🔹 Adding Google Map To Android

Firstly need to add the API key in AndroidManifest.xml.

<application ...

    <meta-data android:name="com.google.android.geo.API_KEY"

               android:value="YOUR KEY HERE"/>

Now your file should look like this.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.flutter_android">


    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


    <application

        android:label="flutter_android"

        android:icon="@mipmap/ic_launcher">


       <meta-data android:name="com.google.android.geo.API_KEY"

       android:value="AIzaSyA_cDu8E74RFeA0J8YVZ9yZbRetTnun9oE"/>

    </application>

</manifest>

🔹 Adding Google Map To IOS

The steps of adding the API key in IOS are the same as the add-in android.

You need to mention the API key in AppDelegate.swift.

ios/Runner/AppDelegate.swift

Where your file will look like this

import UIKit

import Flutter

import GoogleMaps

@UIApplicationMain


@objc class AppDelegate: FlutterAppDelegate {

override func application(

_ application: UIApplication,

didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?

) -> Bool {

GeneratedPluginRegistrant.register(with: self)

GMSServices.provideAPIKey(“AIzaSyA_cDu8E74RFeA0J8YVZ9yZbRetTnun9oE")  //Your API KEY 

return super.application(application, didFinishLaunchingWithOptions: launchOptions)

}

}

Then you need to add the location permission in info.plist.

<key>NSLocationWhenInUseUsageDescription</key>

<string>Please check the location permission</string>

Once completing all the setups, let’s move forward for actual implementation. As I mentioned, we already added the plugin in pubspec. yaml.

Below is the sample code of google map implementation.

import 'package:google_maps_flutter/google_maps_flutter.dart';

import 'package:flutter/material.dart';


class HomeMap extends StatefulWidget {

  @override

  _HomeMapState createState() =>  _HomeMapState();

}


class _HomeMapState extends State<HomeMap>{

  final LatLng _loc =

      LatLng(18.5204, 73.8567);


 final CameraPosition _camerapos =

      CameraPosition(target:_loc, zoom: 15.0, tilt: 3, bearing: 5);


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Google Map'),

        Color: Colors.grey

      ),

      body: GoogleMap(

        initialCameraPosition: _camerapos,

      ),

    );

  }

}

For advance, you can also create the markers and enable the traffic mode.

Create Markers

Set<Marker> _showMarker() {

  return {

    Marker(

        markerId: MarkerId("Pune"),

        position: _loc,

        infoWindow: InfoWindow(title: 'Pune location'),

        rotation: 180),

    Marker(

      markerId: MarkerId("Mumbai"),

      position: LatLng(18.997, 72.83797),

    ),

  };

}


GoogleMap(

  initialCameraPosition: _camerapos,

  onMapCreated: onMapCreated,

  markers: _createMarker(),

);

Traffic Mode Enable

GoogleMap(

  initialCameraPosition: _camerapos,

  onMapCreated: onMapCreated,

  trafficEnabled: true,

);

You need to add the traffic-enabled Boolean to the google map constructor.