불러오고 있습니다...
지난해 11월 초, 구글맵은 한국어 서비스를 시작하였습니다. 그러나 구글맵 API에는 반영되어 있지 않았죠. 4개월째 접어든 지금도 마찬가지 입니다. 혹시나 해서 maps.google.co.kr을 살펴 보다가 한국의 상세 지도를 야매로(?) 가져오는데 성공했습니다. 기존의 맵 서비스가 업그래이드 된 형태인 줄로만 알고 겁을 집어먹었는데, 그게 아니더군요. 원리는 간단합니다. 한국 지역에 해당하는 영역의 좌표를 설정하고 관련 변수들(줌 레벨, 지도 데이터를 호출하는 url 등)을 오버라이드 하는 방식으로 한국 지도를 표시하고 있었습니다. 지금부터 그 트릭을 알려 드리지요.
우선 해야 할 일은 가장 최신 빌드(143c)의 구글맵 API를 로드해야 합니다. API 문서를 참고하여 적절한 방법으로 자바스크립트를 로드합니다. 여기에서 로드할 버전을 "2.x"로 입력하면 가장 최신 빌드를 로드 할 수 있습니다. "v"파라미터의 값이 되겠죠. 참고로 "2"만 입력하면, 140g빌드를 로드하며, "2.s"를 입력하면 73빌드를 로드합니다.
다음으로 main.js파일을 로드하는 함수 호출을 막아야합니다. 구글맵 API의 자바스크립트 파일은 여러등분으로 나뉘어 있습니다. 일반적으로 초기화 코드와 각종 변수들을 담고있는 maps, 그리고 API 코어를 담고있는 main.js 자바스크립트 파일 등입니다. 파일 호출을 막으려면 "async" 파라미터의 값을 "1"로 설정해야 합니다. 그리하면 document.write 메서드에 의해 main.js가 자동으로 호출되는 것을 막을 수 있습니다. 아래와 같이 자바스크립트를 호출하면 되겠죠.
... src="http://maps.google.com/maps?file=api&v=2.x&hl=ko&async=1&key=abcdefg"></script>
끝으로 maps에 들어있는 "GLoad" 함수를 아래와 같이 오버라이드 한 후 main.js 파일 로드 함수인 "GLoadMapsScript"를 호출해 줍니다. "GLoad"함수는 main.js가 로드되고 초기화 된 직후 실행하는 콜백함수이기 때문에 main.js가 로드되기 전에 미리 바꿔치기 하는 것이죠. main.js가 모두 초기화 된 후의 맵 인스턴스를 생성하는 코드는 생략합니다. 기존에 작성한 코드 또는 구글의 API 문서를 참고하시기 바랍니다.
GLoad = function(callback) {
var apiCallback = callback || GLoadApi;
GApiInit();
var opts = {
zoom_override: [
{country: "kr", maptype: 0, override: [{max_zoom: 18, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 18, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 18, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 18, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]},
{country: "kr", maptype: 1, override: [{max_zoom: 15, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 15, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 15, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 15, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]},
{country: "kr", maptype: 2, override: [{max_zoom: 15, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 15, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 15, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 15, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]}
],
tile_override: [
{country: "kr", maptype: 0, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26"], max_zoom: 18, mapprint_url: "http://www.gmaptiles.co.kr/mapprint"},
{country: "kr", maptype: 2, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26"]},
{country: "kr", maptype: 3, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26"]}
],
jsmain: "http://maps.google.co.kr/intl/ko_kr/mapfiles/143c/maps2.api/main.js"
};
var jsinit = window.GJsLoaderInit;
jsinit && jsinit(opts.jsmain);
apiCallback(["http://mt0.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26"], ["http://khm0.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm1.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm2.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm3.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26"], ["http://mt0.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26"], "", "", "", false, "G", opts, ["http://mt0.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26"], {}, {});
};
GLoadMapsScript();
아래 파일은 "다음 지도 API 사용해 보기"에서 만들었던 Maps 클래스에 적용해 본 것입니다. 온라인 카 네비게이션 만들어 보려고 했더니, GDirections 클래스는 아쉽게도 한국지역을 지원하고 있지 않습니다. 쩝, 간만에 코딩하니 재미나네요.
Downloads:
* original - maps.js (40.1kb)
* minified - maps.js (29.2kb)
Updates:
* 2009.02.05 한국지역 외 상세 지도가 나오지 않는 현상을 수정하였습니다.
* 2009.08.13 구글맵 API v3을 지원합니다.
* 2009.08.13 main.js파일을 171b빌드로 교체 하였습니다.
Comments
Got something to add? You can just leave a comment.
이런 방법도 있었군요^^. 저 같은 경우에는 어떻게 할지 고민하다가 Google Api Script 주소를 com이 아니라 co.kr로 주니 한글 지도가 잘 나오더라구요. 그런데 이렇게 하니, Map의 Zoom 부분이 한국 쪽에서는 끝까지 안들어가는 에러가 있어서 고민중이였는데 저런 식으로 Zoom 레벨을 오버라이드 해야겠네요 ㅎ 좋은 팁 감사합니다~
reply edit
넵. 방문해 주셔서 감사합니다 ^^;
reply edit
안녕하십니까. 구글맵에 관한 여러가지 자료를 찾다가 여기까지 왔습니다. 저는 Geocaching이라는, 인터넷과 GPSr를 이용하여 보물찾기 놀이를 즐기는 사람입니다. 지오캐싱에 관한 것은 http://geocachingkorea.wikispaces.com/ 이 곳을 참고.하시면 감사하겠습니다.
저의 욕심은 한국 정밀 지도가 나오는 구글맵에 한국에 존재하는 보물(캐시)를 올려 놓고 싶은 것입니다. 그러기 위해서는 일단 파이어준님이 적어 놓은 일을 저도 한번 따라해 봐야 하겠는데 프로그램의 문외한인 저로서는 이해하기조차 어려운 점이 있습니다.
일단 맨위의 자바스크립트 까지는 따라하겠는데 그 다음의 main.js에 관한 설명은 저는 잘 모르겠습니다. 물에 빠진 사람 도와주신다 생각하시고 저도 그대로 따라서 할 수 있게 도움을 주실 수는 없는지 해서 이렇게 글을 올립니다. 도와 주신다면 정말 감사하겠습니다.
블로그를 살펴보다 보니 맥을 사용하시는 것 같은데 저도 맥을 사용한 지 10년이 넘어갑니다. 첫 기종이 LC475였습니다. ^^
저의 메일 주소는 skytraveller21@me닷컴입니다. 감사드립니다.
reply edit
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&hl=ko&async=1&key=abcdefg"></script>
<script type="text/javascript">
GLoad = function(callback) {
var apiCallback = callback || GLoadApi;
GApiInit();
var opts = {
zoom_override: [
{country: "kr", maptype: 0, override: [{max_zoom: 18, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 18, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 18, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 18, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]},
{country: "kr", maptype: 1, override: [{max_zoom: 15, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 15, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 15, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 15, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]},
{country: "kr", maptype: 2, override: [{max_zoom: 15, rect: {lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}}, {max_zoom: 15, rect: {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}}, {max_zoom: 15, rect: {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}}, {max_zoom: 15, rect: {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}}]}
],
tile_override: [
{country: "kr", maptype: 0, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1.8\x26hl=ko\x26"], max_zoom: 18, mapprint_url: "http://www.gmaptiles.co.kr/mapprint"},
{country: "kr", maptype: 2, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1t.8\x26hl=ko\x26"]},
{country: "kr", maptype: 3, min_zoom: 7, rect: [{lo: {lat_e7: 329890840, lng_e7: 1246055600}, hi: {lat_e7: 386930130, lng_e7: 1284960940}}, {lo: {lat_e7: 344646740, lng_e7: 1284960940}, hi: {lat_e7: 386930130, lng_e7: 1288476560}}, {lo: {lat_e7: 350277470, lng_e7: 1288476560}, hi: {lat_e7: 386930130, lng_e7: 1310531620}}, {lo: {lat_e7: 370277730, lng_e7: 1310531620}, hi: {lat_e7: 386930130, lng_e7: 1320034790}}], uris: ["http://mt0.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt1.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt2.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26", "http://mt3.gmaptiles.co.kr/mt?v=kr1p.7\x26hl=ko\x26"]}
],
jsmain: "http://maps.google.co.kr/intl/ko_kr/mapfiles/143c/maps2.api/main.js"
};
var jsinit = window.GJsLoaderInit;
jsinit && jsinit(opts.jsmain);
apiCallback(["http://mt0.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2.89\x26hl\x3dko\x26"], ["http://khm0.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm1.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm2.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26", "http://khm3.google.co.kr/kh?v\x3d36\x26hl\x3dko\x26"], ["http://mt0.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2t.88\x26hl\x3dko\x26"], "", "", "", false, "G", opts, ["http://mt0.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt1.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt2.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26", "http://mt3.google.com/mt?v\x3dw2p.87\x26hl\x3dko\x26"], {}, {});
};
GLoadMapsScript();
</script>
<script type="text/javascript">
window.onload = function() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.52, 126.99), 13);
map.setUIToDefault();
};
</script>
요렇게 해 보세요.
reply edit
안녕하세요. 구글맵 API 보다가 국내 위성지도를 세밀하게 나타낼 수 있다는거 보고 여기까지 오게 되었습니다. 제가 여기서 보고 따라한거는 위에 홍의님의 글에 답변을 HTML에 넣었는데요. 안되네요. 근데 async=1이라는 것을 지우고 하니까 맵이 출력되기는 하는데요... 파이어준님께서 수정하신 맵이 아닌 이전의 맵이 출력됩니다. 어떻게 해야 되는것입니까.ㅠ _ㅠ 도와주세요...
reply edit
Your Reaction Time!