[1]구글지도를 액티비티에 띄우기

( 키값받기 -> 라이브러리추가 + 메타데이터에 키값 넘기기 -> 액티비티위에 SupportMapFragment올리기)


1. 새로운 프로젝트 GoogleMap_2018 을 만든다. 액티비티에 GoogleMaps Activity가 있지만, 

보통은 기존앱에 이식해서 쓰므로, 이것으로 만들면 이식할 수 가 없다.


2. 구글맵을 쓰기 위해서는 구글에서 권한(키)을 받아와야한다. 검색창에 구글api 라 검색해서, 콘솔의 대쉬보드로 오자.

지금은 구글APIs가 구글 Cloud Platform으로 바뀌었다.

경로 : https://console.cloud.google.com/apis/dashboard


(1) 우측상단의 [프로젝트 선택] > 만들기 > 프로젝트명 : GoogleMap2018 를 입력해서 만든다

.(2) 왼쪽메뉴중 [라이브러리]를 선택해서 [지도]의 [Google Maps Android API]를 선택하자. [사용설정]을 누른 다음, [사용 중지]가 뜬다.(활성화되었다)

(3) 왼쪽메뉴중 [사용자 인증정보]를 눌러서 [사용자 인증정보 만들기] > [API 키 생성]를 누르자., 키가 주어진다. 키값을 복사해놓자.

  - AIzaSyDK3(이런식)0HMgP(으로만들어진다)bWh27UmK-ED-U 

(4) 키값을 복사한 뒤, [대시보드]로 돌아와, [API] > GoogleMapsAndroidAPI (혼자 사용중표시있음)을 클릭하고 온 뒤 > API정보 우측에 [문서]를 클릭한다.

(5) 문서의 [가이드]탭을 열어놓자. ( 가이드는 액티비티만들때, GoogleMapsActivity를 만들어서 사용하라고 가이드해있다. 일케하면 기존앱에 이식불가)


3. 키값을 적용하기 위해 다시 안드로이드프로젝트로 와서, 구글맵SDK를 받아와야한다.

(1)[ alt + ctrl+ shift + s ] or  File>Open Module Settings       >   app > dependecny> + > library를 선택해서 [gms]를 검색하자

 - com.google.android.gms:play-services-maps:11.8.0 를 찾아서 선택하여 라이브러리를 추가해주자.


(2) 키값은 manifest에다가 넣어주는 것이다! 매니페스트에 <메타데이터>를 아래와 같이 추가해준다. 입력은 서비스와 같이, application 안, activity박!

  - name속성에는 정해진 코드를, value에다가는 콘솔-사용자인증정보에 있는 키값을 넣어준다. 

  - 메타데이터가 세팅되서 구글api에 인증정보를 넘겨준다.


        </activity>


        <meta-data

            android:name="com.google.android.geo.API_KEY"

            android:value="AIzaSyDK3stJvW6DL50HMgPCpCbWh27UmK-ED-U"/>  //인증받은 키값


    </application>


4. 구글맵을 띄울 틀을 만들어 주기 위해서, res>메인액티비티xml에 Design탭으로 온다.

(1) palette에서 fragment를 검색해서 올려준다. 디자인탭에서 추가하는 이유는 fragment를 드래그해서 올리면, fragment리스트들을 보여기 때문!

    <SupportMapFragemnt>를 찾아서 선택해준다. 그리고 화면에 꽉 채워준다.


(2) 앱을 실행시켜서 지도를 확인해보자. 만약 메타데이터를 주석처리하면 키값을 서버에 못넘겨줘서 권한을 못얻어 지도가 아예 안뜬다.



Q. 자신의 현재 위치 강의도 해주세요!! 요즘 이거때문에 애먹고 있거든요 ㅎㅎ

A .참고할 문서를 말씀드리면 https://developers.google.com/maps/documentation/android-api/location?hl=ko 참고하시구요.

   위치정보 가져올때는 에뮬레이터로 돌리시면 안됩니다. 스마트폰으로 하셔야 합니다.



[2] googlemap에 마커를 찍어보자.

나중에는 검색창에 [ git googlemap example ]을 검색해서 공식 예제를 보고 공부하자.(https://github.com/googlemaps/)


1. 올린 맵 프래그먼트에 id를 주자(map)

2. 메인액티비티 자바로 와서 onCreate()에서 프래그먼트 변수에 참조시키자.

(1) SupportMapFragment supportMapFragment = getSupportFragmentManager().findFragmentById(R.id.map);

- 난 이때, map이라는 id를 참조가 안됬다. Build>rebuild Project로 참조되도록 새로고침하자.

 - 캐스팅에러가 뜨면, alt + enter로 캐스팅 완료하자(겟서포트프래그먼트매니져().fi~)하고 alt + enter로 쉽게 캐스팅하자.


        SupportMapFragment supportMapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);


3. 액티비티에 구글맵 인터페이스 중 OnMapReadyCallback를 implement해줘서 사용해야한다. 

  맵이 준비가되었을 때, 호출되는 인터페이스이다. 구현화시킨 OnMapReady()에서 좌표설정, 마커 등을 단다.

 - 인터페이스는 리스너처럼 귀라고 생각하자. 맵이 준비가 된 것을 들어주는 귀를 달아주자.

(1) alt+enter를 통해 onMapReady()를 오버라이딩하자

<인터페이스(귀)를 달아서, 콜백함수를 쓰는 이유는, 사람마다 맵을 로딩하는 속도가 다르기 때문에, 로딩이 완료되었을 때 마커를 달아주는 식으로 하기위해>


(2) 이제 프래그먼트 변수 supportMapFragment . 에 getMapAsync()를 달아주고 파라미터를 this로 준다. 

 *getMapAsync()는 구글맵프래그먼트에, 인터페이스를 달아서 구현한 콜백함수를 등록하게 해준다. 

 * 파라미터의 this->메인액티비티->온맵 래디 콜백-> 오버라이딩한 onMapReady()로 들어가게 해준다. 

 <오버라이딩 하여 사용할 매쏘드(onMapReady)를 가진, 인터페이스(onMapReadyCallback)를 달고 있는 놈(MainActivitty)의 context>


        supportMapFragment.getMapAsync(this);


4. 좌표를 찍어주기위해 특정위치의 좌표를 알아내자. 

(1) maps.google.com로 들어가서 원하는 곳을 검색해서 클릭하면 좌표가 뜬다. 

    만약 안뜬다면 그 지점을 우클릭> [이곳을 자세히 알고싶나요] 클릭 하면 하면 하단에 뜬다

.

(2) 호반아파트 앞 정류장 좌표는 35.050607, 126.722983 이다. 주석처리를 해서 프로젝트에 적어놓자.


    //호반정류장 좌표 35.050607, 126.722983

    @Override

    public void onMapReady(GoogleMap googleMap) {


    }




(3) 알아낸 좌표를 onMapReady()안에 넣어서, 맵이 로딩이 되었을 때, 해당 좌표를 담아줘야한다. 좌표를 담는 것은 

   구글맵스 gms클래스중 위도경도를 담는 클래스 LatLng의 객체를 생생하는 곳의 파라미터로 넣는다.  


LatLng hoban_bustop = new LatLng(35.050607, 126.722983);


(4) 마커는 구글맵 객체에 달아준다. onMapReady()호출시 파라미터로 넘어오는 GoogleMap googlemap을 이용해서, 

   옵션으로 (LatLng에 담긴 위치 + 타이틀)을 넣어,  마커를 달게한다

googleMap.addMarker(new MarkerOptions().position(hoban_bustop).title("호반아파트 정류장")); 


(5)앱을 실행시켜, 마커가 찍혀있는지 확인한다.




5. 이제 지도가 켜졌을 때, 마커가 찍힌점으로 맵 이동시켜보자.

(1)googleMap.moveCamera();를 이용한다. 파라미터로는 CameraUpdateFactory.newLatLngZoom( , )을 주는데 

   앞에는 LatLng의 좌표변수, 에는 줌의 정도를 준다. 

 - 나는 정류장이 다 찍히게 하기 위해서 여러정류장 사이의 좌표를 찾아와 지도를 옮겨놓았고 줌은 15정도가 적당했다.


        //정류장들 중앙좌표 35.048169, 126.720031

        LatLng center_bustop = new LatLng(35.048169, 126.720031);

        googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(center_bustop, 15)); 

        //구글맵의 위치를 로딩이 완료된 시점에서,  맵의 보이는 위치를 옮겨 놓는다. 좌표와 함께, 줌의 정도도 같이준다.


6. 이제 버튼을 누르면 3d효과를 주면서 확대하도록 해보자.

(1) 프래그먼트 위에 버튼을 올리자. (id는 button_3d)로 주자.


(2) onMapReady()에서 버튼을 생성하고 id를 참조하자.


(3) 3d효과에 대한 것은 구글공식문서에서 가져올 것이다. 공식문서의 왼쪽메뉴 중 [카메라 및 뷰]를 선택하자.

    (https://developers.google.com/maps/documentation/android-api/views?hl=ko)


(4) 문서중 가장 아래 [카메라 뷰 업데이트]로 와서 , 아래 코드만 가져와서 버튼클릭리스너에 넣어주자.

     결론적으로, 카메라포지션옵션을 넣고, 그것을 googleMap객체에 달아줘서 이동시킨다.


  - 수정해야할 것 = map -> googleMap + MOUNTAIN_VIEW은 확대시킬 좌표값 LtnLng변수 + 인터페이스안에 들어오기 위하여 변수들 final 달아주기

  *** 외국은 빌딩높이가 있어서 3d로 나오는데, 우리나라지역은 3d빌딩이 잘 안나온다. 


// Construct a CameraPosition focusing on Mountain View and animate the camera to that position.

CameraPosition cameraPosition = new CameraPosition.Builder()

    .target(MOUNTAIN_VIEW)      // 확대시킬 좌표(LatLng)

    .zoom(17)                   // 줌의 정도

    .bearing(90)                // 화면각도(90-east,180-north, 270-west, 360-sourth)

    .tilt(30)                   // 카메라각도 30도

    .build();                   // Creates a CameraPosition from the builder


googleMap.animateCamera (    CameraUpdateFactory.newCameraPosition(cameraPosition)   );




























  1. 공부중 2019.03.18 21:35

    복금점 풀어주시면 안될까요?

    • nittaku 2019.04.01 00:22 신고

      전체가 풀려서 안됩니다.. 저는 제 공부내용 정리용이며, 배포용이 아닙니다!

  2. 이인회 2019.04.23 12:16

    감사합니다 덕분에 많은것을 알아갑니다.

  3. shunhag 2020.11.20 20:06

    유용한 내용 되게 잘 배우고 가여

+ Recent posts