FLUTTER DIPLOMA
GOOGLE MAPS
Google Maps
• Google Maps
• Gps
• Adding Google Maps
Google Maps
• Location-aware services are integrated into your life almost daily through mobile applications.
Implementing these services in your apps can be done through the use of the Google Maps
API.
It allows you to display a map, customize its attributes and render markers of places at their geo-
location among other things.
Google Maps
• Google Maps
• Gps
• Adding Google Maps
Gps (Global Positioning System)
What is Geolocation?
Geolocation: Displaying User or Device Position on Maps.
• Geolocation refers to the identification of the geographic location of a user or computing
device via a variety of data collection mechanisms. Typically, most geolocation services use
network routing addresses or internal GPS devices to determine this location. Geolocation is a
device-specific API.
What is Gps?
Global Positioning System: a way of using satellite data to show where something is on a map,
and give users directions.
GPS Coordinates
Coordinates an address
To find the GPS coordinates of an address or a place, simply use our latitude and longitude finder. Fill the
address field and click on "Get GPS Coordinates" to display its latitude and longitude. The coordinates are
displayed in the left column or directly on the interactive map. You can also create a free account to access
Google Maps coordinates finder.
Find an address from its latitude and longitude
Latitude and longitude to address: fill in the decimal GPS coordinates and click on the corresponding "Get
Address" button.
Address from sexagesimal coordinates: fill in the sexagesimal GPS coordinates and click on the
corresponding "Get Address" button.
Map coordinates of any GPS location
Click directly on the map to get the address and the GPS coordinates of any GPS location on Earth. The map
coordinates are displayed on the left column and on the map.
Camera and View
The map view is modelled as a camera looking down on a flat plane. The position of the camera (and hence
the rendering of the map) is specified by the following properties:
1. Target (location)
The camera target is the location of the centre of the map, specified as latitude and longitude coordinates.
2. Bearing (orientation)
The camera bearing is the direction in which a vertical line on the map points, measured in degrees
clockwise from north.
3. Tilt (viewing angle)
The tilt defines the camera's position on an arc directly over the map’s centre position and the surface of the
Earth, measured in degrees from the nadir (the direction pointing directly below the camera).
4. Zoom(scale)
Google Maps
• Google Maps
• Gps
• Adding Google Maps
BREAK
Adding Google Maps
1. Create a GCP project
To use the Google Maps plugin, we need a GCP(Google Cloud Platform) project and its
corresponding API key.
• To create a new GCP project, follow the steps below.
• Head over to the GCP console.
Open.
2. project.”
Adding Google Maps
2. Add Google Maps SDK (for both Android & iOS)
Flutter is Google's mobile app SDK for crafting high-quality native experiences on iOS and
Android in record time.
• With the Google Maps Flutter plugin, you can add maps based on Google maps data to your
application.
• The plugin automatically handles access to the Google Maps servers, map display, and
response to user gestures such as clicks and drags. You can also add markers to your map.
• These objects provide additional information for map locations and allow the user to interact
with the map.
Although Google Maps has been around for some time, the plugin uses Flutter’s
new embedding mechanism for views which is in developer pre-release, so this plugin should
be considered a pre-release as well.roject.”
Google Maps
To use the Google Maps plugin, we need to add the Maps SDK for both Android and iOS. To add
the required SDK, follow the below steps.
1. Go to “APIs & Services” from the Navigation menu and select “Library.”
2. Search for “Maps” and enable Maps SDK for both Android & iOS
2. Creating API keys
The API key is a unique identifier that authenticates requests associated with your project for
usage and billing purposes. You must have at least one API key associated with your project.
To create an API key:
A. Go to the Google Maps Platform > Credentials page.
B. On the Credentials page, click Create credentials > API key.
C. The API key created dialog displays your newly created API key.
D. Click Close.
The new API key is listed on the Credentials page under API keys.
(Remember to restrict Api key before using it in production.)
Link: https://developers.google.com/maps
Google Maps
Restricting API keys
Restricting API keys adds security to your application by ensuring only authorized requests are
made with your API key. We strongly recommend that you follow the instructions to set
restrictions for your API keys.
• There are two types of restrictions:
1. Application restrictions enable you to define which type of app should have access to this key
(i.e., Android or iOS). You can select the appropriate option to make sure the key you created
works only for that specific platform.
2. API restrictions enable you to select which services are accessible using this key. If it were just
for the map, you’d select Maps API from the list.
Set up Flutter application
flutter create flutter map
Go to pubspec.yaml file and add the google_maps_flutter plugin under dependencies and
then run flutter pub get.
dependencies:
Android setup google_maps_flutter:
Set the minSdkVersion in android/app/build.gradle.
android {
defaultConfig {
minSdkVersion 20
}
}
Go to android/app/src/main/AndroidManifest.xml and add the following code inside the
application tag.
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
Add the following code under manifest tag.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION
iOS setup
Go to ios/Runner/AppDelegate.swift and replace the entire code with the following.
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)}}
Go to ios/Runner/Info.plist and add the following code.
<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Access.</string>
With this, we have completed the setup to use Google Maps plugin.
Add Google Maps widget
Add Google Maps widget
GoogleMap(
initialCameraPosition: _initialCameraPosition ,
myLocationEnabled: true,
myLocationButtonEnabled: true,
mapType: MapType.normal,
zoomGesturesEnabled: true,
zoomControlsEnabled: true,
onMapCreated: (GoogleMapController c) {
// to control the camera position of the map
googleMapController = c;
},
),
THANK YOU!
