우선 구글 Search API 소개문서를 읽고 Google API Key를 받아두기 바란다. 이 문서는 여러분이 테스트 환경이 완전히 갖추어졌다고 가정하고 써나갈 것이다.
Hello World
그럼 가장 유명한 프로그래밍 코드인 Hello World의 구글 Search API 버젼을 작성해 보도록 하겠다. 아래의 코드는 검색어 리눅스 FireFox에 대한, 지도 검색, 웹검색, 비디오 검색, 블로그 검색, 도서 검색, 뉴스검색 결과를 출력한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google AJAX Search API Sample</title>
<link href="http://www.google.com/uds/css/gsearch.css"
type="text/css" rel="stylesheet"/>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
function OnLoad() {
// search control 생성
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
// 지도검색을 위한 기준지역 설정
localSearch.setCenterPoint("New York, NY");
// search control 을 페이지에 표시한다.
searchControl.draw(document.getElementById("searchcontrol"));
// 검색을 수행한다.
searchControl.execute("리눅스 FireFox");
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>
예제 페이지는 여기에서 확인할 수 있다. 자신의 웹페이지에서 확인하려면, Search API Key를 스크립트에 넣어줘야 한다.
Google Ajax Search API의 가장 중요한 객체는 GSearchControl이다. 이 객체는 검색서비스를 수행하기 위한 관련된 요소들과 하위 객체들을 가지고 있다.
위의 예제코드를 보면 GlocalSearch, GWebSearch, GvideoSearch, GblogSearch, GnewsSearch, GBookSearch 등이 있는데, 이들은 각각 지도, 웹, 비디오, 블로그, 뉴스, 도서검색서비스와 관련된 객체들로, addSearcher()를 이용해서 search control에 추가시킬 수 있다.
이렇게 만들어진 search control은 GSearchControl.draw메서드에 의해서 웹페이지에 출력되게 된다. 더불어 이 메서들을 통해서 페이지를 어떤 형태로 출력할건지를 결정할 수 있다. 기본은 lenear 레이아웃으로, 원한다면 tabbed레이아웃 등으로 변경할 수 있다. 이에 대해서는 뒤에 예제로 다루기로 하겠다.
탭 레이아웃을 선택했을 경우에는 검색창과 검색결괄ㄹ 어떻게 배치할 것인지를 결정할 수 있으며, 매우 쉽게 페이지결과에 적용할 수 있다.
브라우저 호환
Google AJAX Search API는 FireFox(:12) 1.5, IE6, Safari, Opera 9+ 를 지원한다.
- http://code.google.com/apis/ajaxsearch/documentation
- 구글 Search API 소개
- Google Map API 소개
우선 구글 Search API 소개문서를 읽고 Google API Key를 받아두기 바란다. 이 문서는 여러분이 테스트 환경이 완전히 갖추어졌다고 가정하고 써나갈 것이다.Hello World
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Hello World - Google AJAX Search API Sample</title> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> //<![CDATA[ function OnLoad() { // search control 생성 var searchControl = new GSearchControl(); // Add in a full set of searchers var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); searchControl.addSearcher(new GbookSearch()); // 지도검색을 위한 기준지역 설정 localSearch.setCenterPoint("New York, NY"); // search control 을 페이지에 표시한다. searchControl.draw(document.getElementById("searchcontrol")); // 검색을 수행한다. searchControl.execute("리눅스 FireFox"); } GSearch.setOnLoadCallback(OnLoad); //]]> </script> </head> <body> <div id="searchcontrol">Loading</div> </body> </html>브라우저 호환
Recent Posts
Archive Posts
Tags