매쉬업 길들이기

블로그 글을 구독하는 방법으로 주로 사용되는 feed라는 방식이 있다. 수 년 전에 RSS를 접했을 때에는 단순한 XML 형식이라고 생각했는데 다양한 분야에 활용되고 있는 것을 보면 놀라운 일이다.

ATOM, RSS 등의 feed 형식은 다음과 같은 분야에 쓰이고 있다.

• 블로그 등의 구독용 피드 : 블로깅 시스템과 글이 매우 느슨한 관계를 형성하게 되었다.
• 다양한 분야로의 확대 : MediaRSS, GeoRSS 등이 생김
• 다양한 응답에 사용 : Open API에서 결과를 ATOM이나 RSS로 주는 경우가 있다. (예: Naver 검색 API)

Google AJAX Feed API는 무엇을 해 주나?

Feed를 대신 가져온다. ATOM, RSS 등의 종류나 버전에 상관없이 일정한 포맷으로 변환하여 가져온다. JSON을 기본으로 하면 XML 형식도 가져온다.

정리하면 다음과 같다.

• 다양한 형식의 지원 : RSS, ATOM 모든 버전, MediaRSS
• 자동 feed 검색  : 페이지에서 관련 feed용 URL을 찾아준다.
• 캐시 : 자체적인 FeedFetcher의 결과를 가져오기 때문에 최신의 내용과 차이가 있을 수 있다. 1시간 안에는 다시 가져오기 때문에 크게 문제는 되지 않는다. 더구나 v2에서는 pubsubhubbub을 이용한 PUSH까지 지원한다고 한다.

사이트에서 직접 가져올 수도 있는데 왜 Google Feed API를 사용해야 하나?

XSS등의 보안 문제로 브라우저는 HTML을 가져온 사이트 이외에서는 데이터를 가져오더라고 서로 접근을 못하게 하고 있다. 이를 피하는 거의 유일한 방법은 script tag를 런티임에 추가하여 원하는 결과를 얻는 것이다. 매우 성가신 작업이며 서버에서 javascript 의 형태로 응답을 해야 한다는 단점이 있다. 이런 것을 google API가 간단히 해결해 준다. Google는 자신의 서버에 요청을 하고 google 서버는 해당 서버로 요청을 하거나 캐시된 결과를 돌려준다. 물론 응답은 javascript로 한다.

다음은 google API가 google 서버를 통해서 받는 응답의 일부이다. javascript의 callback 함수의 인자 형태로 응답을 하고 있는 것을 알 수 있다. 이런 내용은 google API가 내부적으로 처리를 하고 있는 것이다.

google.feeds.Feed.RawCompletion('0',{"feed":{"feedUrl":"http://feeds.feedburner.com/blogspot/RBev","title":"Google AJAX Search API Blog","link":"http://googleajaxsearchapi.blogspot.com/","author":"A Googler","description":"Your official source on the AJAX Search API.","type":"atom10","entries":[{"title":"Google Feed API — Now with instant gratification","link":"http://feedproxy.google.com/~r/blogspot/RBev/~3/Ga_gAUnW_Xw/google-feed-api-now-with-instant.html","author":"Adam Feldman","publishedDate":"Wed, 19 May 2010 09:19:00 -0700","contentSnippet":"One of Google's most popular APIs is our Feed API. This API is found

API 설명

다음은 샘플 코드의 일부에 사용된 getElementsByTagNameNS 함수의 사용 예이다. 여기서 NS는 Name Space를 뜻하는데 XML element중에 특정 name space를 지정해서 element를 찾을 데 사용하면 좋다.

google.feeds.getElementsByTagNameNS(items[i], "http://digg.com/docs/diggrss/", "diggCount")[0];

관련 XML은 다음과 같다.

…
<rss xmlns:digg="http://digg.com/docs/diggrss/" xmlns:media="http://search.yahoo.com/mrss/" xmlns:feedburner="http://rssnames
pace.org/feedburner/ext/1.0" version="2.0">
<channel>
…   
   <digg:diggCount>136</digg:diggCount>

http://digg.com/docs/diggrss/ 에서 digg를 찾아내고 digg:diggCount를 찾는 과정을 한 번에 해결하고 있다.

Javascript에서 XML name space를 다루는 것은 알려진 문제이며 이 문제를 쉽게 해결해 주기 위한 sarissa 같은 라이브러리도 있다. 이것도 DOM level 2를 지원하지 않는 IE 때문인 것 같다.

구글 맵에서 다음과 같이 위치, 경도를 주면 주소 정보를 JSON 형식으로 리턴합니다. 번지까지 상세한 정보를 리턴해 주고 있네요.

자세한 정보는 Google Geocoding API를 참고하시면 됩니다.

http://maps.google.co.kr/maps/geo?q=35.0760269165,127.716156006

{
  "name": "35.0760269165,127.716156006",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "한국 전라남도 광양시 다압면 도사리 422-2",
    "AddressDetails": {
   "Accuracy" : 5,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-863"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면 도사리 422-2"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.0792088,
        "south": 35.0729136,
        "east": 127.7192250,
        "west": 127.7129298
      }
    },
    "Point": {
      "coordinates": [ 127.7160774, 35.0760612, 0 ]
    }
  }, {
    "id": "p2",
    "address": "한국 전라남도 광양시 다압면 도사리 414 청매실농원",
    "AddressDetails": {
   "Accuracy" : 9,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "AddressLine" : [ "청매실농원" ],
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-863"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면 도사리 414"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.0784526,
        "south": 35.0721574,
        "east": 127.7193946,
        "west": 127.7130994
      }
    },
    "Point": {
      "coordinates": [ 127.7162470, 35.0753050, 0 ]
    }
  }, {
    "id": "p3",
    "address": "한국 전라남도 광양시 다압면 도사리",
    "AddressDetails": {
   "Accuracy" : 5,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-863"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면 도사리"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.0999238,
        "south": 35.0656751,
        "east": 127.7338020,
        "west": 127.6869791
      }
    },
    "Point": {
      "coordinates": [ 127.7017386, 35.0829224, 0 ]
    }
  }, {
    "id": "p4",
    "address": "한국 전라남도 광양시 다압면 도사리",
    "AddressDetails": {
   "Accuracy" : 5,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-863"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면 도사리"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.0999238,
        "south": 35.0489776,
        "east": 127.7562448,
        "west": 127.6869791
      }
    },
    "Point": {
      "coordinates": [ 127.7184518, 35.0675421, 0 ]
    }
  }, {
    "id": "p5",
    "address": "한국 전라남도 광양시 다압면",
    "AddressDetails": {
   "Accuracy" : 5,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-860"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.1833167,
        "south": 35.0489776,
        "east": 127.7562448,
        "west": 127.6038570
      }
    },
    "Point": {
      "coordinates": [ 127.6705890, 35.1274914, 0 ]
    }
  }, {
    "id": "p6",
    "address": "한국 전라남도 광양시 다압면",
    "AddressDetails": {
   "Accuracy" : 5,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시",
            "PostalCode" : {
               "PostalCodeNumber" : "545-860"
            },
            "Thoroughfare" : {
               "ThoroughfareName" : "다압면"
            }
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.1833167,
        "south": 35.0489776,
        "east": 127.7562448,
        "west": 127.6038570
      }
    },
    "Point": {
      "coordinates": [ 127.6909949, 35.1232031, 0 ]
    }
  }, {
    "id": "p7",
    "address": "한국 전라남도 광양시",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도",
         "Locality" : {
            "LocalityName" : "광양시"
         }
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 34.9726000,
        "south": 34.8984000,
        "east": 127.7854000,
        "west": 127.6507000
      }
    },
    "Point": {
      "coordinates": [ 127.6958882, 34.9406968, 0 ]
    }
  }, {
    "id": "p8",
    "address": "한국 전라남도",
    "AddressDetails": {
   "Accuracy" : 2,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "전라남도"
      },
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 35.4893517,
        "south": 33.9531887,
        "east": 127.9478783,
        "west": 125.0981496
      }
    },
    "Point": {
      "coordinates": [ 126.9910000, 34.8679000, 0 ]
    }
  }, {
    "id": "p9",
    "address": "전라도",
    "AddressDetails": {
   "Accuracy" : 3,
   "AddressLine" : [ "전라도" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.1567649,
        "south": 33.9531887,
        "east": 127.9478783,
        "west": 125.0981496
      }
    },
    "Point": {
      "coordinates": [ 126.9541070, 35.3564250, 0 ]
    }
  }, {
    "id": "p10",
    "address": "한국",
    "AddressDetails": {
   "Accuracy" : 1,
   "Country" : {
      "CountryName" : "한국",
      "CountryNameCode" : "KR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 38.6340000,
        "south": 33.0041000,
        "east": 129.7430000,
        "west": 124.8541000
      }
    },
    "Point": {
      "coordinates": [ 127.7669220, 35.9077570, 0 ]
    }
  } ]
}

지도의 대명사 구글 지도의 API의 버전이 2에서 3로 올라갔다. 모바일 장치에 대한 지원이 강화된 것으로 보인다.

※ v3부터는 API Key가 필요 없습니다.

아래는 구글 사이트에 소개된 가장 간단한 예이다. 지정한 위치를 중심으로 한 지도가 표시된다.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

1. javascript 파일을 포함하고
2. 페이지를 로딩한 후에
3. google.maps.Map 객체를 생성하면
4. 지정한 <div>에 지도가 표시된다.

주의할 점은 <div> 속성 안에 width와 height를 포함해야 한다는 것이다. CSS 등으로 지정하면 크기를 알 수 없는 문제가 있기 때문이다.

지도 종류 4가지

옵션을 지정할 때 mapTypeId에 다음의 하나를 지정한다.

• google.map.MapTypeId.ROADMAP : 지도
• google.map.MapTypeId.SATELLITE : 위성
• google.map.MapTypeId.HYBRID : 하이브리드
• google.map.MapTypeId.TERRAIN : 지형

런타임에 변경하기 위해서는 setMapTypeId() 함수를 호출한다.

Event 처리

구글 맵은 javascript의 일반적인 이벤트 처리와 유사하게 addListener라는 함수를 제공한다. 거기에 원하는 이벤트를 등록하면 된다. 간단한 지도 보기에 이벤트를 다음과 같이 추가할 수 있다.

  google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 1500);
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
  });
}

function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

google.maps.event.addListener()를 사용해서 이벤트를 추가하게 된다. ‘zoom_changed’, ‘click’ 등의 이벤트는 구글 맵에서 정의한 이벤트가 된다.

위의 예는 zoom이 변경이 되면 1.5초 후에 특정 지역으로 이동하는 이벤트 처리와 marker를 클릭하면 zoom 배율을 8로 변경하게 되어 있다. 배율이 8이 아닌 상태에서 marker를 클릭하면 배율이 8로 변경이 되면서 다시 zoom_changed 이벤트가 발생하여 특정 지역으로 이동까지 하게 된다.

지도의 위치 변화에 따른 처리를 하기 가장 좋은 방법은 구글 문서에 따르면 ‘bounds_changed’와 getBounds()를 같이 사용하는 것이라고 한다. ‘zoom_changed’와 ‘center_changed’를 사용하는 것은 이 경우에 getBounds() 값을 정확히 얻기 힘들 수 있다고 한다.

※ Polygon의 내부를 ‘click’한 경우에도 이벤트를 받을 수 있다.

클릭과 같은 UI 이벤트에 대해서는 인자로 위치를 받을 수 있다. 다음은 클릭을 한 곳에 marker를 추가하는 예이다.

…
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
…
  
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

Controls

지도 종류 변경, 확대/축소 등의 제어 요소를 수정할 수 있다. 옵션에 다음을 설정할 수 있다.

• mapTypeControlOptions
• navigationControlOptions
• scaleControlOptions

예제는 다음과 같다.

function initialize() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    }     
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);                          
}

Overlay

지도 위에 다음과 같은 다양한 것을 표시할 수 있다.

• Marker : 한 점의 위치를 가리키는데 사용한다.
• Icon : 기본 marker를 원하는 아이콘으로 그릴 수 있다.
• Polyline
• Polygon : ‘click’ 이벤트도 받을 수 있다.
• Ground Overlays : 이미지를 그릴 수 있다.
• Info Windows : 말 풍선처럼 생긴 것. 텍스트와 HTML을 포함할 수 있다.
• KML layer : Google earth에서 지원하는 KML 파일을 읽어서 표시할 수 있다.
• GeoRSS layer : 위치 정보를 저장하고 있는 GeoRSS를 읽어 들일 수 있다. Flickr에서 지원한다.

Geocoding

위도,/경도로부터 주소를, 주소로부터 위도/경도를 얻는데 사용한다.

구글은 다양한 API를 제공하고 있습니다. Javascript를 제일 잘 사용하는 집단 중의 하나로서 대부분의 API는 AJAX 형태로 사용할 수 있습니다.

다양한 API에 대해서 동작하는 샘플은 가장 좋은 출발점이 됩니다. 더구나 직접 샘플을 수정하고 결과를 확인할 수 있다면 좋겠지요?

구글은 Code Playground 라는 곳을 통해서 이런 것을 가능하게 해 줍니다. 일부분의 코드 뿐만이 아니라 동작 가능한 HTML 전체를 얻을 수 있어서 HTML을 웹 서버에 복사만 하면 동작을 하는 것을 확인할 수 있습니다. 물론 API Key는 새로 받은 후에 교체해야 합니다. 팝업 안내에서 나오는 페이지로 이동 후에 몇 번의 클릭이면 Key를 받는 것도 간단히 끝납니다.