<section>
<?= t_head('Add Center Point Marker', "10–15") ?>
<p>Begin by copying your <samp>minilab13.html</samp> and <samp>minilab13.js</samp> files. Name them <samp>minilab14.html</samp> and <samp>minilab14.js</samp>.</p>
<p>Take a look at the Overlays documentation linked to from <a href="../../lectures/jsonp-apis/#slide6">this lecture slide</a>. It contains information about to create markers (the “Markers” section).</p>
<p>Add a marker to your Google Map, placed in the same Lat/Lng location as the map’s <code>center</code> point. When the marker is hovered over, make the tooltip (<code>title</code>) read something of your choice, like “Booyakasha.”</p>
</section>
<section>
<?= t_head('Add Info Window to Center Marker', "10–15") ?>
<p>The Overlays documentation also contains information about to create an info window (the “Info Windows” section) that appears when a marker is clicked.</p>
<p>Add an info window for your map’s center point. It should contain a paragraph of text that you create using jQuery.</p>
<p>Don’t forget that you can get a DOM object out of a jQuery object using array notation:</p>
<pre><code>var \$p = \$('<p>').text("This is a paragraph!");
var dom_p = \$p[0]; // the DOM object that was inside the \$p jQuery object
</code></pre>
<p>Pass a DOM object <strong>only</strong> as the info window’s <code>content</code> parameter — it won’t work if you pass a jQuery object.</p>
</section>
<section>
<?= t_head('Local Tweet Search', '10–15') ?>
<p>Now adapt your Twitter search to pass an additional parameter to the web service which constrains your search to a certain geographic area. Look through the API’s documentation here for the name of the parameter and its format:</p>
<p class="resource"><a href="https://dev.twitter.com/docs/api/1/get/search">https://dev.twitter.com/docs/api/1/get/search</a></p>
<p>Verify that the tweets you’re getting now include information in their <code>geo</code> field which specifies the latitude/longitude from which the tweet was posted.</p>
<p>For each tweet, <code>console.log</code> its location data.</p>
<p>Notice that some tweets may still have <code>null</code> geo data.</p>
</section>
<section>
<?= t_head('Parameterized <code>createMarker</code> Function', '15–20') ?>
<p>Since eventually we’ll be creating lots of markers (a marker for each tweet), we should write a function to create a single marker so we don’t have redundant marker-creating code.</p>
<p>Move your marker-creating code to a function called <code>createMarker</code>. Then add parameters for three things:</p>
<ul>
<li>The location where the marker should be placed (a <code>google.maps.LatLng</code> object)</li>
<li>The contents of the marker’s info window (a standard DOM object — NOT a jQuery object)</li>
<li>The text of the marker’s tooltip (<code>title</code> option), to be displayed when the marker is hovered over</li>
</ul>
<p>Inside your <code>createMarker</code> function you’ll also need access to the map you created earlier. Modify your earlier code so that it saves the map in a <strong>global variable</strong>.</p>
<p>When you’re done with this step, your center point marker should act exactly as before.</p>
</section>
<section>
<?= t_head('Create a Marker For Each Tweet', '15–20') ?>
<p>Now, at the same time that you inject each tweet into the page, also create a marker for it on the map. Make the marker’s tooltip (<code>title</code>) be the tweet’s coordinates, and the contents of its info window be the text of the tweet (and perhaps also some information about the author).</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with other map options, and creating prettier info boxes with more of the tweet’s data.</p>
</footer>