Google Maps in Flutter, How to Load Google Maps

Now a days Google Maps is most important part in every ones life.
Every technology wants to add GoogleMaps in the application.

 

Flutter provided a plugin to load google maps.
Plugin google_maps_flutter  

Integrate this plugin in Flutter application.


Create Application:
First creat a Flutter applciation in Any IDE, I am using Android Studio.
By create new Flutter Application menu in the File options.

Add Plugin to application
First we need to add google_maps_flutter dependency in the pubspec.yaml file under dependency line. It should be like below. Replace the version with latest availbe version.

 

dev_dependencies:
  flutter_test:
    sdk: flutter
  google_maps_flutter: ^0.5.21+11

 

To use Google Maps we need to get Google API key.
For this we need to create an application in Google Console and get an API key.
Google Console

Create new Project

GoTo Conolse and select application and go to API & Services and create crdentials and copy the API key.

Enable GoogleMaps SDK API

Now come to Flutter application and Paste your key in the Manifest file inside meta tag.
 

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

 

Create Googlemaps widget

Now create a Widget and add below code

import 'dart:async';

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

class MyMaps extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyMapsState();
  }

}
class MyMapsState extends State<MyMaps>{
  Completer<GoogleMapController> _controller = Completer();
 
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(17.385044, 78.486671),
    zoom: 14.4746,
  );
  
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(leading: Icon(Icons.map),backgroundColor: Colors.grey,),
      body: Container(
        child: GoogleMap(initialCameraPosition: _kGooglePlex,

          onTap: (_){

          },
          mapType: MapType.normal,
         
          onMapCreated: (GoogleMapController controler){
            _controller.complete(controler);
           
            });
          },

        ),
      )
    );
  }

}    

 

 

Now run the flutter application. Now you can see the Google Maps on your Screen




Related Questions View All