episyche logo

Episyche

Flutter/Google Maps/

How to integrate google maps in flutter ?

Published on

How to integrate google maps in flutter ?
These days Google Maps is an unavoidable feature for most the mobile Apps. It can be used to display your store location, customer location, tracking, etc. On Flutter-based mobile apps, google maps can easily be integrated using Google Maps Flutter plugin.

Introduction:

Google Maps Flutter plugin is provided in the Google Map widget that supports initialCameraPosition, maptype, and onMapCreated. We can set the position of the camera and marker in any place on the earth. We can design the marker according to our choice. It also comes with a zoom property in a cameraposition to provide the zooming-in google map view on the initial page

Flow diagram:


flow diagram

Prerequisites :

Steps :

Step 1: Signup / Login Google Cloud

If you don't have an Google Cloud account (https://console.cloud.google.com ), please proceed with the signup option. otherwise, log in with your existing credentials.

Step 2: Create a project in Google Cloud

  • In the Google Cloud dashboard click Select a project



create project

  • It prompts a popup, In that popup click NEW PROJECT



new project

  • On the next page fill project name and click CREATE



create

Step 3: Enable map SDK

  • In the Google Cloud dashboard Select a project (i.e. Created in Step 3 : Create a project in Google Cloud )

  • After selecting your project go to APIs and services > Library



api key


  • On the next page, click Maps SDK for Android (Based on your device Android or iOS)


    
map sdk

  • On the next page click ENABLE



map sdk

Step 4: To retrieve the API key

  • In the Google Cloud dashboard Select a project (i.e. Created in Step 3 : Create a project in Google Cloud )

  • After selecting your project go to APIs and services > Credentials

  • Click on CREATE CREDENTIALS > API key.

  • You will get a popup with an API key



api key

 

  • Initially, the restrictions will be set to None. If you want to restrict your key,

  • In the dashboard Navigate to APIs and services > Credentials > click Edit API key



api key

  • On the next page fill the following details

    • In Application restrictions > choose Android apps (based on your device Android or iOS)



restrictions

    • In Restrict usage to your Android apps click ADD AN ITEM.

    • Add your package name(i.e. In your flutter Project’s AndroidManifest.xml file package="com.example.map_project" )

    • Add your SHA-1 certificate fingerprint.

      • To generate a SHA-1 certificate fingerprint. In Android studio terminal navigate to your project directory and run the following command

        • for windows

          1keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

        • for Linux or macOS

          1keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

    • Copy the SHA-1 certificate fingerprint. Add your SHA-1 certificate fingerprint and click DONE



SHA key

    • In API restrictions choose to Restrict key

    • In the select APIs dropdown select Map SDK for Android. click OK > SAVE

  • If Map SDK is not in the list, you have to enable it first.

 

map sdk

Step 5: Create a Flutter project

  • Open Android Studio and go to File > New > New Flutter Project



create project

  • It prompts a popup. In that popup, browse your Flutter SDK installation path and click Next



create project

  • On the next popup fill project name, project location and click Finish



create project

  • Create a dart file named current_loaction.dart under the lib folder.

  • The final project structure is given below



project structure

Step 6: Add plugin in flutter project

  • Add the google_maps_flutter: ^2.1.12 package in your pubspec.yml and run pub get

  • For Android

    • Set the minSdkVersion in android/app/build.gradle:

      1android { 2 defaultConfig { 3 minSdkVersion 20 4 } 5}

      .

      gradle file

  • Specify your API key(i.e. created in Step 5: To retrieve the API key) in the application manifest android/app/src/main/AndroidManifest.xml:

    1<manifest ... 2 <application ... 3 <meta-data android:name="com.google.android.geo.API_KEY" 4 android:value="YOUR KEY HERE"/>

  • also, add permission to use location in AndroidManifest.xml :

    1<manifest ... 2<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 3 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 4 <uses-permission android:name="android.permission.INTERNET"/>

    .

    manifest

Step 7: Using GoogleMap widget

  • As part of the google maps integration on this project, we are using geolocator: ^9.0.1 plugin to get the current location.

  • In main.dart – get the latitude and longitude values using geolocator.

A sample main.dart file can be found in the following git repository file.

  • In current_location.dart – Using the latitude and longitude values we will get the location in google Maps.

1GoogleMap( 2 onMapCreated: _onMapCreated, 3 initialCameraPosition: CameraPosition( 4 target: LatLng(double.parse(Lat) , double.parse(Lng)), 5 zoom: 20.0, 6 ), 7 )

onMapCreated – This method is called on map creation and takes a MapController as a parameter.

initialCameraPosition – This gives the starting position of the map when it is opened for the first time.

A sample current_location.dart file can be found in the following git repository file.

  • Complete Flutter example in the following github repo.

Result :

After run the app , If we click on the Get current location button, we will get the current location. See the below image:





Comments