Google Maps in Flutter, How to Load Google Maps

Last updated Sep 01, 2021


Nowadays Google Maps are the most important part of everyone's life. Every technology wants to add Google Maps in the application. In this flutter example we will learn how to add google maps to flutter 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: ^2.0.6

 

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

 

Login to Google Console and select application and go to API & Services and create credentials and copy the API key.

 

Enable Google Maps SDK API

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

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

android:value="PUT_YOUR_KEY"/>

 

 

Create Google maps widget

We are ready with Google Maps key, we need to load google maps, Load Google maps add below code

GoogleMap(
  mapType: MapType.normal,
  initialCameraPosition: _kGooglePlex,
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
 )

 

GoogleMap widget wil load different types of Maps, we will load this by handle the mapType property

 

enum MapType {
  /// Do not display map tiles.
  none,

  /// Normal tiles (traffic and labels, subtle terrain information).
  normal,

  /// Satellite imaging tiles (aerial photos)
  satellite,

  /// Terrain tiles (indicates type and height of terrain)
  terrain,

  /// Hybrid tiles (satellite images with some labels/overlays)
  hybrid,
}

 

How to add Markers to Google Maps?

To add Marker to the Map we need to create Marker object and pass this marker object to Map by markers property

 

Let's create Marker object

To create marker object we need to create MarkerId to handle the markers

MarkerId markerId1=MarkerId("Current");
Marker marker1=Marker(
    markerId: markerId1,
    position: LatLng(17.385044, 78.486671),
    icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
    infoWindow: InfoWindow(
        title: "Hytech City",onTap: (){


    },snippet: "Snipet Hitech City"
    ));

 

We are ready with marker object, to add marker to map we need to pass this marker as collection type Set.

Let create Set object and pass this marker to set object

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
markers[markerId1]=marker1;

 

Now finally add marker to Map

 

GoogleMap(
  mapType: MapType.normal,
  initialCameraPosition: _kGooglePlex,
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
  markers: Set<Marker>.of(markers.values),
)

 

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

 

Complete code

import 'dart:async';

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


void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(17.385044, 78.486671),
    zoom: 18,
  );



  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
  late MarkerId markerId1;
  late Marker marker1;

  @override
  void initState() {
    
    super.initState();
     markerId1=MarkerId("Current");
     marker1=Marker(
        markerId: markerId1,
        position: LatLng(17.385044, 78.486671),
        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
        infoWindow: InfoWindow(
            title: "Hytech City",onTap: (){


        },snippet: "Snipet Hitech City"
        ));
    markers[markerId1]=marker1;
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(backgroundColor: Colors.white,),
      body: Padding(
        padding: const EdgeInsets.only(top:8.0),
        child: Stack(
         children: [
           GoogleMap(
             mapType: MapType.normal,
             initialCameraPosition: _kGooglePlex,
             onMapCreated: (GoogleMapController controller) {
               _controller.complete(controller);
             },
             markers: Set<Marker>.of(markers.values),
           ),
          
         ],
        ),
      ),
      
    );
  }

}

Conclusion: With this post we have learned how to load Google maps in flutter and how to add Marker to Map.

More Flutter Google Maps Examples

Show Multiple Markers on Maps Flutter

How to fetch current location Address

How do i share current location address with flutter

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

2242 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions