2010.06.22 14:16

Google Maps API v3 를 살펴보니

한달쯤 전에 구글맵의 공식 API 가 v3로 바뀌었다. 동시에 기존의 API v2는 공식적으로 사용을 권하지 않는다(deprecated)고 명시됐다. v2는 이후로 최소 3년이상은 존속한다고 한다. 1년 전쯤에 v3가 소개되었으니 근 1년만의 정식 무대 데뷔라 하겠다. 이와 함께 v2에서는 지원되었지만 v3에서는 안되었던 기능들이 거의 보강되었다.

Google Geo API Landscape



Google Maps JavaScript API 의 변화는 JavaScript 기반의 Object Based 또는 Prototype Based Programming 의 발전 흐름과 그 궤를 같이 하며 발전하고 있다는 느낌이다. 애초에 엉성히 설계된 자바스크립트 라는 언어가 가진 한계를 극복하며 Crockford의 책 제목(JavaScript: The Good Parts)대로 좋은 점만을 적극 활용하려는 시도가 많았는데 그러한 내용들이 v3에 들어서 대폭 반영되었다고 할 수 있다. 또한 데스크탑 기반의 웹브라우저 중심의 지도서비스 제공에 상대적으로 특화되어 있던 지도서비스와 API를 데스크탑과 모바일 환경에 모두 최적화시킨 지도와 API로서의 v3로의 변화가 있었다. 또한 API Key가 더이상 필요치 않게 되었으며 StreetView 서비스에 있어서도 기존과는 다르게 플래시를 필요로 하지 않는다.(아이폰 때문에 그랬는가 싶다...)

Google I/O 에서 발표된 Stepping up: Porting v2 JavaScript Maps API applications to v3 에 따르면 다음과 같은 다섯가지 항목을 주요 변화로 꼽는다.

  • 모바일 브라우저 지원 : 안드로이드, 아이폰
  • 퍼포먼스
  • 새로운 아키텍쳐 : MVC
  • 네임 스페이스 지원 : google.maps.*
  • 새로운 기능들 : Biking Direction, Elevation Service 등

이증 퍼포먼스에 대한 부가 내용으로 소개된 것이 아래와 같다. 전체적으로 다운로드할 용량이 대폭 줄었으며 이는 모바일 환경에 특히 장점으로 작용할 것이다.

v2, v3 퍼포먼스 비교


구글의 Geo 플랫폼 환경에서는 후진국이나 다름없는 우리나라 현실은 구글에서 제공하는 여러가지 지도 관련 기능들을 사용할 수 없게 하곤 한다. 어찌된 일인지 v3 상에서는 Map Type를 지형(Terrain)으로 했을시 국내 지역 지도가 서비스 되고 있지 않는 상황이다. 또한 StyledMap 같은 서비스도 우리나라만 아직 예외다.

StyledMap은 지도에 나타나는 주요 개체들(도로, 건물, 국경 등)을  피쳐(feature)라 하고 이러한 각각의 피쳐에 대해 사용자가 원하는 색상을 입힐 수 있는 기능이다. 하나의 피쳐에 해당하는 도로에 대해서도 이를 지오메트리와 라벨이라는 엘리먼트로 구분하여 각각의 엘리먼트에 원하는  스타일 적용이 가능하다. 이러한 타일 이미지를 실시간!으로 렌더링하여 사용자에게 제공하는 것인데 지도학적 관점에서 매우 관심을 가지고 바라볼 만한 내용이기도 하다. 아래는 road 피처의 geometry 엘리먼트에 대해 hue 와 saturation 을 #00ff00, 100 으로 지정하고 landscape 피처의  geometry 엘리먼트에 대해 hue, saturation, lightness 를 각각 #000000, 75, -100 으로 설정했을 시의 구글맵으로서 중국 북경을 바라볼 때의 지도 모습이다. 전세계 모든 지역을 이런 식으로 볼 수 있다. 단, 지도가 없는 가난한 나라랑 우리나라만 빼고... 이처럼 구글맵에 대해 피쳐별로 원하는 스타일링을 지정하여 자신만의 느낌을 전할 수 있는 지도를 만들 수 있다.




백문이 불여일견! 구글맵 API v3 의 개발자 문서를 모두 살펴보고 거기에 소개된 여러가지 API v3 기반의 지도 샘플을 정리해 보았다. 영어로 된 API 문서 홈페이지에도 별도의 샘플 페이지가 있지만 개발자 문서에 있지만 누락된 샘플들이 많이 있으며 모든 샘플들이 우리와는 딴 동네를 대상으로 하고 있기에 가능한 모든 샘플들을 우리나라를 대상으로 하게끔 바꾸었다. GIS를 공부했던 사람으로서 공부했던 거의 모든 내용들이 외국 지역을 대상으로 한다는 점에서 흥미를 떨어뜨렸던 경험이 많았기에 우리가 잘 아는 지역을 대상으로 실험할 수 있게끔 바꾸었다. 구글이 전세계적으로 제공하는 지도 서비스가 국가별로 어떤 차이가 있는지는 이 구글 스프레드시트를 보면 알 수 있다. 스프레드시트를 보면 알 수 있드시 우리나라에서는 교통(Traffic)이나 스트리트뷰, 경로 안내(Driving Direction) 등의 서비스가 제공되지 않는다. 그래서 API 샘플중 국내를 대상으로 테스트 할 수 없는 것들을 원래 샘플을 옮겨놨다. 관심가는대로 마구마구 눌러보시고 Ctrl + U를 눌러(파이어폭스의 경우) 소스코드를 보시면 되겠다.

제가 수정한 구글맵 API v3 샘플 링크

Google Map 에 대해 관심 많으신 분들은 Google Geo Developers Blog 의 Geo at Google I/O 2010 을 참고하시면 되겠다. 주요 내용이 Maps API v3 에 초점을 둔 내용들이다. 또한 공부할만한 책을 찾으시는 분께는 안타까운 얘기지만 Google Maps API v3에 대한 서적은 얼마간은 나올 거 같지 않다. v2에 대한 책을 쓴 이후 v3에 대한 책을 준비하던 이들도 빠른 기술 변화에 책쓰기를 포기하고 올해초부터 Google 측의 API 문서를 참고할 것을 권했으며 유명 출판사에서 정식 서적 출판 전에 편집본을 온라인으로 공개하는 시리즈에서도 이에 대한 내용을 찾을 수 없다. 수정합니다. 아마존에 가보니 몇개 있네요. Beginning Google Maps API v3 라는 책이 얼머 안 있어 나올거 같고 Map Scripting 101 이라는 놈도 막 출판을 기다리고 있습니다. 아직 출판이 안된 상황에서 Beginning Google Maps API 3 의 예제 소스코드를 받아 살펴보니 ... 음 배보다 배꼽이다. API 보다도 저자구 샘플에 구현한 JavaScript 프로그래밍 이해하기가 Beginner 에게는 더 어렵게 만들어져 있다. 3장의 가장 첫 샘플의 자바스크립트 코드는 아래와 같다.

(function() {
  window.onload = function() {
	  
	// Creating a reference to the mapDiv
    var mapDiv = document.getElementById('map');
    
    // Creating a latLng for the center of the map
    var latlng = new google.maps.LatLng(37.09, -95.71);
    
    // Creating an object literal containing the properties 
    // we want to pass to the map  
    var options = {
      center: latlng,
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    // Creating the map
    var map = new google.maps.Map(mapDiv, options);
  }
})();

이는 ExtJS나 기타 유명 Ajax 라이브러리 내에서 대게 초기화 작업이 있을 때 많이 쓰는 자바스크립트 프로그래핑 패턴인데 개인적 생각으로는 절대 Beginner는 이해 못한다.(내가 그랬다^^)  비스므리한게 5장의 세번째 샘플에도 나온다. 아래는 코드 일부다. ... 비슷한가?

// Wrapping the event listener inside an anonymous function 
      // that we immediately invoke and passes the variable i to.
      (function(i, marker) {
       
        // Creating the event listener. It now has access to the values of
        // i and marker as they were during its creation
        google.maps.event.addListener(marker, 'click', function() {

          var infowindow = new google.maps.InfoWindow({
            content: 'Place number ' + i
          });

          infowindow.open(map, marker);

        });

      })(i, marker);

이제 자바스크립트 역사도 꽤 되고 하니 그에 대한 이해를 전제로 하고 GMap V3 에 대한 책이 나온 듯 하다. 이러한 상황에서 개인적으로도 이쪽 공부하시려는 분들이 있다면 API 에 대한 것보다는 JavaScript에 대한 공부를 권하고 싶다. Web 2.0 이후 지금까지 나온 많은 JavaScript 책을 들춰봤지만 권하고 싶은 책은 단 하나가 있는데 Object-Oriented JavaScript 라는 책이다. 이런 책이 국내에 번역되어 나오지 않은 것은 참으로 안타까운 일이다. 프로그래밍 할 때 레퍼런스 용은 아니다. 이 책에 샘플로 소개된 자바스크립트에 대한 설명이 쉽게 나온다. 그것 말고도 많은 내용이 담겨 있다. 다른 책과는 달리 인터프리터 언어로서의 자바스크립트 특징을 살려 FireBug나 크롬의 Developer Tools 에서 즉각 실행하는 방식으로 설명하고 있다. 이런저런 자바스크립트 책을 보았지만 만족 못했던 분들에게 강추할만하다. 솔직히 Closure 개념을 이 책만큼 잘 설명하고 있는 것을 보지 못했다. 국내에서도 자바스크립트를 제대로 공부하고 수준을 올려보고자 AJAXIAN.kr 분들이 노력하고 계신 듯 하다. 공부하시려는 분들께는 많은 도움이 되겠다. ... 지금도 마찬가지지만 몇년전엔 자바스크립트 땜시 정말 맨땅에 헤딩 많이 했는데 요즘은 참 좋은 환경이다..^^
Trackback 0 Comment 0


티스토리 툴바