- Open API : Google Map 컴퓨터공학실험( I )

Presentation on theme: "- Open API : Google Map 컴퓨터공학실험( I )"— Presentation transcript:

1 - Open API : Google Map- 2008 컴퓨터공학실험( I )
11주 실습강의 - Open API : Google Map- 2008 컴퓨터공학실험( I )

2 Google Maps Open API Google에 등록을 해서 API KEY를 얻어와야 함.
여담으로, 법적인 문제를 피해가기 위해서는 업체와 직접 계약을 맺는 경우가 가장 일반적이라고 할 수 있습니다.

3 Google Maps Open API 이 페이지가 구동되는 서버의 주소를 넣어줘야 합니다.
API KEY는 웹서버 안의 하나의 디렉터리 안에서 유효합니다. 즉, 다시 말해 서버주소를 입력 하면 그 서버 주소의 이하 디렉터리에서만 유효하다는 말이다. 이와 같이 실험 테스트를 위해서는 굳이 특정 서버의 Key 값을 받아오지 않아도 테스트 할 수 있다.

4 Google Maps Open API

5 Google Maps Open API

6 Google Maps Open API 특징 참고 사이트 Javascript 기반의 통신 방법을 이용함
AJAX 기반의 비동기 웹로딩 방식 사용 참고 사이트 Google Maps API Reference Google Maps API Concepts Google Maps API Examples Google Maps API v2 Documentation Examples

7 실습 new GMap2로 표시할 div의 id(여기서는 "map")를 넘겨서 지도 오브젝트를 생성합니다.

8 실습 addControl함수로 컨트롤을 추가한다. 기본적으로 Google map에서 제공하는 컨트롤
GLargeMapControl, GSmallMapControl, GSmallZoomControl - 줌과 위치조절, 기본으로 좌측 상단에 생성 GMapTypeControl - 위성, 지도 조절 컨트롤들을 추가. 기본으로 우측 상단에 생성 GScaleControl : 축적을 표시, 기본으로 우측 하단에 생성 GOverviewMapControl : 더 넓은 지역을 보여주고 지도 위치 조절 가능 기본으로 우측 하단에 생성

9 실습 setCenter함수로 표시할 위치와 Zoom 레벨을 결정 setMapType함수로 맵타입을 결정
첫번째 인자 (GLatLng) 위도와 경도를 결정 두번째 인자 Zoom 레벨을 조정 Map에서는 0(지구전체) ~ 19(각각의 빌딩) Satellite에서는 0 ~ 20 setMapType함수로 맵타입을 결정 G_NORMAL_MAP (보통맵) G_SATELLITE_MAP (위성지도) G_HYBRID_MAP (두가지 혼합)

10 실습 컨트롤 위치 수정 Ex) var topLeft1 = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80, 10)); map.addControl(new GSmallMapControl(), topLeft1) GControlPosition 첫번째 인자 : G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT 두번째 인자: 모서리로 부터 떨어진 정도

11 실습 Gmarker 마커를 원하는 위치에 생성한다. map.addOverlay 함수로 마커를 화면에 표시
map.getCenter()함수는 현재 맵의 가운데 위치를 반환 marker.openInfoWindowHtml 함수로 넘겨받은 html을 해당 마커에 연결된 인포 윈도우위에 표시

12 실습

13 실습 가운데 위도,경도 표시

14 실습 GEvent.addListener(source, event, handler)를 통해서 "moveend" 이벤트가 발생했을 때 실행시켜줄 함수를 등록 moveend가 발생했을 때 현재 지도의 가운데 위치를 <span id="message"> 에 표시 클릭 시 발생하는 이벤트 : click

15 실습 마크에 클릭 시 인포 윈도우 표시하기 여러 개의 마크를 만들기 위해서 마크 생성 부분을 createMarker 함수로 만들었습니다 GEvent.addListner로 marker에 "click" 이벤트가 일어날 경우 openInfoWindowHtml을 실행시킵니다

16 실습

17 실습 주소 검색 Google server와 communication을 위해 GClientGeocoder() 객체 생성.

18 실습 Text 및 Button 컨트롤 작성

19 실습 주소 검색 코드

20 실험 Google map을 나타내는 페이지를 만든다
위치를 입력하면 해당 위치를 표시해주거나 찾을 수 없는 위치면 찾을 수 없다는 표시를 한다. 버튼을 누르면 버튼과 연결된 곳으로 이동한다.

21 실험 기본 구성

22 실험 주소 입력창에 주소를 입력 후 Search를 클릭하면 해당 위치로 이동

23 실험 Jung-Do 클릭 시

24 실험 Check Point 클릭 시 현 좌표의 중심 좌표 출력

25 실험 Google map API를 사용하여 제도관과 중도 마크표시 Hybrid mode를 기본값으로 지정
버튼 추가(제도관,중도) Map의 시작 위치는 제도관으로 지정