Display Google Map in Android

Display Google Map in Android

Google Maps is a web-based mapping service that can be integrated into an Android application.

The Google Maps Android API is a part of the Google Play Services. So, we need to add play-services-maps dependency in the module's build.gradle file.

app/build.gradle

dependencies {
    // Other dependencies
    // ...
    implementation 'com.google.android.gms:play-services-maps:17.0.0'
}

To access the Google Maps servers, we need an API key. It is a unique identifier that is used for requests authentication. API key is free, and we can get it by following these steps:

  1. Login to the Google Developers Console.
  2. Click the drop-down and select the project or create new.
  3. In the navigation bar, click "Credentials".
  4. When credentials page was opened, click "Create credentials" and then select "API key".
  5. The newly created API key will be provided in the dialog.
  6. Copy API key and add to strings.xml file.

app/src/main/res/values/strings.xml

<resources>
    <!-- Other strings -->
    <string name="google_api_key" templateMergeStrategy="preserve"
        translatable="false">YOUR_API_KEY</string>
</resources>
  1. Open the AndroidManifest.xml file and add the meta-data element which defines an API key.

app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <application>
        <!-- ... -->

        <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_api_key"/>

        <activity android:name=".MainActivity">
            <!-- ... -->
        </activity>
    </application>

</manifest>

In the layout XML file we added <fragment> element which will used to display Google map. A SupportMapFragment provides access to the GoogleMap object.

app/src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myMap"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />

The findFragmentById() method can be used to find a map fragment that was identified by ID. Map callback can be registered by using getMapAsync() method.

After that, we implement the OnMapReadyCallback interface and override the onMapReady() method. We move the camera to the desired location by using the moveCamera() method.

app/src/main/java/com/example/app/MainActivity.kt

package com.example.app

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.SupportMapFragment
import com.google.android.gms.maps.model.LatLng

class MainActivity : AppCompatActivity(), OnMapReadyCallback
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.myMap) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap)
    {
        val cords = LatLng(40.689247, -74.044502)
        googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(cords, 14f))
    }
}

Leave a Comment

Cancel reply

Your email address will not be published.