지도 추가

플랫폼 선택: Android iOS JavaScript

이 주제에서는 Android용 Maps SDK를 사용하도록 프로젝트를 구성한 후 Android 앱에 기본 지도를 추가하는 방법을 설명합니다. 지도를 추가한 후에 지도 유형 및 기능을 변경할 수 있습니다.

개요

Android용 Maps SDK는 앱에서 지도의 수명 주기, 기능 및 데이터를 관리하는 데 사용할 수 있는 다양한 클래스를 제공합니다. 클래스는 지도의 초기 상태 설정 및 런타임 시 사용자의 동작 입력에 대한 응답 같은 Android UI 모델에 따라 사용자 상호작용을 지원합니다.

지도 처리를 위한 기본 인터페이스 및 클래스:

  • GoogleMap - 기본 지도 기능 및 데이터를 관리하기 위한 진입점입니다. 앱은 SupportMapFragment 또는 MapView 객체에서 가져온 GoogleMap 객체에만 액세스할 수 있습니다.

  • SupportMapFragment - GoogleMap 객체의 수명 주기를 관리하기 위한 프래그먼트입니다.

  • MapView - GoogleMap 객체의 수명 주기를 관리하는 입니다.

  • OnMapReadyCallback - GoogleMap 객체의 이벤트 및 사용자 상호작용을 처리하는 콜백 인터페이스입니다.

GoogleMap 객체는 다음 작업을 자동으로 수행합니다.

  • Google 지도 서비스에 연결
  • 지도 타일 다운로드
  • 기기 화면에 타일 표시
  • 화면 이동 및 확대/축소와 같은 다양한 컨트롤 표시
  • 화면 이동 및 확대/축소 동작 시 지도를 이동하거나 확대/축소하여 응답

앱에서 GoogleMap 객체를 사용하려면 SupportMapFragment 또는 MapView 객체 중 하나를 지도의 컨테이너 객체로 사용한 다음 컨테이너에서 GoogleMap 객체를 가져와야 합니다. 컨테이너 클래스는 Android 프래그먼트나 뷰에서 파생되므로 Android 기본 클래스의 수명 주기 관리와 UI 기능을 지도에 제공합니다. SupportMapFragment 클래스는 GoogleMap 객체의 더 최신 버전이며 일반적인 컨테이너입니다.

코드 보기

다음은 프래그먼트를 정적으로 추가할 때 이 주제에서 사용하는 전체 Java 활동에서 가져온 코드입니다. Android 프로젝트는 Empty 프로젝트 템플릿에서 만든 다음 프로젝트 구성 가이드에 따라 업데이트되었습니다. 이 주제의 단계를 수행하면 프로젝트 템플릿에 따라 코드가 달라질 수 있습니다.

  package com.example.mapsetup;

  import androidx.appcompat.app.AppCompatActivity;

  import android.os.Bundle;

  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;

  // Implement OnMapReadyCallback.
  public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          // Set the layout file as the content view.
          setContentView(R.layout.activity_main);

          // Get a handle to the fragment and register the callback.
          SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                  .findFragmentById(R.id.map);
          mapFragment.getMapAsync(this);

      }

      // Get a handle to the GoogleMap object and display marker.
      @Override
      public void onMapReady(GoogleMap googleMap) {
          googleMap.addMarker(new MarkerOptions()
                  .position(new LatLng(0, 0))
                  .title("Marker"));
      }
  }

지도 추가하기

이 섹션에서는 프래그먼트를 지도 컨테이너로 사용하여 기본 지도를 추가하는 방법을 설명하지만, 프래그먼트 대신 뷰를 사용할 수도 있습니다. 예는 GitHub의 RawMapViewDemoActivity에서 확인할 수 있습니다.

기본 단계는 다음과 같습니다.

  1. SDK와 API 키를 가져온 후 필수 프레임워크를 추가하려면 다음 단계를 따르세요.

    1. Google Cloud 콘솔에서 설정

    2. API 키 사용

    3. Android 스튜디오 프로젝트 설정

  2. 지도를 처리할 활동에 SupportMapFragment 객체를 추가합니다. 프래그먼트를 정적 또는 동적으로 추가할 수 있습니다.

  3. OnMapReadyCallback 인터페이스를 구현합니다.

  4. 레이아웃 파일을 콘텐츠 뷰로 설정합니다.

  5. 프래그먼트를 정적으로 추가한 경우 프래그먼트에 대한 핸들을 가져옵니다.

  6. 콜백을 등록합니다.

  7. GoogleMap 객체에 대한 핸들을 가져옵니다.

SupportMapFragment 객체 추가하기

SupportMapFragment 객체를 정적 또는 동적으로 앱에 추가할 수 있습니다. 가장 간단한 방법은 정적으로 추가하는 것입니다. 프래그먼트를 동적으로 추가하는 경우 런타임 시 프래그먼트 제거 및 교체 같은 추가 작업을 처리할 수 있습니다.

프래그먼트를 정적으로 추가하기

지도를 처리할 활동의 레이아웃 파일에서 다음을 수행합니다.

  1. fragment 요소를 추가합니다.
  2. 이름 선언 xmlns:map="http://schemas.android.com/apk/res-auto"를 추가합니다. 이렇게 하면 maps 사용자 지정 XML 속성을 사용할 수 있습니다.
  3. fragment 요소에서 android:name 속성을 com.google.android.gms.maps.SupportMapFragment로 설정합니다.
  4. fragment 요소에서 android:id 속성을 추가하고 R.id.map 리소스 ID(@+id/map)로 설정합니다.

예를 들어 다음은 fragment 요소가 포함된 전체 레이아웃 파일입니다.

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

프래그먼트를 동적으로 추가하기

활동에서 다음 작업을 처리합니다.

  1. SupportMapFragment 인스턴스를 생성합니다.
  2. 프래그먼트를 활동에 추가하는 트랜잭션을 커밋합니다. 자세한 내용은 프래그먼트 트랜잭션을 참조하세요.

예:

Kotlin



val mapFragment = SupportMapFragment.newInstance()
supportFragmentManager
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit()

      

Java


SupportMapFragment mapFragment = SupportMapFragment.newInstance();
getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit();

      

OnMapReadyCallback 인터페이스 구현하기

활동 선언을 다음과 같이 업데이트합니다.

Kotlin



class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

      

Java


class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
    // ...
}

      

콘텐츠 뷰 설정하기

활동의 onCreate 메서드에서 setContentView 메서드를 호출하고 레이아웃 파일을 콘텐츠 뷰로 설정합니다.

예를 들어 레이아웃 파일의 이름이 main.xml인 경우:

Kotlin



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

      

Java


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

      

프래그먼트에 대한 핸들 가져오기 및 콜백 등록하기

  1. 프래그먼트에 대한 핸들을 가져오려면 FragmentManager.findFragmentById 메서드를 호출하고 레이아웃 파일 프래그먼트의 리소스 ID를 전달합니다. 프래그먼트를 동적으로 추가했다면 이미 핸들을 가져왔으므로 이 단계를 건너뜁니다.

  2. getMapAsync 메서드를 호출하여 프래그먼트에서 콜백을 설정합니다.

예를 들어 프래그먼트를 정적으로 추가한 경우:

Kotlin



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

      

Java


SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

GoogleMap 객체에 대한 핸들 가져오기

onMapReady 콜백 메서드를 사용하여 GoogleMap 객체에 대한 핸들을 가져옵니다. 지도에서 사용자 입력을 수신할 준비가 되면 콜백이 트리거됩니다. 지도를 업데이트하는 데 사용할 수 있는 GoogleMap 클래스의 null이 아닌 인스턴스를 제공합니다.

이 예에서 onMapReady 콜백이 GoogleMap 객체에 대한 핸들을 가져오면 마커가 지도에 추가됩니다.

Kotlin



override fun onMapReady(googleMap: GoogleMap) {
    googleMap.addMarker(
        MarkerOptions()
            .position(LatLng(0.0, 0.0))
            .title("Marker")
    )
}

      

Java


@Override
public void onMapReady(GoogleMap googleMap) {
    googleMap.addMarker(new MarkerOptions()
        .position(new LatLng(0, 0))
        .title("Marker"));
}

      

Null 섬을 중심으로 하여 마커가 표시된 지도 스크린샷

성공적으로 앱을 빌드하고 실행하면 앱에서 Null 섬(위도 0도, 경도 0도)에 마커가 표시된 지도가 나타납니다.

전체 활동의 코드를 봅니다.

전체 활동 보기


다음 단계

이 단계를 완료하면 지도 설정을 구성할 수 있습니다.