zp
/
switch


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!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>