Google Map Integration in Flutter

---

---

---

Add following dependency or plugins in pubspec.yaml file:

google_maps_flutter: ^2.0.3

Create an API for Google Map from Google Developers Console.

Google Developer Console

Create a new Project or you can also used existing project API. So i just created a new project that name is Goole Map Integration like below:

After creating prject you need to select your project like below:

After selecting your project go to Enable API and Services like below:

After this you need to select Map Sdk for Android or IOS i am selecting Android and enable API like below:

After this you need to select credentials to create an API like below:

After this you need to select API key like below:

After creating the API Key you need to copy like below:

You need to paste that API key inside Androidmanifest file like below:

After doing all above steps, now you can write below code.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MaterialApp(
    home: MyGoogle(),
    title: "Google Map Tutorial",
  ));
}

class MyGoogle extends StatefulWidget {
  @override
  _MyGoogleState createState() => _MyGoogleState();
}

class _MyGoogleState extends State<MyGoogle> {
  var maptype = MapType.normal;
  Set<Marker> _markers = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Map Tutorial"),
      ),
      body: Container(
        child: Stack(
          children: [
            GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(28.7041, 77.1025),
                zoom: 18,
              ),
              mapType: maptype,
              onTap: (currentTapLocation) => print(
                  "The Current Position is : ${[
                currentTapLocation.latitude,
                currentTapLocation.longitude
              ]}"),
              markers: _markers,
              onMapCreated: (controller) {
                setState(() {

                  _markers.add(
                    Marker(
                      markerId: MarkerId("First Id"),
                      position: LatLng(28.7041, 77.1025),
                      infoWindow: InfoWindow(
                        title: "Institute",
                        snippet: "Education Center",
                      ),
                    ),
                  );
                });
              },
            ),
            Align(
              alignment: Alignment.topRight,
              child: Card(
                margin: EdgeInsets.all(5),
                elevation: 10,
                color: Colors.black45,
                child: ButtonBar(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.satellite;
                        });
                      },
                      icon: Icon(
                        Icons.map,
                        color: Colors.white,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.terrain;
                        });
                      },
                      icon: Icon(
                        Icons.map_outlined,
                        color: Colors.white,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.hybrid;
                        });
                      },
                      icon: Icon(
                        Icons.maps_ugc,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}