I tried to make a easy google news search api. I know google news api search can show max 8 items per page, and 8 pages(total 64 items).
1.How to add `image{}`(I want to show the news image), I read the document in google official website, but not understand.
2.Can google news api search set a start page at page 3?(the default page is always show page 1)
3.Is google api search have a day limit? I saw the old version Google SOAP Search API just allow custom use 1000 times per day.
Thanks.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>The Hello World of News Search</title> 
    <script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
    <script type="text/javascript"> 
      google.load('search', '1'); 
      var searchControl; 
      function OnLoad() {
        google.search.Search.getBranding(document.getElementById("branding"));
        var newsSearch = new google.search.NewsSearch();
        newsSearch.setUserDefinedLabel("sport");
		
        searchControl = new google.search.SearchControl();
		searchControl.addSearcher(newsSearch);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
		searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);	
        searchControl.draw(document.getElementById("searchResults"), options);
        // Execute an inital search
        searchControl.execute("sport");
      }
      // Set a callback to call your code when the page loads 
      google.setOnLoadCallback(onLoad); 
    </script> 
  </head> 
  <body style="font-family: Arial;border: 0 none;"> 
    <div id="branding"  style="float: left;"></div><br /> 
    <div id="content">Loading...</div> 
  </body> 
</html>

Youlichika,

Your page sticks on "loading".

If you can develop it to the point where it shows Page 1 without images, then I should be able to explain how to show images and go to page 3.

Airshow

Hi, @Airshow. But I still a newbie. I have no idea how to use `image{}`.
I try to use `newsSearch.image{}` at line 14, but nothing happened. I do not understand how to use `basic properties` in the article of 'News Search Developer's Guide'. I need help...

Can you post a working version of your code. The version posted above doesn't work at all.

Airshow

I'm sorry , I try to add the image{} by myself, maybe the last time I make some mistake and save the files without turn back.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>The Hello World of News Search</title> 
    <script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script> 
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load('search', '1');
      var searchControl;
      function OnLoad() {
		google.search.Search.getBranding(document.getElementById("branding"));
        var newsSearch = new google.search.NewsSearch();
        newsSearch.setUserDefinedLabel("sport");
		
        searchControl = new google.search.SearchControl();
		searchControl.addSearcher(newsSearch);

        var options = new google.search.DrawOptions();
        options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
		searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
        searchControl.draw(document.getElementById("searchResults"), options);

        // Execute an inital search
        searchControl.execute("sport");
      }
      google.setOnLoadCallback(OnLoad, true);
    //]]>
    </script>
  </head> 
  <body style="font-family: Arial;border: 0 none;"> 
    <div id="branding"  style="float: left;"></div><br /> 
    <div id="content"><div id="searchResults">Loading...</div></div> 
  </body> 
</html>

Youlichika,

The problems with Google are that (a) they keep changing things and (b) their APIs simply ain't very friendly.

Below is a way to get what you're after but it's nothing like yours, which probably uses a more recent API (though not the most recent, I think). I'm sure that your method could be customised but it's not immediately obvious how to do it.

Anyways, for what its worth ....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>The Hello World of News Search</title>
<style type="text/css">
body {
	font-family: arial;
}
form {
	margin: 0;
}
#loading {
	margin: 20px 0 0 60px;
	font-size: 10pt;
	display: none;
}
#pagination1Wrapper, #pagination2Wrapper {
	clear: left;
	margin-top: 1.0em;
	font-size: 9pt;
	display: none;
}
#searchResults {
	font-size: 10pt;
}
#searchResultsNull {
	margin: 1.0em;
	font-size: 10pt;
	display: none;
}
.gs-result {
	clear: left;
	margin-top: 1.0em;
}
.gs-result img {
	float: left;
	margin-right: 10px;
	border-width: 0;
}
.gs-result div.gs-title {  }
.gs-result a.gs-title {  }
.gs-result a.gs-title b {  }
.gs-result div.gs-publisher {  }
.gs-result div.gs-publishedDate {  }
.gs-result div.gs-relativePublishedDate {  }
.gs-result div.gs-snippet {  }
.gs-result div.gs-clusterUrl { clear: left; }
.gs-result a.gs-clusterUrl {  }
.gs-result div.gs-watermark { clear: left; display: none; }
.gs-result a.gs-watermark {  }
</style>
<!-- BEGIN: SAMPLE RESULT -->
<!--
<div class=gs-title>
	<a class=gs-title href="http://www.wsmv.com/entertainment/26159244/detail.html" target=_blank>First <B>Garth</B> Brooks Flood Concert Thursday</a>
</div>
<div class=gs-publisher>WSMV Nashville</div>
<div class=gs-publishedDate>- 16 Dec 2010</div>
<div class=gs-relativePublishedDate>- 2 hours ago</div>
<div class=gs-snippet>Thursday night is the night many country music fans have been waiting for: the chance to see <b>Garth</b> Brooks live in Music City. The country star is performing <b>...</b></div>
<div class=gs-clusterUrl>
	<a class=gs-clusterUrl href="http://news.google.com/news/story?ncl=d8UohtqzWc2APSMrljbfGdyK5E5xM&hl=en-GB&ned=us" target=_blank>Related Articles ยป</a>
</div>
<div class=gs-watermark>
	<a class=gs-watermark href="http://code.google.com/apis/ajaxsearch/faq.html" target=_blank>clipped from Google - 12/2010</a>
</div>
-->
<!-- END: SAMPLE RESULT -->
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function onLoad() {
	google.search.Search.getBranding('branding');
});

onload = function() {
	var loading = document.getElementById('loading');
	var searchResultsContainer = document.getElementById('searchResults');
	var pagination1Wrapper = document.getElementById('pagination1Wrapper');
	var pagination2Wrapper = document.getElementById('pagination2Wrapper');
	var pagination1 = document.getElementById('pagination1');
	var pagination2 = document.getElementById('pagination2');
	var searchResultsNullContainer = document.getElementById('searchResultsNull');
	var nullSearchTerm = document.getElementById('nullSearchTerm');

	var searchTerm;
	var newSearch = true;

	var newsSearch = new google.search.NewsSearch();

	newsSearch.setSearchCompleteCallback(this, function() {
	
	// Uncomment this code to make the search go to page 3 initially.
	// (Probably unnecessary with decent pagination control).
/*
		if(newSearch && newsSearch.cursor.currentPageIndex == 0) {
			newsSearch.gotoPage(2);
			return;
		}
*/
		newSearch = false;
		loading.style.display = 'none';
		if (newsSearch.results && newsSearch.results.length > 0) {
			pagination1Wrapper.style.display = 'block';
			pagination2Wrapper.style.display = 'block';
			searchResultsNullContainer.style.display = 'none';
			searchResultsContainer.style.display = 'block';
			searchResultsContainer.innerHTML = '';
			for (var i=0; i<newsSearch.results.length; i++) {
				var wrapper = document.createElement('div');
				var node = newsSearch.results[i].html.cloneNode(true);
				wrapper.className = 'gs-result';
				wrapper.appendChild(node);
				if(newsSearch.results[i].image) {
					var a = document.createElement('a');
					var img = document.createElement('img');
					a.appendChild(img);
					node.insertBefore(a, node.childNodes[2]);
					a.href = newsSearch.results[i].unescapedUrl ;
					img.src = newsSearch.results[i].image.tbUrl;
					img.style.width = newsSearch.results[i].image.tbWidth;
					img.style.height = newsSearch.results[i].image.tbHeight;
				}
				searchResultsContainer.appendChild(wrapper);
			}
			var htmlArray = ['Page&nbsp;:&nbsp;'];
			var pageClick_closure = function(i) {
				return function() {
					pagination1Wrapper.style.display = 'none';
					pagination2Wrapper.style.display = 'none';
					searchResultsNullContainer.style.display = 'none';
					searchResultsContainer.style.display = 'none';
					loading.style.display = 'block';
					newsSearch.gotoPage(i);
					return false;
				}
			};
			pagination1.innerHTML = pagination2.innerHTML = '';
			for(var i=0; i<newsSearch.cursor.pages.length; i++) {
				if(i === newsSearch.cursor.currentPageIndex) {
					var span = document.createElement('span');
					var txt1 = document.createTextNode(' ' + newsSearch.cursor.pages[i].label + ' ')
					pagination1.appendChild(span);
					span.appendChild(txt1);
				}
				else {
					var span = document.createElement('span');
					var a = document.createElement('a');
					var txt1 = document.createTextNode(' ');
					var txt2 = document.createTextNode(' ');
					pagination1.appendChild(span);
					span.appendChild(txt1);
					span.appendChild(a);
					span.appendChild(txt2);
					a.href = "#";
					a.onclick = pageClick_closure(i);
					a.innerHTML = newsSearch.cursor.pages[i].label;
				}
			}
			pagination2.appendChild(pagination1.cloneNode(true));
			// begin: Shouldn't be necessary .... but is ....
			var pLinks = pagination2.getElementsByTagName('a');
			for(var i=0; i<pLinks.length; i++) {
				pLinks[i].onclick = pageClick_closure(Number(pLinks[i].innerHTML-1));
			}
			//... end: unnecessary ...
		}
		else {
			pagination1Wrapper.style.display = 'none';
			pagination2Wrapper.style.display = 'none';
			searchResultsContainer.style.display = 'none';
			searchResultsNullContainer.style.display = 'block';
			nullSearchTerm.innerHTML = searchTerm;
		}
	}, null);

	var f = document.forms[0];
	f.onsubmit = function() {
		f.searchButton.onclick();
		return false;
	};
	f.searchButton.onclick = function() {
		newSearch = true;
		loading.style.display = 'block';
		newsSearch.setResultSetSize(8);//adjust to suit, 1-8
		searchTerm = this.form.searchTerm.value;
		newsSearch.execute(searchTerm);
	}
}
</script>
</head>

<body>

<div id="branding" style="float:left;"></div>
<form>
	<input name="searchTerm" value="New Mexico" />&nbsp;
	<button id="searchButton" type="button">Search</button>
</form>
<div>
	<div id="pagination1Wrapper">Page&nbsp;:&nbsp;<span id="pagination1"></span></div>
	<div id="searchResults"></div>
	<div id="searchResultsNull">No results found for <span id="nullSearchTerm"></span></div>
	<div id="loading">Loading ...</div>
	<!--div id="loading"><img src="images/spinner.gif" border="0" height="48" width="48"></div-->  <!-- alternative, "loading" indication (needs gif) -->
	<div id="pagination2Wrapper">Page&nbsp;:&nbsp;<span id="pagination2"></span></div>
</div>
</body>
</html>

Airshow

Wow... @Airshow , this is a nice script, it works well. I can see news images now and it can skip to the page 3 at a start.
Wonderful, Thank you very much.
And have a nice weekend.