구글맵 API 사용하기 2탄

구글맵 API 사용하기 1탄에서 한가지 빼먹은 것이 있습니다. 코드 다섯줄 정도를 추가하고 나서 맵의 위치가 처음 맵에 보였던 위치가 아닌 부산의 어떤 공항 근처로 옮겨졌습니다.

바로 좌표에 관한 것이죠. 좌표를 구하는 건 어떻게 보면 다소 까다로울 수 있습니다. 하지만 매우 쉽게 구하는 방법을 찾았지요. 헤헷;;

예~전에 찾아 봤던 네이버 맵과 구글 위성 맵을 동기화 시켜 보여주는 NGMap을 이용하면 됩니다.
NGMap을 사용해서 서울을 찍어둔 URL입니다. <- 이쪽을 클릭하시면 다음의 화면을 볼 수 있습니다.

1315446534.bmp여기서 이 화면에서 보이는 오른쪽 상단의 G = N 버튼을 클릭하면 구글 위성맵으로 다음과 같이 바뀝니다. 현재 이 화면에서는 네이버 맵이 사용하는 좌표를 볼 수 있지만 저는 구글 위성맵의 좌표를 원하기 때문이죠.

1225707987.bmp자 여기서 오른쪽에 보이는 좌표가 바로 구글맵의 좌표입니다. 이 좌표를 구했으면 이제 이 좌표를 써넣으면 되게지요? 이전에 보았던 소스코드를 다시 보겠습니다.

var map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.15549, 128.93563), 15);
map.setMapType(G_SATELLITE_MAP);
map.openInfoWindow(map.getCenter(), document.createTextNode(“안녕 백기선”));

setCenter 메소드는 두 개의 아규먼트를 주는데 처음 것은 좌표이고 두번 째 것은 확대율입니다. 확대율은 숫자가 클수록 지도를 자세히 들여다 보게 됩니다.

위의 빨간색 부분에 좌표를 넣으면 됩니다. 이때 주의할 것은 위의 스크린 샷에서 보이는 분홍색 부분의 좌표의 왼쪽 값은 코드에서 오른쪽으로 들어가고 오른쪽 값은 코드에서 왼쪽으로 들어가야 한다는 것입니다. 이렇게 하면 원하는 위치의 좌표를 쉽게 찾아서 쉽게 해당 좌표의 구글 위성맵을 띄울 수 있습니다.

구글맵 API 사용하기 1탄

구글맵API 예제가 주로 자바스크립트로 되어 있습니다. 참고로 전 자바스크립트는 손도 안대봤지요. 그래도 스톱모션을 하던 사람처럼 할 수 있을 것 같은 생각이 듭니다.

기본구조는 아래와 같습니다.
[#M_ more.. | less.. |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

_M#]

구글 맵 API Key

위에서 분홍색 부분의 key값에 해당하는 것을 Maps API key라고 하는데 여기서 받아오면 됩니다. key값을 생성할 때 주의 할 것이 있습니다. 이 페이지가 돌아갈 서버의 주소를 넣어줘야 합니다. 도메인이 있어야 하나..라고 생각을 해봤었는데 그렇지는 않습니다.

1222906210.bmp이런식으로 적어준뒤 생성 버튼을 눌러서 받은 키 값을 분홍색 부분을 바꿔 주면 됩니다. 이렇게까지 해서 돌릴 필요가 있는 경우는 웹서버에서 돌릴 경우이고 그냥 웹브라우져로 파일을 읽어보며 테스트를 할 때는 굳이 key값을 받아와서 바꿔주지 않아도 테스트 해볼 수 있습니다.

구글 맵 API

저 위의 소스 코드를 템플릿으로 봤을 때 바뀌는 부분은 녹색 박스 부분입니다. 저 안에서 구글맵 API를 보고 코딩을 해주면 화면이 바뀌는 것을 볼 수 있습니다.

구글맵은 인공위성 맵이 최곤데 안타깝게 지금 저 코드상태로는 아래의 화면 밖에 볼 수 없습니다.
1156937504.bmp
이 화면에 (1)맵을 선택해서 보여줄 수 있는 컨트롤러와 (2)화면 축소 및 이동을 위한 컨트롤러를 붙이고 (3)기본 화면을 현재는 맵으로 되어 있는데 위성이 기본 화면이 되도록 바꾸고 (4) 화면 중앙에 한글로 메시지를 보여주고 싶습니다.

그럼 소스 코드에서 녹색 박스 부분을 아래와 같이 바꿉니다.

var map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.15549, 128.93563), 15);
map.setMapType(G_SATELLITE_MAP);
map.openInfoWindow(map.getCenter(), document.createTextNode(“안녕 백기선”));

그리고 웹브라우져에 띄워보면~
1095155188.bmp짜잔~

구글맵과 네이버맵을 합친 NGMap(Naver&Google Map)

1343895500.bmp
네이버와 구글맵을 동기화시켜 볼 수 있는 맵이더군요. 네이버 지도에 씌여있는 명칭을 보고 대략 검색을 해본뒤 구글 맵으로 싹 바꿔서 주변 모습을 파악하면 정말 위치 찾지가 쉽겠더라구요.

이걸 어떻게 맛집 안내 사이트 개발할 때 써먹고 싶은데.. 아직 잘 모르겠네요. ㅠㅠ;;

테터툴즈에도 붙여 쓸수 가 있는데 자세한 내용은 여기서 참조하시기 바랍니다.

왜 시작하게 됐으며 무엇을 어떻게 할 것인가.

고급 웹 프로그래밍 수업 시간에 교수님께서 웹 서비스를 제공하는 웹 사이트 개발 제안서를 제출하라고 하셨다.

기존에 만들어져 있는 공개 API(Open API)를 사용하여 새로운 서비스를 만들어 제공하는 웹사이트를 개발 하시오. 그리고 이번주 수요일 까지 그 사이트에 대한 제안서를 제출하시오.

팀원들과 대화를 하던 중 네이버 API를 발견하고 많은 검색 API를 볼 수 있었습니다. 구글 코드도 있었고 이글루스의 블러그 관련 API와 알라딘의 책관련 API도 있었습니다. 하지만 제일 끌렸던건 역시 구글 어스와 네이버 지도 검색이였습니다.

이미 어떤 분께서 그 둘을 합쳐 놓은 테터툴즈 플러그인까지 개발하셨더군요. 정말 부럽습니다. 그런걸 뚝딱 만들어 내시다니..ㅠ.ㅠ

저희는 팀원이 제시한 맛집 안내 사이트를 개발 하기로 했으며 제공 하는 서비스로는 지역별 맛집 검색 서비스와 음식 종류별 맛집 검색 서비스 그리고 각 맛집들의 위치를 구글어스와 네이버 지도 검색 둘 모두를 사용하여 보여 주도록 할 것입니다.

톰캣과 JSP, XML, XML-Schema or DTD, CSS 등을 사용하여 개발하라고 하셨습니다.

OH My Time Plz Stop!!!!!!!!!!!!!!!

On-Line Diary Site 프로젝트’s Charter

OLDS Project Charter

  • 프로젝트 제목 : OLDS(On-Line Diary Site)
  • 프로젝트 일정 : 시작일 – 2주전 ~ 종료일 – 8주 후(?)
  • 예산 정보 : 있는 것은 시간뿐이 없으나… 시간도 빠듯하다니.. 모모라는 책이 생각이 나네요.
  • PM : 나?
  • Objective : 아래와 같은 가정하에 객체 지향 분석 및 설계를 합니다.

    On-Line Diary 웹 사이트를 개발하려고 합니다. 이 사이트는 가입형 Blog 형태의 사이트로써 모든 사용자들에게 무료로 계정을 주며 각 계정마다 한권의 Online 일기장을 가지게 됩니다. 일기장은 기본적으로 비공개로 하여 오직 일기장의 주인만 CRUD(쓰기, 읽기, 수정, 삭제)가 가능하며 따라서 일기장을 관리하기 위해서는 회원 가입과 로그인이 필요합니다.
     
      위의 기본 서비스를 완성 후 애인이 있는 사용자들을 위하여 커플 Diary를 만들 수 있도록 서비스를 추가할 예정이며 커플 Diary의 경우 두 명의 주인이 있으며 두 명 모두 해당 일기장에 CRUD가 가능합니다. 또한 추후 Online 일기장을 책으로 발행받길 원하는 고객에게는 소정의 금액을 온라인으로 입금 받은 뒤 책으로 출판하여 배송하는 서비스도 추가할 예정입니다.

  • How : UML… + 알파(?)
  • Roles and Position : 기선(PM, 분석, 설계), 찬욱(개발자, 분석, 설계), 형렬(고객, 분석, 설계)
  • Constraints : 기선이는 배가 고프면 머리가 안돌아감. 찬욱이는 일을 주면 알아서 다 할 것임. 형렬이는 너무 고객만 되지 않도록 해야함.