Introduction to Android Google Maps V2 - Androhub

Introduction to Android Google Maps V2

Android allows us to integrate google maps in our application. You can show any location on the map , or can show different routes on the map e.t.c. You can also customize the map according to your choices.

Prerequisites

  1. Location Request Dialog 
  2. Marshmallow Permission

Example

Today we are going to integrate google map in android. The things that we are going to cover are:

  1. Displaying google map.
  2. Showing User Current Location on Map.
  3. Showing different type of maps.
  4. Working on My Location Button and Blue dot.
  5. Showing Default Marker as well as custom marker with Camera Animation.
  6. Updating marker position on location changed by using Location Update method.
  7. Google Map UI Settings and Gestures Functionality.
  8. Handling Google API Client Call back methods.
  9. Handling Marker Click event.
  10. Hiding Navigation and GPS pointer which appears on clicking of marker i.e. Map Toolbar.

VIDEO DEMO

So Lets start playing with Google Maps,

Create Project in Android Studio

Firstly, create new project in Android Studio naming anything whatever you want.

Getting Google Maps API Key

1. Now login into your Gmail Account and go to Google API Console.

2.  Click on Create New Project.

create_new_project

3. Enter your project name and click create.

entered_project_name

4. Creating project will take some couple of minutes you can check the processing of your project top and bottom of page.

project_processing

project_processing_top

5. After successful creation of your project the below is the first screen you get.

first_page

6. You can check your dashboard by clicking Dashboard from side menu. Currently, it is empty, when we integrate and test the app then analytics will show here.

empty_dashboard

7. Now for Integration we need API Key so for this click over Credentials from side menu and you will get Credential Screen

add_credential

From the dropdown menu select API Key and on selection of API key a new popup will appear that ask you platform type, select android from it.

select_credential_type

8. Now another Screen will open here you have to give package name and fingerprint (optional) but it is good to put package name and fingerprint.

android_api_key  

Getting Certificate Fingerprint

There are two ways of getting fingerprint:

From Terminal or CMD

1. Locate your debug keystore file. The file name is debug.keystore, and is created the first time you build your project. By default, it is stored in the same directory as your Android Virtual Device (AVD) files:

  • macOS and Linux: ~/.android/
  • Windows Vista and Windows 7: C:\Users\your_user_name\.android\

2. List the SHA-1 fingerprint:

  • For Linux or macOS, open a terminal window and enter the following:

  • For Windows Vista and Windows 7, run:

You should see output similar to this:

The line that begins with SHA1 contains the certificate’s SHA-1 fingerprint. The fingerprint is the sequence of 20 two-digit hexadecimal numbers separated by colons.

terminal_hash_key

From Gradle

1. Click on Gradle (From Right Side Panel, you will see Gradle Bar).

2. Click on Refresh (Click on Refresh from Gradle Bar, you will see List Gradle scripts of your Project).

gradle_view

3. Click on Your Project (Your Project Name form List (root)) -> Tasks -> android -> signingReport (double click).

 

gradle_inside_view

4. You will get SHA1 and MD5 in Run Bar.

hashkey_output

Now Copy your SHA1 fingerprint.

Back to Google API Console

9. Now enter your package name and copied SHA1 fingerprint in respective text fields.

enter_details

After adding click create.

10. A popup will open containing your API Key copy that API key and keep if safe with you and don’t disclose with anyone.

map_api_key

You can also delete and regenerate to existing API key.

11. Now go back to Library menu and click Google Maps Android API under Google Maps APIs category and click enable to enable Google Map API

enable_map

Now all done from Google API Console side come back to Android Studio.

Adding Google Play Services

Before doing anything firstly you need Google Play Services to deal with Google Maps. Follow below steps:

1.   For this you have to go to Project Module Setting -> Dependency.

module_settings

module_dependency

2. Click + button and select Library Dependency.

click_library

3. Now new screen will open from this select com.google.android.gms:play-services-maps and click Ok and you can see that it will added to you existing dependency.

add_play_services

4. Now to add it to your grade file click OK again and wait for sometime.

5. If you are not able to find Play Services then open you SDK manager and install library form it.

sdk_manager

6. You can check your added Play Services dependency in build.gradle file.

7. Open your AndroidManifest.xml and the following element as a child of the <application> element, by inserting it just before the closing </application> tag:

Add the API key to your application

Now open your AndroidManifest.xml and the following element as a child of the <application> element, by inserting it just before the closing </application> tag:

Substitute your API key for google_map_api_key in the value attribute. This element sets the key com.google.android.maps.v2.API_KEY to the value of your API key.

Permission and Features Required For Google Map

Add the below permission and features to your AndroidManifest.xml.

Add a Fragment

Add a <fragment> element to the activity’s layout file to define a Fragment object. In this element, set the android:name attribute to "com.google.android.gms.maps.SupportMapFragment". This automatically attaches a SupportMapFragment to the activity.

The following layout file contains a <fragment> element:

Add Map Code

To work with the map inside your app, you’ll need to implement the OnMapReadyCallback interface and set an instance of the callback on a SupportMapFragment . This tutorial uses a SupportMapFragment, because that’s the most common way of adding a map to an app. The first step is to implement the callback interface:

Now find the ID of the SupportMapFragment by using getSupportFragmentManager()  and then use getMapAsync() to set the callback on the fragment.

Call the above method on your activity OnCreate method

Note: getMapAsync() must be called from the main thread, and the callback will be executed in the main thread. If Google Play services is not installed on the user’s device, the callback will not be triggered until the user installs Play services.So we are checking if PlayServices are installed or not.

Use the onMapReady(GoogleMap) callback method to get a handle to the GoogleMap object. The callback is triggered when the map is ready to be used. It provides a non-null instance of GoogleMap. You can use the GoogleMap object to set the view options for the map or add a marker, for example.

Map Types

There are many types of maps available within the Google Maps Android API. For example, an atlas usually contains political maps that focus on showing boundaries, and road maps that show all of the roads for a city or region.

The Google Maps Android API offers four types of maps, as well as an option to have no map at all:

1. Normal

Typical road map. Roads, some man-made features, and important natural features such as rivers are shown. Road and feature labels are also visible.

normal_map
Normal Map Type

2. Hybrid

Satellite photograph data with road maps added. Road and feature labels are also visible.

hybrid_map
Hybrid Map Type

3. Satellite

Satellite photograph data. Road and feature labels are not visible.

satellite_map
Satellite Map Type

4. Terrain

Topographic data. The map includes colors, contour lines and labels, and perspective shading. Some roads and labels are also visible.

terrain_map
Terrain Map Type

5. None

No tiles. The map will be rendered as an empty grid with no tiles loaded.

none_map
None Map Type

To set the type of a map, call the GoogleMap object’s setMapType() method, passing one of the type constants defined in GoogleMap. For example, to display a hybrid map:

Adding Marker

You can add a marker on the map by using following code:

Changing Marker Color

By default map marker color will be RED. Google maps provides some set of predefined colored icons for the marker.

Custom Marker Color

Apart from maps native marker icons, you can use own image to show as a marker. You can load the icon from any kind of supported sources.

  • fromAsset(String assetName) – Loading from assets folder.
  • fromBitmap (Bitmap image) – Loading bitmap image.
  • fromFile (String path) – Loading from file.
  • fromResource (int resourceId) – Loading from drawable resource.

Below I loaded a custom marker icon from drawable folder

Moving Camera to a Location with Animation

You may want to move camera to a particular position. Google maps provides set of functions to achieve this.

UI Controls

The Maps API offers built-in UI controls that are similar to those found in the Google Maps application on your Android phone. You can toggle the visibility of these controls using the UiSettings class which can be obtained from aGoogleMap with the GoogleMap.getUiSettings method.

1. Zoom Controls

You can call setZoomControlsEnabled(boolean) function to get rid of those zooming controls on the map. By disabling these buttons map zooming functionality still work by pinching gesture.

2. Compass

Compass can be disabled by calling setCompassEnabled(boolean) function.

3. My Location Button

My location button will be used to move map to your current location. This button can be shown / hidden by calling setMyLocationButtonEnabled(boolean) function.

On False Mode
On False Mode

Map Gestures

1. Rotate Gestures

My rotate gesture can be enabled or disabled by calling setRotateGesturesEnabled(boolean) method.

2. Zoom Gestures

You can disable zooming gesture functionality by calling setZoomGesturesEnabled(boolean).

3. Tilt Gestures

A user can tilt the map by placing two fingers on the map and moving them down or up together to increase or decrease the tilt angle respectively. You can disable tilt gestures by calling setTiltGesturesEnabled(boolean).

4. Pan/Scroll Gestures

A user can scroll (pan) around the map by dragging the map with their finger. You can disable scrolling by calling setScrollGesturesEnabled(boolean).

Map toolbar

By default, a toolbar appears at the bottom right of the map when a user taps a marker. The toolbar gives the user quick access to the Google Maps mobile app. You can enable and disable the toolbar by calling setMapToolbarEnabled(boolean).

map_with_toolbar
Default Mode

False Mode
On False Mode

 

Showing Blue Dot

You can show user’s current location on the map by calling setMyLocationEnabled(). Pass true / false to enable or disable this feature.

Handling Marker Click Event

1. For handling marker click event implement GoogleMap.OnMarkerClickListener to your activity.

2. Now inside onMapReady method set marker click event over google map.

3. The below method is used to handle marker click event, here you will get marker instance to do your stuff.

Handling MyLocationButton Click Event

1. For handling marker click event implement GoogleMap.OnMyLocationButtonClickListener to your activity.

2. Now inside onMapReady method set marker click event over google map.

3. The below method is used to get current location and update blue dot.

Till here we are all done with google maps integration. Now lets look upon Google API Client and Location Updates.

Set Up a Location Request

Check Location Request Tutorial for showing location alert dialog whenever GPS goes off.

To store parameters for requests to the fused location provider, create a LocationRequest. The parameters determine the level of accuracy for location requests.

The meaning of code lines that used above is :

  1. setInterval() : This method sets the rate in milliseconds at which your app prefers to receive location updates. Note that the location updates may be faster than this rate if another app is receiving updates at a faster rate, or slower than this rate, or there may be no updates at all.
  2. setFasterInterval() : This method sets the fastest rate in milliseconds at which your app can handle location updates. You need to set this rate because other apps also affect the rate at which updates are sent. The Google Play services location APIs send out updates at the fastest rate that any app has requested with setInterval(). If this rate is faster than your app can handle, you may encounter problems with UI flicker or data overflow. To prevent this, call setFastestInterval() to set an upper limit to the update rate.
  3. setPriority() : This method sets the priority of the request, which gives the Google Play services location services a strong hint about which location sources to use. The following values are supported:
  • PRIORITY_BALANCED_POWER_ACCURACY – Use this setting to request location precision to within a city block, which is an accuracy of approximately 100 meters. This is considered a coarse level of accuracy, and is likely to consume less power.
  • PRIORITY_HIGH_ACCURACY – Use this setting to request the most precise location possible. With this setting, the location services are more likely to use GPS to determine the location.
  • PRIORITY_LOW_POWER – Use this setting to request city-level precision, which is an accuracy of approximately 10 kilometers. This is considered a coarse level of accuracy, and is likely to consume less power.
  • PRIORITY_NO_POWER – Use this setting if you need negligible impact on power consumption, but want to receive location updates when available. With this setting, your app does not trigger any location updates, but receives locations triggered by other apps.

The priority of PRIORITY_HIGH_ACCURACY, combined with the ACCESS_FINE_LOCATION permission setting that you’ve defined in the app manifest, and a fast update interval of 5000 milliseconds (5 seconds), causes the fused location provider to return location updates that are accurate to within a few feet. This approach is appropriate for mapping apps that display the location in real time.

Receiving Location Update

1. For getting location update we need to add google location dependency in build.gradle file.

2. Now implement LocationListener interface to your activity.

3. On implementing LocationListener you will get this method that will return changed Location.

3. Add GoogleApiClient call backs to your activity that are used to help in starting location update and stopping location update.

4. Build and Connect API Client in your onResume method.

5. Inside onConnected method get user last know location (optional if needed) and start getting location update.

6. API Clients failed and suspended callbacks.

7. When activity status goes to onPause then stop getting location updates.

8. When activity status goes to onStop disconnect the api client.

Full MainActivity.java Code

Below is the full code of MainActivity.java code. Apart from all the above steps we need to check two things first:

  1. Location Permission is granted or not. (only marshmallow devices).
  2. Check if GPS is enabled or disabled.

Finally, all set up. Run your code and see the magic of google maps. Now integrate google map to create location based applications.

Thanks. 🙂

 

2 Comments

Bhushan
Wednesday, September 14th, 2016

awesome tutorial. love reading ur blog every time.. keep it up 🙂

Hori Revens
Tuesday, June 6th, 2017

Thanks for your complete tutorial. I can learn more about Google Maps on Android 🙂

Post comment

Your email address will not be published. Required fields are marked *