[안드로이드 구글 맵 - 2] SupportMapFragment를 사용한 안드로이드 구글 맵 마커 구현 예제

안녕하세요. PEACE-입니다.

안드로이드 스터디 [열다섯 번째] 글입니다.

이전 포스팅에서 안드로이드 어플리케이션에 구글 맵을  사용하기 위한 사전 작업으로 Google API Key를 받급 받는 방법에 대해서 알아봤습니다. 이번 포스팅에서는 구글 맵 구현 방법에 대해 다루겠습니다.

** 안드로이드 구글 맵 - 1

[ Google Maps API Key 발급 받기 : http://mailmail.tistory.com/17 ]    

** 안드로이드 구글 맵 - 2

[ Android Google Map 마커 구현 : http://mailmail.tistory.com/18 ]    

** 안드로이드 구글 맵 - 3

[ Android Google Map 마커 옵션 사용법  : http://mailmail.tistory.com/19 ]    

** 안드로이드 구글 맵 - 4

[ Android Google Map 마커 여러개 생성하기 : http://mailmail.tistory.com/20 ]    

** 안드로이드 구글 맵 - 5

[ Android Google Map 마커 클릭 이벤트 처리 : http://mailmail.tistory.com/21 ]    

** 안드로이드 구글 맵 - 6 (예정)

[ Android Google Map 마커 클러스터링 :  ]    

1. Adnroid Google Maps

Android에서는 개발자에게 다양한 API를 제공하는데 Google Map API가 그 중 하나입니다. Google Map API를 사용하기 위해서는 Key를 발급 받아야 하는데 그 내용은 이전 포스팅에서 다뤘습니다. 그럼 Google Map은 무엇이며 어떻게 사용될까요? Google Map은 Google에서 제공하는 일종의 세계 지도이며, 세계 곳곳에 나타낼 수 있는 모든 지역 정보들이 담겨있습니다.  또한 위도, 경도를 통해 특정 위치에 '마커'를 표시할 수 있으며, 'TITLE'도 설정할 수 있습니다. 다른 위젯들 처럼 이벤트 처리도 가능하며, Google Developers에서 제공하는 'Map 유틸리티'를 통해 다양한 기능도 구현할 수 있습니다. 아래 그림을 통해 간단히 알 수 있습니다.

[그림 1] Android Google Map

왼쪽 이미지는 유틸리티를 통해 많은 마커를 숫자로 만들어 준 것이고, 가운데와 오른쪽은 개별 마크와 마커를 선택했을때 나타나는 TITLE을 보여준 것입니다. 이번 포스팅에서는 원하는 위치에 마커를 생성하고 TITLE을 띄우는 방법에 대해서 다룰 것입니다.

2. Google Map 구현

* Google Map을 구현하기 앞서 해야할 작업 정리

2-1) AndroidManifest.xml에 Google Maps API Key삽입.

2-2) build.gradle (Module: app)에 map service compile - googleMap 기능을 사용하기 위한 작업.

2-3) activity_main.xml 코딩 - <fragment> 이용.

2-4) MainActivity 코딩 - OnMapReadyCallBack 확장 + GoogleMap 객체 사용.

* 구현

2-1) AndroidManifest.xml.

 > Google Maps API Key 삽입.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="Key 입력 공간" />

[그림 2] AndroidManifest.xml 설정

2-2) build.gradle (Module: app)에 map service compile.

 > GoogleMap 기능을 사용하기 위한 작업.

compile 'com.google.android.gms:play-services-maps:10.2.0'

[그림 3] gradle compile

2-3) activity_main.xml에서 레이아웃 설계.

 > Google Map을 나타낼 <fragment> 생성.

 > android:name에 SupportMapFragment 지정.

android:name="com.google.android.gms.maps.SupportMapFragment"

[그림 4] Google Map을 띄울 액티비티의 레이아웃

2-4) MainActivity.class에서 Google Map에 대한 기능적 설계.

 > OnMapReadyCallBack 확장 + GoogleMap 객체 사용.

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

    // 구글 맵 참조변수 생성
    GoogleMap mMap;

 

> SupportMapFragment을 통해 레이아웃에 만든 fragment의 ID를 참조하고 Map을 연결한다.

**주의 getMapAsync()는 반드시 Main Thread에서 호출돼야한다.

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

    // SupportMapFragment을 통해 레이아웃에 만든 fragment의 ID를 참조하고 구글맵을 호출한다.
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
    mapFragment.getMapAsync(this); //getMapAsync must be called on the main thread.
}

> onCreate()에서 getMapAsync()를 통해 onMapReady()가 자동 호출 되면서 아래 작업을 수행.

@Override
public void onMapReady(GoogleMap googleMap) {
    // 구글 맵 객체를 불러온다.
    mMap = googleMap;

    // 서울 여의도에 대한 위치 설정
    LatLng seoul = new LatLng(37.52487, 126.92723);

    // 구글 맵에 표시할 마커에 대한 옵션 설정
    MarkerOptions makerOptions = new MarkerOptions();
    makerOptions
            .position(seoul)
            .title("원하는 위치(위도, 경도)에 마커를 표시했습니다.");

    // 마커를 생성한다.
    mMap.addMarker(makerOptions);

    //카메라를 여의도 위치로 옮긴다.
    mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
}

3. 구현 화면과 소스 코드

구현 화면

[그림 6] 올바른 구현 화면

[그림 7] Key에 대한 오류가 있을 때

 작업 파일

[그림 7] 작업 파일 구성

소스코드

activity_main.xml  

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="peace.googlemapexample.MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:text="Google Map !!"
        android:padding="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <fragment android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/map"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textview" />

</android.support.constraint.ConstraintLayout>

 

MainActivity

import android.support.v4.app.FragmentActivity;
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;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

    // 구글 맵 참조변수 생성
    GoogleMap mMap;

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

        // SupportMapFragment을 통해 레이아웃에 만든 fragment의 ID를 참조하고 구글맵을 호출한다.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this); // getMapAsync must be called on the main thread.
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // 구글 맵 객체를 불러온다.
        mMap = googleMap;

        // 서울에 대한 위치 설정
        LatLng seoul = new LatLng(37.52487, 126.92723);

        // 구글 맵에 표시할 마커에 대한 옵션 설정
        MarkerOptions makerOptions = new MarkerOptions();
        makerOptions
                .position(seoul)
                .title("원하는 위치(위도, 경도)에 마커를 표시했습니다.");

        // 마커를 생성한다.
        mMap.addMarker(makerOptions);

        //카메라를 서울 위치로 옮긴다.
        mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
    }
}

 댓글과 공감은 환영입니다.