14. 구글지도

구글 지도는 구글에서 오픈 API로 제공하는 전자 지도입니다.

안드로이드 앱에 포함하여 자신에게 필요한 내용으로 프로그래밍할 수 있습니다.

 

① 구글 지도 사용 준비

구글 지도를 안드로이드 앱에 포함하려면 개발에 사용할 PC별로 구글에서 제공하는 API 키를 얻어야 합니다.

 

1. Google Play services 설치

맨 앞에서 AndroidStudio환경을 설정할 때 이미 설치했습니다.

설치가 잘 되었는지 [Tools] -> [SDK Manager] -> [SDK Tools]탭을 클릭하고 확인합니다.

 

 

2. 인증을 위한 SHA1 코드 알아내기

구글 지도 서비스를 사용하려면 별도의 인증을 받아야합니다.

 

명령 프롬프트를 켜서 Open JDK 폴더로 이동한 후 다음과 같은 명령어를 사용합니다.

( Open JDK 폴더는 C:\Program Files\Android\Android Studio\jre\bin 에 있을 것이고

debug.keystore 파일은 C:\Users\사용자이름\.android\debug.keystore에 있을 것입니다. )

 

cd C:\Program Files\Android\Android Studio\jre\bin

keytool.exe -list -v -keysotre C:\Users\사용자이름\.android\debug.keystore

비밀번호 입력은 'android'를 입력합니다.

결과 중 SHA1부분을 코드로 복사합니다. (드래그하고 [Enter]를 누르면 복사됨)

 

 

3. 구글 지도를 사용할 프로젝트 생성

프로젝트명은 MyApplication13, 패키지명은 'com.example.myapplication12' 로 하고 만들겠습니다.

 

 

4. Google API 등록

다음의 URL로 접속해서 구글 로그인을 합니다.

https://code.google.com/apis/console 

Google Cloud Platform

 

프로젝트 이름을 설정하고 '만들기'를 클릭합니다.

 

 

이후 Google APIs를 클릭하고

 

라이브러리를 클릭해서 이동합니다.

 

 

라이브러리중 Maps SDK for Android를 클릭합니다.

 

'사용' 버튼을 클릭합니다.

 

 

다음에 나오는 화면에서 다시 'GoolgeAPIs' 아이콘을 눌러서 초기화면으로 돌아갑니다.

그 후 '사용자 인증 정보'탭을 누르고 [사용자 인증 정보 만들기] -> [API키]를 클릭합니다.

 

 

생성된 API 키를 복사해서 메모장에 붙여 넣고 '닫기'를 클릭합니다.

 

 

'API 키 1'을 클릭합니다.

 

 

애플리케이션 제한사항은 'Android 앱'을 선택해주고 '항목 추가'를 클릭합니다.

 

 

처음에 설정한 패키지 이름을 입력하고 SHA-1인증서 지문도 붙여 넣은 후 '완료'를 클릭합니다.

 

 

 

5. Google Play Servics의 라이브러리 사용 설정

AndroidStudio로 돌아와서 구글 서비스 기능을 사용하겠습니다.

 

Project Tree에서 [Gradle Scripts] - [build.gradle (Module:app)]을 더블클릭해서 열고 아래쪽 dependencies 부분에 다음 코드를 추가합니다.

 

implementation 'com.google.android.gms:play-services-location:16.0.0'
implementation 'com.google.android.gms:play-services-maps:16.0.0'

 

 

코드 추가 후 위쪽에 노란색 줄 부분의 왼쪽에 'Sync Now'를 클릭해서 추가한 코드를 적용시킵니다.

 

 

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapplication13">
 
    <uses-feature android:required="true" android:glEsVersion="0x00020000" />
    <permission android:name = "com.example.myapplication13.permission.MAPS_RECEIVE"
        android:label="signature"></permission>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <meta-data android:name="com.google.android.gms.version" android:value = "@integer/google_play_services_version"/>
 
    <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">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyDdMwxh__ZBSvrd2wlv1iColjmyYGCmsg0" />
        <uses-library android:name="org.apache.http.legacy" android:required="false" />
    </application>
</manifest>

 

5~14와 30줄 부분을 추가한 것입니다.

30줄에서 android:value="~" 물결 부분은 아까 메모장에 복사를 해놓은 API 키입니다.

 

5 : Google Map API 버전 2를 의미

6~12 : 구글 지도를 사용하기 위한 인터넷 접속, 외부 저장소 접근 등의 권한을 허가

13 : Google Play Service 버전을 지정함

30 : 복사해놓은 APi 키를 지정

31 : 현재 API(10.0)의 버그 때문에 쓰는 것

 

 

 

activity_main.xml

<?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:id="@+id/map"
    android:name="com.google.android.gms.maps.MapFragment"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:cameraTargetLat="37.541"
    map:cameraTargetLng="126.986"
    map:cameraZoom="10" />

2 : map을 표현하기 위한 네임 스페이스

4 : fragment 위젯의 이름

7,8 : 서울 중심의 위도와 경도

9 : 화면 줌 레벨(0 이상의 값)

 

 

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

결과가 잘 나옵니다.

 

 

 

② 구글 지도의 응용

GoogleMap 클래스는 기본적으로 확대, 축소 이동 기능을 제공합니다.

그 이외의 기능은 그라운드 오버레이(GroundOverlay)를 활용합니다.

그라운드 오버레이는 지도(GoogleMap 클래스) 위에 투명한 유리막을 얹어 놓은 개념이라고 생각하면 됩니다.

유리막에 원하는 그림을 그리면 지도 위에 그림이 그려진 것과 같은 효과가 나타납니다.

 

 

메뉴 버튼에 '위성지도', '일반지도', '월드컵경기장 바로가기'라는 옵션들을 추가하며 마우스로 클릭할 때마다 아이콘이 찍히는 예제입니다.

아이콘 그림은 [res] - [drawable]에 미리 붙여놓아야 하며 저는 blackstar.jpg 라는 파일을 붙여놓았습니다.

위의 구글맵 예제 그대로 사용하고 java코드만 추가하면 됩니다.

 

MainActivity.java

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
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.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.GroundOverlayOptions;
import com.google.android.gms.maps.model.LatLng;
 
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
    GoogleMap gMap;  // 구글맵 변수
    MapFragment mapfrag;  // 맵 프래그먼트 변수
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("구글 지도 활용");
        mapfrag = (MapFragment) getFragmentManager().findFragmentById(R.id.map);
        mapfrag.getMapAsync(this);
        // activity_main.xml의 fragment를 mapfrag에 대입
    }
 
    GroundOverlayOptions starmark;
 
 
    @Override
    public void onMapReady(GoogleMap map) { // 처음이 보여질
        gMap = map;
        gMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); //위성지도 설정
        gMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(37.568256,126.897240),15));
        //지도 중심을 월드컵경기장(위도:37.~, 경도:126.~)으로 이동하고 확대 레이블 15정도로 함.
        gMap.getUiSettings().setZoomControlsEnabled(true);  // 확대 축소버튼을 아래 보여줌
        gMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() { // 지도클릭 시 작동할 리스너
            @Override
            public void onMapClick(LatLng point) {  // 지도클릭 한다면, (클릭한 위치의 경위도를 LatLng형으로 받음)
                starmark = new GroundOverlayOptions().image(BitmapDescriptorFactory.fromResource(R.drawable.blackstar))
                        .position(point, 100f, 100f); // 아이콘 생성 , 크기는 100x100 정도로 함
                gMap.addGroundOverlay(starmark); // 아이콘을 지도에 내림
            }
        });
    }
 
    //메뉴설정
    public boolean onCreateOptionsMenu(Menu menu){
        super.onCreateOptionsMenu(menu);
        menu.add(0,1,0,"위성지도");
        menu.add(0,2,0,"일반지도");
        menu.add(0,3,0,"월드컵경기장 바로가기");
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()){
            case 1:
                gMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                return true;
            case 2:
                gMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
                return true;
            case 3:
                gMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(37.568256,126.897240),15));
                //지도 중심을 월드컵경기장(위도:37.~, 경도:126.~)으로 이동하고 확대 레이블 15정도로 함.
                return true;
        }
        return false;
    }
}
 

다른 위치에 있다가 '월드컵경기장 바로가기' 클릭하면 해당 위치로 바로 이동

 

아이콘은 아무 곳이나 찍힘