Open API - Google Maps (Application Programming Interface )

Presentation on theme: "Open API - Google Maps (Application Programming Interface )"— Presentation transcript:

1 Open API - Google Maps (Application Programming Interface )
14주 실습강의 Open API - Google Maps (Application Programming Interface )

2 Intelligent Systems Lab
Google Maps Open API Naver, Daum 과 마찬가지로 키를 얻어야 함 Intelligent Systems Lab

3 Intelligent Systems Lab
Google Maps Open API 자신이 사용하고자 지정한 웹 사이트에서만 키를 사용해 구글맵을 쓸 수 있다. 참고: 실험서버용 Google Maps API Key ABQIAAAABgqCNO3bkmvnWycPhTtwgxRcVB-ebm4DsJKZv3pV5FBRpysNfxR8hS_FwLSzmsvuWesdPcDu6ZfUbA Intelligent Systems Lab

4 Intelligent Systems Lab
Google Maps Open API 특징 Daum, Naver와는 달리 URL에 query를 보내는 방식이 아님 Javascript 기반의 통신 방법을 이용함 AJAX 기반의 비동기 웹로딩 방식 사용 참고 사이트 Google Maps API Concepts and Examples Google Maps API Tutorial Intelligent Systems Lab

5 Intelligent Systems Lab
14주차 실험 내용 구글 맵을 표시하는 페이지를 만든다. 위치를 입력하면 해당 위치를 표시해주거나 찾을 수 없는 위치면 찾을 수 없다는 표시를 한다. 버튼을 누르면 버튼과 연결된 곳으로 이동한다. Intelligent Systems Lab

6 Intelligent Systems Lab
14주차 실험 예제 기본 구성 해당 주소의 위치로 이동 현재 위치의 좌표 출력 버튼과 연결된 위치로 이동 Intelligent Systems Lab

7 Intelligent Systems Lab
14주차 실험 예제 주소 입력부에 주소를 입력한 후 [Go!] 버튼을 누르면 해당 위치로 이동함 등록된 주소가 존재하지 않는 경우 등록된 주소가 존재하는 경우 Intelligent Systems Lab

8 Intelligent Systems Lab
14주차 실험 예제 [Jaedo-Kwan] 버튼을 눌러 제도관의 위치로 이동한 모습 Intelligent Systems Lab

9 Intelligent Systems Lab
14주차 실험 예제 [Where?] 버튼을 눌러 현재 보이는 지도의 Center 좌표를 출력한 모습 Intelligent Systems Lab

10 Intelligent Systems Lab
14주차 실습과제 구글 맵 API를 사용하여 제도관과 중도 마킹 “Satellite” Mode를 기본값으로 지정 버튼 추가 – 제도관, 중도 Map의 시작 위치는 제도관으로 Intelligent Systems Lab