Android Development: Lab#7, Displaying Maps Location-aware Application

Lab # 7

Displaying Maps Location-aware Applications

Objective:
To give the basic understanding of the following:

 Overview
 What is the Google Map API? How it is used?
 Steps of using Google Map API
 Simple Example How to get key of Google Map API
 Get your current location From GPS and show it on Google Map

Overview

With the Maps SDK for Android, you can add maps based on Google Maps data to your application. The
API automatically handles access to Google Maps servers, data downloading, map display, and response
to map gestures. You can also use API calls to add markers, polygons, and overlays to a basic map, and
to change the user's view of a particular map area. These objects provide additional information for map
locations, and allow user interaction with the map. The API allows you to add these graphics to a map:

 Icons anchored to specific positions on the map (Markers).

 Sets of line segments (Polylines).

 Enclosed segments (Polygons).

 Bitmap graphics anchored to specific positions on the map (Ground Overlays).

 Sets of images which are displayed on top of the base map tiles (Tile Overlays).

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application

What is the Google Maps API? How is it used?

 The Maps API returns helpful data about places and locations.
 It does two major things:
 It can cause maps to appear for the user.
 It can return data about a latitude/longitude location, or return data about an address.
 Google's documentation is strong for this API, so this guide will mostly link to the official
documentation, and discuss how Refuge uses the different API features.

Step 1. Adding Google Maps Flutter plugin as a dependency:

Step 2. Import it Google Map Library:

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application
Step 3. Some code added in Manifest file for Android:

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application
Step 4. Putting a map on the screen:

Now it's time to get a map on the screen. Update lib/main.dart as follows:

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application
Step 5. Running the app:

Run the Flutter app in either iOS or Android to see a single map view, centered on Portland.
Feel free to modify the map center to represent your hometown, or somewhere that is
important to you.

Android App
IOS App

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application

Step 6.where you can get the KEY:

https://console.developers.google.com/apis/dashboard?project=unique-iterator-159705

Paste that link into your browser and open the Google map API console

Select these options.

Click the Agree and continue button

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application
After that you have to click create API key.

Here is your Key.

Copy that key and paste in it your google_map_api.xml

Like that

By Default Sydney coordinates are given in the code you can also change them.

LAB INSTRUCTOR: Mohsin Raza Khan

 Android Development: Lab#7, Displaying Maps Location-aware Application

You can put your own current location map in your code.

Open the Google map get current position and after that copy the coordinates.
24.883244,67.160298

Use your GPS to get your current location and show on the Google map.

Run the program and choose the real device to run your app because GPS is
only available in real device.

Exercises:
1) Implement above examples.
2) Challenging task (Bonus marking will be applied but do it by yourself)

 Draw route between two locations with two markers.

LAB INSTRUCTOR: Mohsin Raza Khan

Android Development: Lab#7, Displaying Maps Location-aware Application

LAB INSTRUCTOR: Mohsin Raza Khan