Step-by-Step Guide to Integrating Google Maps in Flutter Applications with Customization, Markers and Polylines

Google Maps is a popular mapping platform that provides a variety of features and services for mapping and navigation. In this blog, we will explore how to integrate Google Maps into a Flutter application and customize the map to meet the needs of your users. Whether you're a beginner or an advanced developer, this guide will provide a step-by-step guide for integrating Google Maps in Flutter, from the basics to more advanced customization options.

We'll start by setting up the Google Maps API key, which is necessary to use the Google Maps API in your Flutter application. Then we'll create a basic map and move on to more advanced topics such as customizing the map style, adding markers, and drawing polylines.

Let's dive into the code and start customizing your Google Maps in Flutter!

Here's a step-by-step guide to integrating Google Maps in Flutter applications:

STEP 1: 

Create a new Flutter project

Add the google_maps_flutter package to the dependencies section of your pubspec.yaml file:

 dependencies:
 flutter:
 sdk: flutter
 google_maps_flutter: ^0.7.0

STEP 2:

Add the API key to your project:

> Go to the Google Cloud Console.

> Create a new project.

> Enable the Google Maps JavaScript API.

> Create a new API key and restrict it to your application.

STEP 3: 

In your AndroidManifest.xml file, add the API key:

 <manifest ...
 <application ...
 <meta-data android:name="com.google.android.geo.API_KEY"
 android:value="YOUR API KEY HERE"/>
 </application>
 </manifest>

STEP 4: 

In your ios/Runner/AppDelegate.swift file, add the API key:

 import UIKit
 import Flutter
 import GoogleMaps

 @UIApplicationMain
 @objc class AppDelegate:
  FlutterAppDelegate {
 override func application(
_ application: UIApplication,
 didFinishLaunchingWithOptions
 launchOptions:
  [UIApplication.LaunchOptionsKey: Any]?
 ) -> Bool {
 GMSServices.provideAPIKey
  ("YOUR API KEY HERE")
 GeneratedPluginRegistrant
    .register(with: self)
 return super.application(application,
 didFinishLaunchingWithOptions:
 launchOptions)
  }
 }

STEP 5:

 Create a new widget for the Google Map:

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

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

 class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
    );
  }
 }

STEP 6:

 Use the new widget in your main app:

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

 void main() => runApp(MyApp());

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

Customizing the map style

You can change the look and feel of the map by using a custom style. To do this, you can use the MapStyle class, which allows you to specify a JSON string that defines the style.

 void _setMapStyle() async {
  String style =
  await DefaultAssetBundle.of(context)
      .loadString('assets/map_style.json');
  mapController.setMapStyle(style);
 }

 @override
 Widget build(BuildContext context) {
  return GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition:
    CameraPosition(
      target: _center,
      zoom: 11.0,
    ),
    mapType: MapType.normal,
    onMapStyleLoaded: _setMapStyle,
  );
     }

Adding markers:

You can add markers to the map to indicate a location. To do this, you can use the Marker class.

 final Set<Marker> _markers = {};

 void _onAddMarkerButtonPressed() {
  setState(() {
    _markers.add(Marker(
      markerId: MarkerId(_lastMapPosition.toString()),
      position: _lastMapPosition,
      infoWindow: InfoWindow(
        title: 'Really cool place',
        snippet: '5 Star Rating',
      ),
      icon: BitmapDescriptor.defaultMarker,
    ));
  });
 }

 @override
 Widget build(BuildContext context) {
  return GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
    ),
    markers: _markers,
  );
 }

Adding a polyline: 

You can add a polyline to the map to indicate a route or path. To do this, you can use the Polyline class.

 final Set<Polyline> _polylines = {};

 void _addPolyline() {
  Polyline polyline = Polyline(
      polylineId: PolylineId("poly"),
      color: Colors.red,
      points: [LatLng(37.7749, -122.4194),
        LatLng(37.7902, -122.4015)],
      width: 5);
  setState(() {
    _polylines.add(polyline);
  });
 }

 @override
 Widget build(BuildContext context) {
  return GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
    ),
    polylines: _polylines,
  );
 }

These are just a few examples of how you can customize the Google Map in Flutter. You can find more information and examples in the official documentation: here