Android Studio를 사용하여 Google Maps 연동 앱 만들기

Android Studio를 사용하여 Google Maps 연동 앱 만들기

구글맵

 

소개

이번 포스트에서는 Android Studio와 Jetpack Compose를 사용하여 Google Maps를 연동하는 방법을 알아보겠습니다. 이를 통해 앱에서 지도를 표시하고, 사용자가 지도를 길게 클릭했을 때 해당 위치의 좌표를 얻는 기능을 구현할 수 있습니다.

준비물

• Android Studio 설치
• Google Cloud Platform 계정 및 프로젝트 생성
• Google Maps API Key 발급

단계별 구현

1. 프로젝트 생성 및 설정

1. 새 프로젝트 생성:
   • Android Studio에서 새 프로젝트를 생성하고 "Empty Compose Activity" 템플릿을 선택합니다.
2. Google Maps API Key 발급:
   • Google Cloud Platform에 로그인하고 프로젝트를 생성합니다.
   • "API 및 서비스" > "라이브러리"로 이동하여 "Maps SDK for Android"를 활성화합니다.
   • "API 및 서비스" > "인증 정보"로 이동하여 "API 키 만들기"를 클릭합니다.
   • 생성된 API 키를 복사해둡니다.
3. 프로젝트 설정:
   • build.gradle (Project: <your_project_name>) 파일에 Google Maven 저장소를 추가합니다:

     allprojects {
         repositories {
             google()
             mavenCentral()
         }
     }

   • build.gradle (Module: app) 파일에 필요한 의존성을 추가합니다:
      

     dependencies {
         implementation 'com.google.accompanist:accompanist-permissions:0.30.0'
         implementation 'com.google.maps.android:maps-compose:2.1.0'
         implementation 'com.google.android.gms:play-services-maps:18.0.2'
     }

4. AndroidManifest.xml 설정:

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

    <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:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication">
        
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY_HERE" />

        <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>

 

2. MainActivity 설정

1. MainActivity.kt 파일을 열어 Jetpack Compose와 Google Maps를 사용하여 지도를 표시하고, 지도에서 길게 클릭한 위치의 좌표를 얻습니다:

   package com.example.yourapp
   
   import android.os.Bundle
   import android.widget.Toast
   import androidx.activity.ComponentActivity
   import androidx.activity.compose.setContent
   import androidx.compose.foundation.layout.fillMaxSize
   import androidx.compose.material3.MaterialTheme
   import androidx.compose.material3.Surface
   import androidx.compose.runtime.Composable
   import androidx.compose.runtime.mutableStateOf
   import androidx.compose.runtime.remember
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.platform.LocalContext
   import com.google.android.gms.maps.model.LatLng
   import com.google.maps.android.compose.*
   
   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               MyApplicationTheme {
                   Surface(
                       modifier = Modifier.fillMaxSize(),
                       color = MaterialTheme.colorScheme.background
                   ) {
                       MapScreen()
                   }
               }
           }
       }
   }
   
   @Composable
   fun MapScreen() {
       val context = LocalContext.current
       val cameraPositionState = rememberCameraPositionState {
           position = com.google.android.gms.maps.CameraPosition.fromLatLngZoom(LatLng(0.0, 0.0), 10f)
       }
   
       val selectedPosition = remember { mutableStateOf<LatLng?>(null) }
   
       GoogleMap(
           modifier = Modifier.fillMaxSize(),
           cameraPositionState = cameraPositionState,
           onMapLongClick = { latLng ->
               selectedPosition.value = latLng
               Toast.makeText(context, "Long clicked at: ${latLng.latitude}, ${latLng.longitude}", Toast.LENGTH_SHORT).show()
           }
       )
   
       selectedPosition.value?.let { position ->
           Marker(
               state = MarkerState(position = position),
               title = "Selected Position"
           )
       }
   }

결과

이제 앱을 실행하면 지도가 표시되고, 사용자가 지도를 길게 클릭할 때마다 해당 위치의 좌표가 토스트 메시지로 표시되며, 선택된 위치에 마커가 추가됩니다.