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

Enable Google Maps SDK API

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

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 :

3218 Views

Projects By category