Trending Articles       10 Flutter Listview Examples       Flutter Audio Recording       Context Menu in Flutter       Current Location Google Maps

Google Maps in Flutter, How to Load Google Maps

Nowadays Google Maps is the most important part of everyone's 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 the Flutter application.


Create Application:
First, create a Flutter application in Any IDE, I am using Android Studio.
By creating a 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 the dependency line. It should be like below. Replace the version with the latest available version.
 

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

 

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

 

Create a new project

 

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

 

Enable GoogleMaps SDK API

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

            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 createState() {
    // TODO: implement createState
    return MyMapsState();
  }

}
class MyMapsState extends State{
  Completer _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 Google Maps on your Screen

 

Show Multiple Markers on Maps Flutter

 


Flutter

935 Views

Author: RRTutors