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.

Google cloud platform project

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

Google Cloud Platform Project

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

Google Cloud Platform Project

  • 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>

Hire Flutter Developers At Your Ease

ūüĒĻ 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,

      ),

    );

  }

}

Adding Google Map To IOS

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.

coma

Conclusion

In conclusion, using Flutter Google Maps offers many advantages for developers looking to create attractive and feature-rich maps in their mobile apps. With the help of the Google Maps Flutter plugin, developers can easily add advanced features such as markers, polylines, and polygons to their maps without needing highly-optimized code.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!