구글어스 API 다루기 [3] - 지역명 검색하여 이동하기구글어스 API 다루기 [3] - 지역명 검색하여 이동하기
Posted at 2009/05/09 15:54 | Posted in Google Earth API 기초지난시간에는 구글어스 시작시 중심점을 설정해보았습니다.
http://windowsmobile7.tistory.com/22
이번시간에는 지명, 유명 건물등을 검색 한 후 이동하는 법을 알아보겠습니다.
기본이 되는 코드는 강좌가 시작되는 아래 페이지의 코드 입니다.
http://windowsmobile7.tistory.com/21
함수명등의 일치를 위해 이 코드를 확장 시키는 방법으로 강좌를 진행 하겠습니다.
최종 모습은 아래와 같습니다.
텍스트박스에서 찾고자 하는 지명을 검색 후 버튼 클릭시 해당 지역으로 이동합니다.
지명 검색의 경우 구글맵의 지오코드를 사용합니다.
그러므로 자바스크립트의 구글어스 초기화 부분에 아래 선언문을 추가해 줍니다.
| google.load("maps", "2.xx"); |
Body 안에 텍스트 박스와 버튼을 추가해 주고
|
<input type="text" id="location" > <input type="button" onClick="idong()" value="이동"> |
자바스크립트에서 onClick 이벤트를 아래와 같이 작성합니다.
|
function idong() { var geocodeLocation = document.getElementById('location').value; var geocoder = new google.maps.ClientGeocoder(); geocoder.getLatLng(geocodeLocation, function(point) { else{ } |
텍스트 박스안의 값이 검색되면 해당지역으로 이동하며
검색되지 않으면 알림창을 띄웁니다.
테스트 화면입니다.
검색시에는 영어, 한글등 언어를 가리지 않고
나라 명, 도시 명 외에도 서울역, 서울대등 유명 건물명을 통해서도 검색이 가능합니다.
이동 함수의 줌레벨, 내려다 보는 각도등의 조절로 더 다양한 효과를 연출 할 수 있습니다.
'Google Earth API 기초' 카테고리의 다른 글
| 구글어스 API 다루기 [4] - 3D 입체 건물 & 1인칭 시점 효과 주기 (3) | 2009/05/09 |
|---|---|
| 구글어스 API 다루기 [3] - 지역명 검색하여 이동하기 (0) | 2009/05/09 |
| 구글어스 API 다루기 [2] - 페이지 로드시 시작 지점 지정하기 (0) | 2009/05/08 |
| 구글어스 API 다루기 [1] - 웹 브라우저에서 구글어스 API 서비스 시작 하기 (0) | 2009/05/08 |
