테닝베어의 나날

[Xamarin & Android] Google Map API를 이용한 지도 뿌리기 본문

IT

[Xamarin & Android] Google Map API를 이용한 지도 뿌리기

테닝베어 2015. 9. 22. 15:26

※ Xamarin이 설치 되어 있다는 전제로 포스팅을 시작하겠습니다.

 

안녕하세요. 오늘은 Xamarin과 Google의 Map API를 이용하여, 간단한 지도 Android 어플리케이션을 만드는 실습을 해보겠습니다. 차근차근 나아갈테니 잘 따라와주세요~

 

 

 

1. 비어있는 안드로이드 프로젝트 만들기

 

 

 

 

2. Properties속성안에 있는 Android Manifest메뉴를 클릭하여 Package name을 다 '소문자'로 만들기!! 그리고 패키지 명 기억!!

 

 

 

 

 

 

3. 이제 Google Map API 키를 가져와 볼 것입니다. 

 

 

 

3-1. https://console.developers.google.com/project 에 접속하여 Google 계정으로 로그인!!

 

 

3-2. 새로운 프로젝트 만들기!

 

 

 

3-3. API 및 인증 -> API -> Google Maps Android API 클릭!! 

 

 

 

3-4. 자세히 알아보기 클릭!

 

 

 

3-5. 'GET A KEY'를 클릭하고 'CONTINUE'버튼을 클릭!!

 

 

 

3-6. 아까 만든 프로젝트 선택

 

 

3-7. 이제 제일 중요한 부분 입니다. 일단 '패키지 이름 및 지문 추가'를 클릭해줍니다. 그러면 밑의 사진처럼 패키지 이름SHA-1 인증서 지문을 기입하는 부분이 추가 됩니다. 패키지 이름에는 지도 API를 적용할 어플리케이션의 패키지 이름!!(아까 다 소문자로 만든거 있죠?? 저 같은 경우에는 app3.app3 가 패키지 이름으로 들어갑니다.)

SHA-1 인증서 지문은.. 다음 사진으로 설명 하겠습니다! 

 

 

 

3-7-1. 우리는 Xamarin을 설치를 했다면 JAVA JDK를 설치했을 것입니다. 그 JDK안에 있는 keytool이라는 것을 이용하여 Xamarin의 SHA-1 인증서 지문을 뽑아낼 것입니다. 우선 cmd을 키고 (윈도우+R -> cmd 입력) 자바의 jdk의 bin폴더(저의 경우는 C:\Program Files\Java\jdk1.8.0_60\bin)로 이동 합니다.(할 줄 안다는 전제로 이 내용은 생략하겠습니다. 만약에 환경 변수 설정을 했다면 안해도 됩니다. 아무 경로에서 keytool 이라는 단어를 적었을때 명령어 라인들이 나오면 이동 안해도 됩니다.)

 

 

3-7-2. 다음과 같은 내용을 입력합니다.

 

keytool -list -v -keystore "C:\Users\사용자명\AppData\Local\Xamarin\Mono for Android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

 

 (C:\Users\사용자명\AppData\Local\Xamarin\Mono for Android\ 이 부분은 직접 들어가서 경로를 확인한 후 바꾸세요.

컴퓨터마다 다를 수도 있습니다!)

 

 

 

3-7-3. 그렇다면 여러가지 정보가 나오는데, 저희는 밑의 사진처럼 SHA1의 정보만 필요합니다. 28:BD:63 부터 가린곳의 끝까지가 SHA1 인증서 지문이 됩니다. 이 부분을 복사하여 3-7의 SHA1 인증서 지문부분에 기입해주고, 생성/저장을 해줍니다.

 

 

 

 

 

 

 

 

3-9. Xamarin으로 돌아와서 AndroidManifest.xml에 다음중 밑줄친 7줄을 추가해줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="app2.app2"

             android:versionCode="1" android:versionName="1.0" android:installLocation="auto">

    <uses-sdk android:targetSdkVersion="21" android:minSdkVersion="18" />
  
  <application android:label="App2" android:icon="@drawable/Icon">
    <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="구글 API 키를 넣으세요!!!" />
    <meta-data android:name="com.google.android.gms.version" android:value="2" />
  </application>
 
 
  <uses-feature android:glEsVersion="0x00020000" android:required="true" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  
</manifest>

cs

 

 

 

 

3-10. 본격적인 코딩에 앞서 Google play Services에 관한 것을 추가해야합니다. 다음 사진들을 따라서 추가시켜 주세요. (다운 받는 것이기 때문에 시간이 좀 걸릴 수+컴퓨터가 잠깐 버벅일 수도 있습니다.)

 

 

 

 

 

  

3-11. 이제 메인 레이아웃에 fragment부분을 추가 시켜 줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  
    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />
 
</LinearLayout>
cs

 

 

 

3-12. 메인 엑티비티 코드 부분으로 가서 클래스 옆에 IOnMapReadyCallback 인터페이스를 추가 시켜주고, 다음과 같이 코드를 작성해주세요. 그리고 Run!

    public class MainActivity : Activity, IOnMapReadyCallback
    {
        private GoogleMap mMap;
 
 
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
 
            SetContentView(Resource.Layout.Main);
 
            SetUpMap();
        }
 
        private void SetUpMap()
        {
            if(mMap == null)
            {
                FragmentManager.FindFragmentById<MapFragment>(Resource.Id.map).GetMapAsync(this);
            }
        }
 
 
        public void OnMapReady(GoogleMap googleMap)
        {
            mMap = googleMap;
        }
    }
cs

 

 

3-13. 다음과 같이 지도가 짜잔!!

 

 

 + 추가 : Genymotion으로 하려면 실행이 안될수도 있습니다. 그럴때는 http://inthecheesefactory.com/blog/how-to-install-google-services-on-genymotion/en 를 참고 해주세요!! 이 외에도 구글에 'genymotion google service' 이런 식으로 검색하면 자세히 나오니 검색 해보세요!!

 

참고&출처 : https://youtu.be/y2-lT2uWA_w

Comments