40
Google Maps API 20080064 권세진 20080114 김도엽

Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Google Maps API

20080064 권세진

20080114 김도엽

Page 2: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Google Maps API란?

• Google Maps API의 종류

• Google Maps API 활용 예

• 키 받아 오기 & API 활성화

• Eclipse 설정

• 예제

o Android 기기에 Map 표시

o 간단한 marker

(drag 가 가능한 mark, 말 풍선 mark)

o 내 위치 표시

목차

Page 3: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Google Maps API란?

• Google에서 제공하는 open API

• 지도 어플리케이션 내에 사용 하기 위한 인터페이스 제공

• 마커, 레이아웃, 카메라 설정, 지도타입 등 다양한 기능들을 제공

Page 4: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Google Maps API의 종류

Web : Google Maps javaScript API v3

iOS : Google Maps SDK for iOS Android : Google Maps Android API v2

Page 5: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Google Maps API 활용 예

• 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 www.gumtree.com.au

• 판매자의 위치를 등록해 구매자들이 쉽게 살수 있게 함(UK, AU, US…)

Page 6: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

GoogleMaps API 활용 예

• 전 세계 여행자 숙소의 정보를 알려주는 www.airbnb.co.kr • (개인 민박, 게스트하우스, B&B -…..)

• 검색결과로 나온 숙소들의 위치를 지도로 표시

Page 7: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• 키 받아 오기 & API 활성화

• Eclipse 설정

Google Maps API 실제 사용하기

Page 8: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

C:\Users\kwon\.android 폴더에

debug.keystore을 이용함

키 받아오기 & API 활성화

Page 9: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

• https://console.developers.google.com/project 접속

Page 10: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 11: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 12: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 13: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 14: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

• Eclipse의 프로젝트 패키지 명과 일치해야 함

• 받아온 SHA1 값 입력

Page 15: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 16: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

Page 17: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

• Eclipse의 프로젝트 패키지 명과 일치해야 함

Page 18: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

키 받아오기 & API 활성화

• 키 받아오기 성공

Page 19: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• https://console.developers.google.com

키 받아오기 & API 활성화

Page 20: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Eclipse 설정

Google AP 12 level 이상 선택

Page 21: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

google-play-services-lib

폴더를 Workspace에import

Page 22: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

google-play-

services-lib

폴더를

Workspace에import

Page 23: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

제일 위에 있는 라이브러리만 import

Page 24: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

여기서는 import된 lib를 자신이 만들고 있던 프로젝트가 참조 하도록 더해 줌

Page 25: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

간혹 이런 에러가 날 수 있음

이럴 땐 google-play-services-lib폴더가 Android 프로젝트 workspace와 같은 드라이버에 위치 시킴

Eclipse 설정

Page 26: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Android 기기에 맵 표시

• 간단한 marker

(drag 가 가능한 mark, 말 풍선 mark)

• 내 위치 표시

예제

Page 27: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Main Activity.java 수정 사항

수정 없이 기존에 생성된 것을 사용 함

Android 기기에 Map 표시

Page 28: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Androidmanifest.xml

Android 기기에 Map 표시

Page 29: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Google Maps API 는 OpenGL ES version 2 를 맵을 받아 올 때 사용함 OpenGL ES 없을 시 맵 표시 안됨

Android 기기에 Map 표시

Page 30: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

Uses permission으로 맵을 받아 옴 (예제 코드에 나와 있지 않음)

Android 기기에 Map 표시

Page 31: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Activity_main.xml

Layout의 Activity_main.xml의 전체 코드를 위와 같은 방법으로 수정

이때 id/map은 MainActivity.java에서 사용됨 원하는 값으로 변경 가능

Android 기기에 Map 표시

Page 32: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Android 기기에 구글 맵 로드

• 지정된 좌표나 아무 것도 없는

단순 지도만 로드 해 온 결과

Android 기기에 Map 표시

Page 33: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• drag 가 가능한 mark (Main Activity.java)

Google Map을 이용하기 위해 선언 Melbourne의 위치를 선언

Marker를 이용해 인자 입력 시 Draggable()을 true로 해줌

간단한 Marker – Drag 기능

Page 34: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• Drag가 가능한 marker를 표시

• marker를 표시 할 때

지정된 위치에 표시 가능

지정된 위치에서 이동 가능

손끝으로 가볍게 3초 정도 누름

marker가 손끝을 따라 움직임

간단한 Marker – Drag 기능

Page 35: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• 말 풍선 mark (Main Activity.java)

Marker를 이용해 인자들을 채움 Snippet : 말풍선 내용을 채워 넣음

Melbourne.showInfowindow() 위에 입력한 말 풍선을 맵에 보여줌

간단한 Marker – 말 풍선

Page 36: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• 지정된 위치에 maker를 표시

• 지정된 위치의 이름과 정보를

말 풍선에 표시

ex) 인구수는 : 4~~~명

간단한 Marker – 말 풍선

Page 37: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• 내 위치 표시 (Main Activity.java)

mMap.setMyLocationEnabled(true) 이용해 나의 위치를 찾는 아이콘 생성 아이콘 클릭 시 나의 위치로 이동

내 위치 표시

Page 38: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• 핸드폰으로 실행한 결과

• 현재 좌표

금오공대 근처를 잡아줌

내 위치 표시

Page 39: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의

• http://code.google.com

• http://www.gumtree.com.au

• http://www.airbnb.co.kr

자료 출처

Github 자료 받기

https://github.com/KSJKDY/Seminar-GoogleMapAPI-

Page 40: Google Maps APIcontents.kocw.or.kr/document/05-07-GoogleMapAPI.pdf · Google Maps API 활용 예 • 중고차나, 중고 물품 등을 팔고 일자리를 보여주는 • 판매자의