구글맵 API 사용하기 2탄

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

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

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

##########0*

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

##########1*

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

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

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

출처 : Whiteship's Note