Programming

How To Add / Embed Google Map To Your Flutter App (No Errors)

Many Flutter developers out there still find it hard to embed a simple Google Map to their application, which would be somehow complex to you if you’ve never done it before.

Google Maps are something you will one day start using in your applications sooner or later. It has wide use cases and stunning APIs to carry more meaning to your application, depending on what the app is going to be.

In this instructional exercise below, we are going to make use of the google_maps_flutter package which was created and managed by the Flutter group for simple implementation of maps in vacillate applications. Right away, let’s dive into the integration of this powerful tool.

Before we move on, there are some important things that need to be ready before you can go on with the Google Map integration in Flutter. They are;

  • You must have a¬†payment verified¬†google cloud platform account
  • Enable Maps SDK by searching ‘maps’ in the marketplace
  • You must have the API Key generated from the google cloud console.

When you have those things listed above, then you’re good to go with the Google Map Integration on Flutter.

1. Add the google_maps_flutter package to your dependencies

Go to your pubspec.yaml file in your project and add the google_maps_flutter package below your dependency, the same way it is shown below.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: recent version

2. Add Your API_KEY to your AndroidManifest.xml file

The directory where you would find your AndroidManifest.xml is in the android folder>app>src>main>AndroidManifest.xml. You’ll find it just after the </activity>.

3. Implement the Map In your main.dart code

The last step is to simply code up your Google Map i.e, Placing them where you want them to be, designing your UI, setting up the Google Map controller, Init State, and other. Also, don’t forget to import your google_map_flutter.dart package. See a code example below.

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(
      debugShowCheckedModeBanner: false,
      title: 'My Google Maps',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: MyHomePage(title: 'My Google Maps'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleMapController mapController;

  @override
  void initState() {
    super.initState();
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: size.height * 0.85,
            child: GoogleMap(
              myLocationEnabled: true,
              myLocationButtonEnabled: true,
              initialCameraPosition: CameraPosition(
                target: LatLng(37.42796133580664, -122.085749655962),
                zoom: 20.0,
              ),
              key: ValueKey('uniqueey'),
              onMapCreated: _onMapCreated,
              markers: {
                Marker(
                    markerId: MarkerId('youUniqueID'),
                    position: LatLng(65.675849309587463, -473.578490938),
                    infoWindow: InfoWindow(title: 'Any Location'))
              },
            ),
          ),
        ],
      ),
    );
  }
}

That’s it in a nutshell! The Google Map should be working now in your application. It’s just left to you to build your app to your own look and feel.

Kindly note that:

You have added the code in AndroidManifest.xml where it is supposed to be.

If after all these steps, you still face some issues, try going to your terminal and do a flutter clean command, and run your app, use the flutter run command.

And if you still face further problems, make sure you add them in the comment section below, and check babck later.

CL!CK HERE TO READ THE DOWNLOAD GUIDE AFTER DOWNLOADING THE FILE

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.