Firejune

지난해 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빌드로 교체 하였습니다.