53. Integrating Google Maps in Android Apps

Integrating Google Maps into your Android application can significantly enhance the user experience by providing interactive and location-based services. With Kotlin, the process becomes more intuitive and efficient, allowing developers to leverage the full potential of modern programming paradigms. This guide will walk you through the process of integrating Google Maps into your Android app using Kotlin, covering everything from setting up your project to implementing advanced map features.

Getting Started with Google Maps API

Before you can integrate Google Maps into your Android application, you need to obtain an API key from the Google Cloud Platform. This key is essential as it allows your app to access Google Maps services.

1. Go to the Google Cloud Console and create a new project.
2. Navigate to the API & Services dashboard and enable the Maps SDK for Android.
3. Generate an API key by navigating to Credentials and clicking Create credentials.
4. Restrict your API key to prevent unauthorized use by specifying the apps that can use this key.

Once you have your API key, you can move on to setting up your Android project.

Setting Up Your Android Project

To integrate Google Maps into your Android application, you need to modify your project’s build.gradle files and the AndroidManifest.xml file.

Modify build.gradle Files

Start by adding the necessary dependencies to your build.gradle files:

dependencies {
    implementation 'com.google.android.gms:play-services-maps:18.0.2'
    implementation 'com.google.android.gms:play-services-location:21.0.1'
}

Ensure that your project is synced with these dependencies.

Update AndroidManifest.xml

Next, add the following permissions and metadata to your AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

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

    </application>
</manifest>

Replace YOUR_API_KEY_HERE with the API key you obtained earlier.

Creating the Map Activity

With your project set up, the next step is to create an activity that will display the map. You can create a new activity called MapsActivity and use the SupportMapFragment class to display the map.

Design the Layout

Begin by creating a layout file activity_maps.xml in the res/layout directory:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

Implement the MapsActivity

Next, implement the MapsActivity class in Kotlin:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
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
import com.google.android.gms.maps.model.MarkerOptions

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_maps)

        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        // Add a marker in Sydney and move the camera
        val sydney = LatLng(-34.0, 151.0)
        mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
    }
}

This implementation initializes the map and adds a marker at a specific location (Sydney in this example).

Enhancing Map Features

Once you have the basic map setup, you can enhance its features by adding interactivity and customizations. Here are some common enhancements:

Enabling User Location

To show the user's current location on the map, ensure you have the necessary permissions and then enable location layer on the map:

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap

    // Check permission before enabling location
    if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED) {
        mMap.isMyLocationEnabled = true
    } else {
        // Request permission
        ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.ACCESS_FINE_LOCATION), LOCATION_PERMISSION_REQUEST_CODE)
    }
}

Handle the permission result in your activity:

override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
    when (requestCode) {
        LOCATION_PERMISSION_REQUEST_CODE -> {
            if ((grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED)) {
                // Permission granted
                mMap.isMyLocationEnabled = true
            } else {
                // Permission denied
                Toast.makeText(this, "Location permission denied", Toast.LENGTH_SHORT).show()
            }
            return
        }
        else -> {
            // Ignore all other requests.
        }
    }
}

Customizing Map Type

Google Maps offers several types of maps, such as normal, satellite, terrain, and hybrid. You can set the map type as follows:

mMap.mapType = GoogleMap.MAP_TYPE_HYBRID

Adding Custom Markers

You can customize the markers on your map by using custom icons. First, add your custom marker icon to the res/drawable directory. Then, set the custom icon when adding a marker:

val customMarker = BitmapDescriptorFactory.fromResource(R.drawable.custom_marker)
mMap.addMarker(MarkerOptions().position(sydney).title("Custom Marker").icon(customMarker))

Handling Map Events

Google Maps API allows you to handle various user interactions, such as map clicks, marker clicks, and camera movements.

Map Click Listener

To handle map clicks, implement the GoogleMap.OnMapClickListener interface:

mMap.setOnMapClickListener { latLng ->
    Toast.makeText(this, "Map clicked at: $latLng", Toast.LENGTH_SHORT).show()
}

Marker Click Listener

To handle marker clicks, set a click listener on the map:

mMap.setOnMarkerClickListener { marker ->
    Toast.makeText(this, "Marker clicked: ${marker.title}", Toast.LENGTH_SHORT).show()
    false
}

Conclusion

Integrating Google Maps into your Android app using Kotlin is a powerful way to enhance user engagement by providing interactive and location-based features. By following the steps outlined in this guide, you can set up Google Maps in your app, customize its appearance, and handle user interactions effectively. With these tools and techniques, you can develop sophisticated Android applications that leverage the full potential of Google Maps.

Next page of the Free Ebook:

72Handling Android Permissions

8 minutes