Information Technology Reference
In-Depth Information
function processLocalSearchResults() {
for (var i = 0; i < myLocalSearch.results.length; i++) {
searchResults.push(new LocalResult(myLocalSearch.results[i]));
}
}
The
processLocalSearchResults()
function iterates over our results, instantiates a
LocalResult
object, and adds them to the
searchResults
array. The
LocalResult
object
is a common example object Google uses in many of its API examples, which we've
copied here. We're using it mainly for the ease with which we can then access the
coordinates of a local search result. It does similar work to our previous code, as it
places a marker on our map, and it also creates a textual result list. In our current
example, we've created CSS to hide the text list, but we'll cover options for this shortly.
Lastly, as far as our JavaScript is concerned, we register our
prepareMap()
function as
the callback to invoke once the Google Search API has finished loading.
GSearch.setOnLoadCallback(prepareMap);
All that remains is the actual HTML code that controls the size of our map, the search
field and Find button, and relevant
<div>
names and nesting. We've deliberately chosen
explicit pixel sizing for the overall display, and the map object housed within it, to suit
vertical display on a phone handset, and horizontal display on a tablet while also
showing the text results which we'll cover later in the chapter.
<body>
<p>Move Me! Transit Search Example</p>
<div style="width: 330px;">
<input type="text" id="searchtext" style="width: 240px;"/>
<input type="button" value="Find" onclick="execSearch()"/>
<div style="position: absolute; left: 440px;">
<div id="resultlist">
</div>
</div>
<div id="map" style="height: 450px;">
</div>
</div>
</body>
Our HTML displays the simple form you saw in Figure 10-1.
Running Our Code
So what happens when we actually search for a transport option? In our example so far,
our candidate user is a tourist who has found themselves in Union Square, and is
looking for the nearest transport option. If you were to find yourself in San Francisco,
you might think of using the Bay Area Transit System, or BART. So let's use that as our
criterion to display what actually happens when we invoke
execSearch()
. Figure 10-2
shows the results returned via our local search invocation, plotted on our map using the
LocalResult
objects.
