Google Map for Flutter on Web and Mobile

You are currently viewing Google Map for Flutter on Web and Mobile
Google Map

Google Map for Flutter on Web and Mobile

Easy Google Maps for Flutter on Web and Mobile

Getting Started

Mobile

To use this plugin, add google_maps_flutter as a dependency in your pubspec.yaml file.

  • Get an API key at https://cloud.google.com/maps-platform/.
  • Enable Google Map SDK for each platform.
    • Go to Google Developers Console.
    • Choose the project that you want to enable Google Maps on.
    • Select the navigation menu and then select “Google Maps”.
    • Select “APIs” under the Google Maps menu.
    • To enable Google Maps for Android, select “Maps SDK for Android” in the “Additional APIs” section, then select “ENABLE”.
    • To enable Google Maps for iOS, select “Maps SDK for iOS” in the “Additional APIs” section, then select “ENABLE”.
    • Make sure the APIs you enabled are under the “Enabled APIs” section.
See also  Material Designed Music Player in Flutter

For more details, see Getting started with Google Maps Platform.

Android

  1. Set the minSdkVersion in android/app/build.gradle:
android {
    defaultConfig {
        minSdkVersion 20
    }
}

This means that app will only be available for users that run Android SDK 20 or higher.

  1. Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:
<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

iOS

Specify your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:

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 KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Both 

You can now add a GoogleMap widget to your widget tree.

See also  Daily Task like Github-Contributions GridView in Flutter

The map view can be controlled with the GoogleMapController that is passed to the GoogleMap‘s onMapCreated callback.

Sample Usage #

import 'dart:async';

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

void main() => runApp(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(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

See the example directory for a complete sample app.

See also  Image Sequence Animator for Flutter

Web

Good to go!

EasyGoogleMaps(
    apiKey: 'YOUR_API_KEY_HERE',
    address: 'Infinite Loop, Cupertino, CA 95014',
    title: 'Apple Campus',
)
  • When you change the address the map will automatically move the camera position to the new marker
  • Optionally give a width and height
  • API Key is Required from Google Maps

Screenshots

Google Map
Google Map

Credit

This is developed by rodydavis
Download this project from the below link.
https://github.com/rodydavis/easy_google_maps/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/rodydavis/easy_google_maps

Spread the love

Leave a Reply