https://console.cloud.google.com/
First, open your Flutter project and navigate to the file at this location: android/app/src/main/AndroidManifest.xml. We need to add the API key here. what we got from google cloud service.
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>After adding this now manifest file looks like this
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.pinkesh.google_maps_flutter">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<application
android:label="google_maps_flutter"
android:icon="@mipmap/ic_launcher">
<!-- TODO: Add your API key here -->
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
<activity>...</activity>
</application>
</manifest>Remember though, that package name is quite important. otherwise you will not see any maps. You will see blank screen.
Android user should make sure that, in your android/app/build.gradle file minSdkVersion is 20
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.bslmeiyu.new_test"
minSdkVersion 20
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}You can open your flutter project either in androd studio or vs code. After that you need to go to ios/Runner folder. and then find AppDelegate.swift file and add the below code there.
import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
GMSServices.provideAPIKey("YOUR-KEY")
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}Here you need to change the key. Put your API key for ios here. You got that code from the google cloud service console.
And then open info.plist file and add the key and string below
<key>NSLocationWhenInUseUsageDescription</key>
<string>The app needs location permission</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
And then put the code in your main.dart file
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late GoogleMapController mapController;
final LatLng _center = const LatLng(45.521563, -122.677433);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Maps Sample App'),
backgroundColor: Colors.green[700],
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
),
);
}
}2024-08-31 09:13:42
how to read api key from .env file
We have it on our app multi vendor app.
