<section>
<?= t_head('Make JSONP Request For Tweets', "15–20") ?>
<p>First you will write the necessary JavaScript code to load tweet data from the Twitter Search API using JSONP.</p>
<p>Download the following skeleton files:</p>
<p class="resource"><a href="minilab13.html">minilab13.html</a></p>
<p class="resource"><a href="minilab13.js">minilab13.js</a></p>
<p>Add the necessary JavaScript code to load new tweet data for the entered search term when the “List Tweets” button is clicked.</p>
<p>In Firebug’s Net tab, inspect the data returned by the request: click the request to expand it, then click the JSON tab to show the JSON data presented nicely.</p>
<p>In your callback function, begin by alerting the <code>query</code> and <code>completed_in</code> fields of the data returned, so your alert message says something like:</p>
<pre><code>Search for 'beer' completed in: 0.033 seconds.</code></pre>
</section>
<section>
<?= t_head('Inject Tweet Data Into Page', '15–20') ?>
<p>Now iterate over the <code>results</code> array in the JSON data returned, and for each result, inject some of the tweet’s data into the page. (<code>from_user</code>, <code>text</code>, an image for the user’s avatar <code>profile_image_url</code>, etc.)</p>
</section>
<section>
<?= t_head('Add a Google Map', '10–15') ?>
<p>Add a div to your HTML page to be a container for a Google Maps map. Style it to have dimensions (width/height), then add the necessary code in your <samp>minilab13.js</samp> file to create a Google Map in that div.</p>
<p>Specify various options, like changing the center point, zoom level, and map type.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with creating <a href="https://developers.google.com/maps/documentation/javascript/overlays#Markers">markers</a> and <a href="https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows">info windows</a> in your map.</p>
</footer>