goog.html
5.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS Google Ajax API plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.info{background-color:#cfc; border:2px solid #ada; padding:10px 20px; margin:2em 0}
</style>
</head>
<body>
<div id="wrapper">
<h1>RequireJS + Google Ajax API plugin</h1>
<div class="info">
<p>
This plugin depends on the Async plugin and loads files using the <code>google.load</code> method from the <a href="http://code.google.com/apis/loader/">Google Loader</a>.
</p>
<p>
Notice that it can only load the libraries listed on the <a href="http://code.google.com/apis/loader/#AvailableAPIs">Available APIs section</a>.
</p>
</div>
<h2>Google Charts - corechart</h2>
<div id="chart_div"></div>
<h2>Google Charts - geochart</h2>
<div id="map_canvas" style="width:500px"></div>
<h2>Google Search API</h2>
<div id="branding"></div>
<div id="search_results"> </div>
</div>
<script src="../lib/require.js"></script>
<script>
require({
waitSeconds : 15, //make sure it is enough to load all scripts
paths : {
//alias to plugins
async : '../src/async',
goog : '../src/goog',
propertyParser : '../src/propertyParser'
}
});
//To load google libraries you should follow the format "goog!moduleName,version,packages:[packages],language:en,anotherOption:value"
require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function(){
// visualization + corechart + geochart + search are loaded
// code copied from google charts docs:
// http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
// code copied from google charts docs:
// http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'Germany');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Canada');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'France');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'RU');
data.setValue(5, 1, 700);
var options = {};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
//code copied from http://code.google.com/apis/ajax/playground/?exp=libraries#the_hello_world_of_news_search
//and slightly modified
var newsSearch = new google.search.WebSearch(),
resultHolder = document.getElementById('search_results');
function searchComplete() {
resultHolder.innerHTML = '';
if (newsSearch.results && newsSearch.results.length > 0) {
for (var i = 0; i < newsSearch.results.length; i++) {
var p = document.createElement('p');
var a = document.createElement('a');
a.href = newsSearch.results[i].url;
a.innerHTML = newsSearch.results[i].title;
p.appendChild(a);
resultHolder.appendChild(p);
}
}
}
newsSearch.setSearchCompleteCallback(this, searchComplete, null);
newsSearch.execute('RequireJS plugins');
// Include the required Google branding
google.search.Search.getBranding('branding');
});
</script>
</body>
</html>