KOTLIN ANDROID APP DEVELOPMENT COURSE, Creating a Google Maps App

Today, I would like to cover how to create a ‘Google Maps app’, which is one of the practical examples in Android app development. In this tutorial, we will learn how to integrate Google Maps into an app using Kotlin and how to add various markers. Through this class, users will enhance their understanding of the basic Google Maps API and lay the groundwork necessary to implement more complex features based on it.

1. Setting Up the Development Environment

To use the Google Maps API, a few preparatory steps are required. Please follow the steps below.

1.1. Install Android Studio

Install the latest version of Android Studio. Additionally, a basic Android development environment should be set up.

1.2. Create a New Project

  • Open Android Studio and create a new project.
  • Select ‘Empty Activity’ as the project template.
  • Enter the project name and package, then click ‘Finish’ to create the project.

1.3. Create a Google Maps API Key

An API key is needed to use Google Maps. You can generate an API key through the following process.

  1. Visit the Google Cloud Console.
  2. Create a new project.
  3. In the navigation bar, go to ‘APIs & Services’ > ‘Library’.
  4. Find and enable ‘Maps SDK for Android’.
  5. Go to ‘Credentials’ and create a new API key.
  6. Copy the generated API key and store it in a safe place.

2. Gradle Configuration

Now, you need to modify the Gradle settings to add the Google Maps API to the project.

2.1. build.gradle (Project)

buildscript {
    ext.kotlin_version = '1.5.31'
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.3"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

2.2. build.gradle (Module)

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.example.mapapp"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        // Add this line to set your API key
        manifestPlaceholders = [googleMapsKey: "YOUR_API_KEY_HERE"]
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'androidx.core:core-ktx:1.6.0'
}

3. Configuring AndroidManifest.xml

You need to add the necessary permissions and API key to the project’s manifest file.

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

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

    <application
        android:allowBackup="true"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${googleMapsKey}" />

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. Setting Up the Layout File

We need to set up a basic layout that can display the map view.

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

</LinearLayout>

5. Implementing Map Features

Now, let’s implement the basic map functionalities. The following code covers the basic map setup and adding markers.

package com.example.mapapp

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 MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

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

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

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

        // Add marker to the map
        val seoul = LatLng(37.5665, 126.978)
        mMap.addMarker(MarkerOptions().position(seoul).title("Seoul"))
        mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul))
        
        // Set initial zoom
        mMap.moveCamera(CameraUpdateFactory.zoomTo(10f))
    }
}

6. Running the App

Now that all the configurations are complete, run the app. When you run the app on an Android device or emulator, you will see the Google Map displayed with a marker added in Seoul.

7. Conclusion

In this tutorial, we learned how to integrate Google Maps into an app using Kotlin. Based on this basic functionality, challenge yourself to add your own map features (e.g., location tracking, user location-based services, etc.). I hope to see you improve your skills through various Android app development tutorials in the future.

8. Additional Learning Resources

Thank you! If you have any questions, please leave them in the comments below.