Rev. 2.73

 

다음에서도 지도 API를 오픈했습니다. 경품 이벤트도 하는군요. 응모도 해볼 겸해서 지난번 "네이버 맵 API 사용해 보기"에서 만들었던 클래스를 이용하여 추가로 만들어 보았습니다. 이 클래스를 사용하면 다음과 네이버의 지도를 모두 다룰수 있습니다. 다음 예제를 보시죠.

Examples:

  new Maps('my-maps', {
    type: 'daum', // naver or daum 
    key: '1176f6b78db03f01382ee44afe2f82b98b8b899d', // API Key
    point: {x: 498637, y: 1116620, z: 3}, // coordinates and zoom level

    framesrc: 'robots.txt', // for validate url

    zoomwheel: true, // add whell zoom controll(default true)
    zoomslide: true, // add zoom controll(default true)
    minimap: true, // add index map controll(default true)

    // callback for customize
    callback: function(map, win) {
      win.DEvent.addListener(map, "move", function() { 
        var center = map.getCenter(); 
        debug.info("latitude : " + center.getLat() + "  longitude: " + center.getLng());
      });
    }
  });

type, key, point는 필수 옵션이며, 각각 API종류, API키, 좌표 및 줌레벨 값을 입력합니다. framesrc에 값을 넣게 되면, iframe을 사용해서 구동하게 됩니다. 이것은 특정 API에서 발생하는 Doctype으로 인한 문제 또는 스크립트 충돌 등을 해결하기 위한 것입니다. iframe 사용시 주의할 점은 임의의 파일을 호출할 수 있는 경로를 기입해야 합니다. 'about:blank'와 같이 지정되어버리면 location.hostname을 호출할 수 없어 맵 API의 URL 인증이 무효가 되어버리기 때문입니다.

이번 작업에서 발생한 가장 큰 문제는 maps.js가 들고있는 유틸리티 함수들이었습니다. 지도 API 시작하기 예제문서를 보면 DIV 요소에 지도를 추가하는 예제들이 있습니다. 이런 경우 루비온레일즈나 Prototype 라이브러리를 사용하는 사이트들에서는 충돌을 일으킬 가능성이 매우 높습니다. Prototype의 코드들을 상당수 오버라이딩 해버리기 때문이지요. 결국 다음 지도 API역시 iframe으로 처리해야 했습니다. 전역스러운(?) 네임스페이스의 소비를 개선하거나 충돌이 일어날만한 코드들은 우회하는 추가작업이 필요해 보입니다.

다음 지도 API의 장점은 구글맵의 좌표계인 WGS84, 네이버 지도의 좌표계인 KTM 등 자바스크립트 기반 좌표계변환기를 사용할 수 있어 여러 서비스간 호환성이 좋다는 점과, SVG를 사용하여 매우 빠른 사선 그리기와 마킹작업이 가능한 것을 들수 있겠습니다. 다음 번에는 구글과 야후 맵도 통합하고, API간의 좌표 변환기와, 마킹 컨트롤러 등을 추가해 보겠습니다. 요것 가지고 노는 재미가 점점 쏠쏠해 지는군요.

Downloads:

* original - maps.js (40.1kb)
* minified - maps.js (29.2kb)

Updates:

* 2008.11.18 IE에서 프레임이 생성되지 않던 문제를 수정하였습니다.
* 2008.11.19 KTM/WGS84간 좌표계 변환기를 추가하여 두 지도가 하나의 위치를 공유할 수 있습니다.
* 2008.11.20 WGS84에서 KTM 좌표계로 변환시 오차를 야매로(?) 수정하였습니다.
* 2008.12.01 구글맵 API가 추가되었습니다.
* 2008.12.02 구글맵과 네이버, 다음 지도간 줌레벨 변환기가 추가되었습니다.
* 2009.02.04 구글맵 역시 아이프레임을 사용하지 않고도 로드 할 수 있습니다.
* 2009.02.04 구글지도에 한글 서비스를 반영하였습니다.
* 2009.02.05 한국지역 외 상세 지도가 나오지 않는 현상을 수정하였습니다.
* 2009.02.08 다음지도의 기본 좌표계를 'congnamul'로 변경하였습니다.
* 2009.02.08 좌표계 변환기에 'congnamul' 변환식이 추가되었습니다.
* 2009.02.10 구글맵 로드시 GClientGeocoder(지역 찾기)클래스를 map 인스턴스에 포함합니다.
* 2009.02.10 길찾기와 관련된 Maps.Route 클래스가 추가되었습니다.
* 2009.02.11 구글어스의 헬퍼 클래스인 Maps.Earth가 추가되었습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar