안드로이드 앱개발 스터디9 - 02 (Google Map)

https://www.youtube.com/watch?v=d-Dkb2bmcQs&list=PLC51MBz7PMyyyR2l4gGBMFMMUfYmBkZxm&index=25 

안드로이드 앱 개발 강의

#24 Google Map + Marker

 구글 지도를 불러왔을 때 미리 설정해둔 위치에 마커가 뜨게 한다. 그리고 마커를 클릭했을 때, 그 위치의 이름과 설명이 뜬다.

 

1. 구글 API 키

 구글맵을 사용하려면 API 키가 필요한데 API 키를 얻는 방법은 위에 첨부한 링크 속 영상 01:04 ~ 04:48 부분에 친절하게 설명돼 있으니 참고하길 바란다. 글로 풀어서 설명하면 길어지고 복잡해지기 때문에 영상을 보고 따라하는 것이 쉽고 빠를 것이다.

 

2. AndroidManifest.xml

<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyDRxz1hB8FwqyFb8U9mMJwK5FSxL_JlUro"/>

 </activity>와 </application> 사이에 위과 같은 코드를 입력한다.

 

3. build.gradle (Module :app)

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

 dependencies에 위와 같은 코드를 두 줄 입력하고 Sync Now를 눌러준다. 버전은 계속 업데이트 되므로 코드를 입력했을 때 에러가 생기면 alt+enter를 눌러서 추천해주는 버전대로 수정하면 된다. 2021-09-04 기준으로 ~maps는 17.0.1, ~location은 18.0.0이다.

 

4. activity_main.xml

<LinearLayout 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=".MainActivity">
 
    <fragment
        android:id="@+id/googleMap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/> //구글맵을 사용한다고 선언한다.
 
</LinearLayout>

 LinearLayout을 하나 만들어주고 그 안에 fragment를 하나 만들어 준다. id를 꼭 입력해야 한다!! 구글맵을 사용한다고 선언하기 위해 class도 위와 같이 선언해준다.

 

5. MainActivity.java

https://developers.google.com/maps/documentation/android-sdk/map?hl=ko 

지도 추가하기  |  Maps SDK for Android  |  Google Developers

 구글맵을 추가하는 방법에 대해 자세하게 설명돼 있다.

 

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
 
    private FragmentManager fragmentManager; //Fragment Manager
    private MapFragment mapFragment; //지도 fragment
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        fragmentManager = getFragmentManager();
        mapFragment = (MapFragment)fragmentManager.findFragmentById(R.id.googleMap); //activity_main.xml 에서 fragment id 적어준 거 그대로.
        mapFragment.getMapAsync(this);
    }
 
    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        LatLng location = new LatLng(35.23114039736819, 129.08236856216604); //부산대학교 제6공학관
        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.title("부산대학교 제6공학관");
        markerOptions.snippet("컴퓨터공학관");
       markerOptions.position(location); //마커 위치
       googleMap.addMarker(markerOptions); //마커 옵션 넣어주기
 
        //oogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(location, 16));
        googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(location, 16)); //어느 정도 확대할 건지
    }
}

• 1번 줄과 같이 implements OnMapReadyCallback 을 입력한 뒤, alt+enter를 눌러서 Override 함수를 입력해준다.
• OnMapReadyCallback : GoogleMap 객체의 이벤트 및 사용자 상호작용을 처리하는 콜백 인터페이스.
• 13번 줄과 같이 getMapAsync 메서드를 호출하여 프래그먼트에서 콜백을 설정한다.
• LatLng : 위도, 경도 (구글맵에서 원하는 위치를 검색한 뒤, 마커를 우클릭 하면 위도와 경도가 나오는데 클릭하면 복사된다.)
• title에는 위치의 이름을, snippet에는 위치에 대한 설명을 입력한다.
• 25번 줄의 moveCamera와 26번 줄의 animateCamera의 차이는 처음 지도를 켤 때 부드럽게 움직이는 애니메이션의 유무이다.
• 16이 적당한 확대 정도이고 숫자가 작아지면 축소되고, 숫자가 커지면 확대된다.