User:Bill Flanagan/AjaxSearchExamples

From OpenWetWare
Jump to: navigation, search

<html>

<style type="text/css"> /** Copyright 2005 Google Inc. All rights reserved. */

/* the GSearchControl CSS Classes

* .gsc-control : the primary class of the control
*/

.gsc-control {

 width: 300px;

}

.gsc-control div {

 position: static;

}

/* control inputs

* .gsc-search-box : the container that hosts the text input area
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/

form.gsc-search-box {

 font-size: 13px;
 margin-top : 0px;
 margin-right : 0px;
 margin-bottom : 4px;
 margin-left : 0px;
 width: 100%;

}

/*

* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/

table.gsc-search-box {

 border-style : none;
 border-width : 0px;
 border-spacing : 0px 0px;
 width : 100%;
 margin-bottom : 2px;

}

table.gsc-search-box td {

 vertical-align : middle;

}

table.gsc-search-box td.gsc-input {

 padding-right : 2px;

}

td.gsc-search-button {

 width : 1%;

}

td.gsc-clear-button {

 width : 14px;

}

/**

* undo common generic table rules
* that tend to impact branding
*/

table.gsc-branding td, table.gsc-branding {

 margin: 0 0 0 0;
 padding: 0 0 0 0;
 border : none;

}

table.gsc-branding {

 border-style : none;
 border-width : 0px;
 border-spacing : 0px 0px;
 width : 100%;

}

.gsc-branding-text {

 color : #676767;

}

td.gsc-branding-text {

 vertical-align : top;

}

td.gsc-branding-text div.gsc-branding-text {

 padding-bottom : 2px;
 text-align : right;
 font-size : 11px;
 margin-right : 2px;

}

div.gsc-branding-youtube td.gsc-branding-text {

 vertical-align : middle;

}

td.gsc-branding-img-noclear {

 width : 51px;
 vertical-align : bottom;

}

td.gsc-branding-img {

 width : 65px;
 vertical-align : bottom;

}

div.gsc-branding-youtube td.gsc-branding-img-noclear {

 width : 55px;

}

div.gsc-branding-youtube td.gsc-branding-img {

 width : 69px;

}

table.gsc-branding-vertical td.gsc-branding-text div.gsc-branding-text {

 margin-right : 0px;
 text-align : center;

}

table.gsc-branding-vertical td.gsc-branding-img-noclear {

 text-align : center;

}

div.gsc-branding-img, div.gsc-branding-img-noclear, img.gsc-branding-img, img.gsc-branding-img-noclear {

 padding-top : 1px;

}

img.gsc-branding-img, img.gsc-branding-img-noclear {

 margin : 0 0 0 0;
 padding-right : 0;
 padding-left : 0;
 padding-bottom : 0;
 border : none;
 display : inline;

}

a.gsc-branding-clickable {

 cursor : pointer;

}

input.gsc-search-button {

 margin-left : 2px;

}

div.gsc-clear-button {

 display : inline;
 text-align : right;
 margin-left : 4px;
 margin-right : 4px;
 padding-left : 10px;
 background-repeat: no-repeat;
 background-position: center center;
 background-image: url('/uds/css/clear.gif');
 cursor : pointer;

}

/*

* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/

input.gsc-input {

 padding-left : 2px;
 border-style : solid;
 border-width : 1px;
 border-color : #BCCDF0;
 width : 99%;

}

.gsc-keeper {

 color: #3366cc;
 text-decoration: underline;
 font-size: 13px;
 cursor: pointer;
 font-weight: normal;
 padding-left: 16px;
 background-repeat: no-repeat;
 background-position: 1px 3px;
 background-image: url('/uds/css/blue_check.gif');

}

/* each section of results has a results header table

* .gsc-resultsHeader : the header itseld
* td.twiddleRegionCell : the section that controls twiddleing of the section to expand/collapse
* td.configLabelCell : the twiddler that controls active configuration of a searcher (used in GlocalSearch)
* .gsc-twiddle : the twiddle image, note, this is a div that wraps gsc-title so that standard image replacement is feasible
* .gsc-twiddle-closed : class added to gsc-twiddle when the twiddler is in the closed state
* .gsc-twiddle-opened : class added to gsc-twiddle when the twiddler is in the opened state
* .gsc-title : the section's title (e.g., Web Results, etc.)
* .gsc-stats : contains the result counts
* .gsc-stats
*/

.gsc-resultsHeader {

 clear: both;
 width: 100%;
 border-bottom: 1px solid #e9e9e9;
 margin-bottom : 4px;

}

.gsc-resultsHeader td.gsc-twiddleRegionCell{

 width: 75%;

}

.gsc-resultsHeader td.gsc-configLabelCell{

 text-align: right;
 width: 75%;

}

/*

* note that the next three classes are all joined together
* to implement the twiddle image. apps can substitute in their
* own images but will need to account for the image size here
* as well as in the left padding of the title element
*
* Note: uds provides the following images that work with the geometry/padding defined below
*  to use these images simply over-ride the.gsc-twiddle-opened/-closed class and specify an alternate image
*  or use an image of your own design
*/

.gsc-resultsHeader .gsc-twiddle{

 margin-top: 4px;
 display: inline;
 cursor: pointer;
 background-repeat: no-repeat;
 background-position: 0px 2px;

} .gsc-resultsHeader td.gsc-twiddle-closed div.gsc-twiddle{

 background-image: url('/uds/css/arrow_close.gif');

} .gsc-resultsHeader td.gsc-twiddle-opened div.gsc-twiddle{

 background-image: url('/uds/css/arrow_open.gif');

}

.gsc-resultsHeader .gsc-title{

 color: #676767;
 margin-right: 10px;
 padding-left: 14px;
 display: inline;

}

.gsc-resultsHeader .gsc-stats {

 color: #676767;
 font-size: 11px;
 font-weight: normal;
 display : inline;

}

.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats {

 display : none;

}

/*

* .gsc-results-selector : box surrounding individual selectors for 1, more, or all results
* .gsc-result-selector : an individual selector
* .gsc-one-result : single result selector
* .gsc-more-results : more (4) results selector
* .gsc-all-results : all results (8) selector
*/

.gsc-results-selector {

 display : inline;

}

.gsc-resultsHeader td.gsc-twiddle-closed .gsc-results-selector {

 display : none;

}

.gsc-result-selector {

 cursor : pointer;
 display : inline;
 font-size : 13px;
 padding-left : 13px;
 background-repeat: no-repeat;
 background-position: center left;

}

/* default mode is dark */ .gsc-one-result {

 background-image: url('/uds/css/one-complex-dark.gif');

}

.gsc-more-results {

 background-image: url('/uds/css/more-complex-dark.gif');

}

.gsc-all-results {

 background-image: url('/uds/css/all-complex-dark.gif');
 padding-right : 1px;

}

/* active mode is light */ .gsc-one-result-active .gsc-one-result {

 background-image: url('/uds/css/one-complex-light-blue.gif');

}

.gsc-more-results-active .gsc-more-results {

 background-image: url('/uds/css/more-complex-light-blue.gif');

}

.gsc-all-results-active .gsc-all-results {

 background-image: url('/uds/css/all-complex-light-blue.gif');

}

.gsc-resultsHeader .gsc-configLabel{

 color: #676767;
 display: inline;
 font-size: 11px;
 cursor: pointer;

}

.gsc-resultsHeader td.gsc-configLabelCell span.gsc-twiddle-closed {

 padding-right: 12px;
 background-repeat: no-repeat;
 background-position: center center;
 background-image: url('/uds/css/settings.gif');

}


/* tabbed mode of search control

* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/

.gsc-tabsArea {

 clear: both;
 margin-top: 6px;
 }

.gsc-tabsArea .gs-spacer {

 font-size : 1px;
 margin-right : 2px;
 overflow : hidden;

}

.gsc-tabsArea .gs-spacer-opera {

 margin-right : 0px;

}

.gsc-tabsAreaInvisible {

 display : none;
 }

.gsc-tabHeader {

 display: inline;
 cursor: pointer;
 padding-left: 6px;
 padding-right: 6px;
 margin-right: 0px;
 }

.gsc-tabHeader.gsc-tabhActive {

 border-left: 1px solid #e9e9e9;
 border-right: 1px solid #e9e9e9;
 border-top: 2px solid #ff9900;
 color: black;
 }

.gsc-tabHeader.gsc-tabhInactive {

 border-left: 1px solid #e9e9e9;
 border-right: 1px solid #e9e9e9;
 border-top: 2px solid #e9e9e9;
 background: #e9e9e9;
 color: #676767;
 }

.gsc-tabData.gsc-tabdActive {

 display: block;
 }

.gsc-tabData.gsc-tabdInactive {

 display: none;
 }

/* tab specific results header supression

* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/

.gsc-tabData .gsc-resultsHeader .gsc-title {

 display: none;
 }

.gsc-tabData .gsc-resultsHeader .gsc-stats {

 display: none;
 }

.gsc-tabData .gsc-resultsHeader .gsc-results-selector {

 display : none;

}


/* the results for each section

* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/

.gsc-resultsbox-visible {

 display : block;

}

.gsc-resultsbox-invisible {

 display : none;

}

.gsc-results {

 clear: both;
 padding-bottom: 2px;

}

.gsc-result {

 margin-bottom: 10px;

}

.gsc-result .gs-title {

 height: 1.4em;
 overflow: hidden;
 }

/* specialized, result type specific, fine grained controls */ .gsc-result div.gs-watermark {

 display: none;

}

/* Ads

*/

.gsc-results .gsc-result img.gs-ad-marker {

 display: none;

}

/* Standard configuration div/form */ div.gsc-config {

 border: 1px solid #e9e9e9;
 margin-top: 0px;
 margin-bottom: 10px;
 padding-top : 2px;
 padding-left : 6px;
 padding-right : 6px;
 padding-bottom : 6px;

}

form.gsc-config {

 margin-bottom : 0px;

}

.gsc-configSetting {

 margin-top : 6px;
 }

.gsc-configSetting_Label {

 color: #676767;
 }

.gsc-configSettingInput {

 color: #676767;
 border: 1px solid #e9e9e9;
 width: 75%;
 }

.gsc-configSettingCheckbox {

 color: #676767;
 margin-right: 6px;
 }

.gsc-configSettingCheckboxLabel {

 display : inline;
 color: #676767;
 }

div.gsc-configSettingSubmit {

 margin-top : 8px;
 text-align : right;

}

input.gsc-configSettingSubmit {

 display: inline;
 font-size: 11px;
 cursor: pointer;

}


/* Image Search

*/

.gsc-imageResult {

 float: left;
 margin-bottom: 1em;
 margin-right: 20px;

}

.gs-imageResult {

 width: 114px; /* default width + 1px border */
 overflow : hidden;

}

.gs-imageResult .gs-image-box {

 height: 86px; /* default height + 1px border */
 position : relative;

}

/* note, left edge is auto-set by search control */ .gs-imageResult .gs-image-box img.gs-image {

 position : absolute;
 bottom : 0px;

}

.gs-imageResult .gs-text-box {

 text-align: center;
 overflow : hidden;
 height: 4em;

}

.gs-imageResult .gs-snippet {

 overflow : hidden;
 line-height: 1em;
 cursor : pointer;
 white-space : nowrap;

} .gs-imageResult .gs-visibleUrl {

 cursor : pointer;

} .gs-imageResult .gs-size {

 color: #6f6f6f;

}

/* Video Search

* - single line title
*/

.gsc-videoResult .gs-videoResult .gs-title {

 line-height: 1.3em;
 height: 1.3em;
 overflow: hidden;
 }

.gsc-videoResult .gs-videoResult .gs-snippet {

 line-height: 1.3em;
 max-height: 2.6em;
 overflow: hidden;
 }

/* trailing more link at the bottom of

* a collection of results
*/

.gsc-imageResult .gsc-trailing-more-results {

 clear : both;

}

.gsc-results .gsc-trailing-more-results {

 margin-bottom : 10px;

}

.gsc-results .gsc-trailing-more-results, .gsc-results .gsc-trailing-more-results * {

 color: #0000cc;
 text-decoration: underline;

}

/* trailing cursor section

*/

.gsc-imageResult .gsc-cursor-box {

 clear : both;

}

.gsc-results .gsc-cursor-box .gsc-trailing-more-results {

 margin-bottom : 0px;
 display : inline;

}

.gsc-results .gsc-cursor {

 display : inline;

}

.gsc-results .gsc-cursor-box {

 margin-bottom : 10px;

}

.gsc-results .gsc-cursor-box .gsc-cursor-page {

 cursor : pointer;
 color : #000000;
 text-decoration: underline;
 margin-right : 8px;
 display : inline;

}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {

 color : #A90A08;
 font-weight : bold;
 text-decoration: none;

}


/*** End of Control, Begin Results ***/

/* generic, cross cutting result style

* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result's image (within a table)
* .gs-text-box : generic container for a result's text content (within a table). Note that this class, and image-box are only used in video
*/

.gs-result .gs-title, .gs-result .gs-title * {

 color: #0000cc;
 text-decoration: underline;

}

.gs-divider {

 padding-bottom: 8px;
 text-align: center;
 color: #676767;

}

.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {

 color: #008000;
 text-decoration: none;

}

/* relative and absolute dates, note, news/books inlines these */ .gs-relativePublishedDate, .gs-publishedDate {

 color: #6f6f6f;
 text-decoration: none;

} .gs-result a.gs-clusterUrl, .gs-result .gs-clusterUrl {

 color: #008000;
 text-decoration: underline;
 cursor: pointer;

}

.gs-newsResult .gs-publisher {

 color: #6f6f6f;
 display : inline;
 text-decoration: none;

}

/*

* For news results there are two dates...
* The relative date is visible while in the
* search control and the published date
* is visible when clipped. Why? It doesn't
* make sense to say 4 hours ago for a clipped
* result...
*/

/* establish the base style */ .gs-newsResult .gs-relativePublishedDate, .gs-newsResult .gs-publishedDate {

 display : inline;
 margin-left : 4px;

}

/* base styling for relative date is none */ .gs-blogResult .gs-relativePublishedDate, .gs-newsResult .gs-relativePublishedDate {

 display : none;

}

/* suppress publishedDate while in the control */ .gsc-blogResult .gs-blogResult .gs-publishedDate, .gsc-newsResult .gs-newsResult .gs-publishedDate {

 display : none;

}

/* enable relativePublishedDate while in the control */ .gsc-blogResult .gs-blogResult .gs-relativePublishedDate, .gsc-newsResult .gs-newsResult .gs-relativePublishedDate {

 display : inline;

}

.gs-newsResult .gs-location {

 color: #6f6f6f;
 display : inline;
 text-decoration: none;

}

.gs-result img.gs-image {

 vertical-align : middle;
 border : 1px solid #0000cc;

}

.gs-result div.gs-phone {}

.gs-result .gs-directions, .gs-result .gs-directions * {

 color: #7777cc;
 font-weight: normal;
 text-decoration : underline;
 cursor : pointer;

}

.gs-secondary-link, .gs-secondary-link * {

 color: #7777cc;
 font-weight: normal;
 text-decoration : underline;
 cursor : pointer;

}

/* wrapper around user supplied to/from mode directions

* normally this is disabled by default, and gs-directions is enabled
* apps can easily switch this by setting display:block on the rule below,
* and display:none on the rule above
* e.g., add these two rules to switch local results into
* alternate style driving directions
* .gs-localResult .gs-directions-to-from { display : block; }
* .gs-localResult .gs-directions { display : none; }
*/

.gs-result .gs-directions-to-from {

 display : none;
 margin-top : 4px;

} .gs-result .gs-directions-to-from .gs-label {

 display : inline;
 margin-right : 4px;

}

.gs-result .gs-directions-to-from div.gs-secondary-link {

 display : inline;

}

.gs-result .gs-directions-to-from .gs-spacer {

 display : inline;
 margin-right : 3px;
 margin-left : 3px;

}

.gs-videoResult a.gs-publisher, .gs-videoResult .gs-publisher {

 color: #008000;
 text-decoration: none;

}

.gs-result a {

 cursor: pointer;

}

.gs-result .gs-address { }

.gs-result .gs-snippet { }

.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {

 padding : 5px;
 margin : 5px;
 border : 1px solid rgb(255,204,51);
 background-color : rgb(255,244,194);

}

.gs-result .gs-watermark{

 font-size: 10px;
 color: #7777cc;

}

div.gs-results-attribution {

 text-align : center;
 margin-bottom : 4px;

}

div.gs-results-attribution, div.gs-results-attribution * {

 font-size : 10px;
 color : #676767;
 text-decoration : none;

}

div.gs-results-attribution a {

 color: #0000cc;
 cursor : pointer;

}

div.gs-results-attribution a:hover {

 text-decoration : underline;

}

.gs-result .gs-metadata{

 color: #676767;

}

/* searcher specific styling for

* - web ad
* - web
* - local
* - image (none)
* - blog (none)
* - video (none)
*/

/* webAd search specific over rides

* .gs-ad-marker : disabled in control, but on in green to indicate clipped result is an ad
*/

.gs-localAd img.gs-ad-marker, .gs-webAd img.gs-ad-marker {

 padding-left: 4px;

}

/* default is to not show long mode visible urls

* apps should selectively enable this while disabling
* div.gs-visibleUrl-short
*/

.gs-webResult div.gs-visibleUrl-long {

 width : 100%;
 overflow : hidden;
 display : none;

}

/* local search specific over rides

* - city, region displayed inline
* - country supressed
* - small font size for info window's
*/

.gs-localAd div.gs-address * {

 color : #676767;

}

.gs-localAd div.gs-street {

 display: inline;

}

div.gs-city {

 display: inline;

}

div.gs-region {

 display: inline;

}

div.gs-country {

 display: none;

}

div.gs-infoWindow * {

 font-size: 11px;
 }

/* video search specific over rides

* - align the table data
* - default image width garuntee
* - appropriate cell seperation
*/

/* todo(markl): workaround until gre in gmail fixes his styles */ .gs-videoResult * {

 font-size: 13px;
 }

/* .gs-videoResult td .gs-image {

 vertical-align : middle;

}

.gs-videoResult td.gs-image-box {

 background-color : #000000;

}*/

.gs-videoResult td div.gs-image-box {

 width : 110px;
 height : 78px;

}

.gs-videoResult td div.gs-text-box {

 vertical-align: top;
 margin-left: 4px;
 }


/* book search specific over rides

* - default image width garuntee
* - appropriate cell seperation
*/

div.gs-book-image-box td, .gs-bookResult td {

 vertical-align : top;

}

div.gs-book-image-box, div.gs-book-image-box div {

 position : static;
 text-align : start;

}

div.gs-book-image-box {

 width : 75px;
 height : 90px;

}

.gs-bookResult td div.gs-text-box {

 vertical-align: top;
 margin-left: 4px;
 }

div.gs-book-image-box img {

 border-spacing : 0px 0px;
 border : none;

}

div.gs-book-image-box div.gs-row-1 {

 line-height : 7px;

}

div.gs-book-image-box img.gs-pages {

 height : 7px;
 width : 45px;

}

div.gs-book-image-box img.gs-page-edge {

 height : 7px;
 width : 11px;

}

div.gs-book-image-box div.gs-row-2 { }

div.gs-book-image-box img.gs-image {

 height : 80px;
 border : 1px solid #a0a0a0;

}

.gs-bookResult .gs-author {

 display : inline;
 color: #6f6f6f;

} .gs-bookResult .gs-publishedDate {

 display : inline;

}

.gs-bookResult .gs-pageCount {

 display : inline;
 color: #6f6f6f;
 margin-left : 4px;

}

.gs-bookResult .gs-id {}

   body {
     background-color: white;
     color: black;
     font-family: Arial, sans-serif;
     font-size: small;
     margin: 15px;
   }
   a:link {
     color: #0000cc;
   }
   a:active {
     color: red;
   }
   a:visited {
     color: #551a8b;
   }
   h1 {
     font-size: x-large;
     margin: 0;
     margin-bottom: 0.25em;
   }
   p {
     margin-top: 0;
     margin-bottom: 1em;
   }
   #placelist {
     width: 500px;
   }
   #search {
     margin-bottom: 5px;
   }
   #searchform {
     width : 100%;
   }
   #map {
     border: 1px solid #979797;
     height: 350px;
   }
   #results {
     position: absolute;
     left: 540px;
   }
   #searchwell {
     width : 330px;
   }
   #searchwell .unselected {
     padding-left: 18px;
     padding-top: 1px;
     background-image: url("http://labs.google.com/ridefinder/images/mm_20_yellow.png");
     background-repeat: no-repeat;
     background-position: top left;
   }
   .unselected .gs-watermark {
     display: none;
   }
   #searchwell .select {
     margin-bottom: 1em;
   }
   .unselected .select {
     cursor: pointer;
     text-decoration: underline;
     color: #7777cc;
   }
   #selected {
     margin-top: 1em;
   }
   #selected .gs-result {
     margin-bottom: 1em;
   }
   #selected .gs-result {
     padding-left: 30px;
     padding-top: 3px;
     background-image: url("http://www.google.com/mapfiles/icon.png");
     background-repeat: no-repeat;
     background-position: top left;
   }

</style> <script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>

   <script src="../api?file=uds.js&amp;v=1.0&amp;key=internal-sample" type="text/javascript"></script>
   <script type="text/javascript">
   //<![CDATA[
   // Our global state
   var gLocalSearch;
   var gMap;
   var gSelectedResults = [];
   var gCurrentResults = [];
   var gSearchForm;
   // Create our "tiny" marker icon
   var gSmallIcon = new GIcon();
   gSmallIcon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
   gSmallIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
   gSmallIcon.iconSize = new GSize(12, 20);
   gSmallIcon.shadowSize = new GSize(22, 20);
   gSmallIcon.iconAnchor = new GPoint(6, 20);
   gSmallIcon.infoWindowAnchor = new GPoint(5, 1);
   // Set up the map and the local searcher.
   function OnLoad() {
     gSearchForm = new GSearchForm(false, document.getElementById("searchform"));
     gSearchForm.setOnSubmitCallback(null, CaptureForm);
     gSearchForm.input.focus();
     // Initialize the map
     gMap = new GMap(document.getElementById("map"));
     gMap.addControl(new GSmallMapControl());
     gMap.addControl(new GMapTypeControl());
     gMap.setCenter(new GLatLng(37.4419, -122.1419), 13);
     // Initialize the local searcher
     gLocalSearch = new GlocalSearch();
     gLocalSearch.setCenterPoint(gMap);
     gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
     // Execute the initial search
     gSearchForm.execute("italian restaurants");
   }
   // Called when Local Search results are returned, we clear the old
   // results and load the new ones.
   function OnLocalSearch() {
     if (!gLocalSearch.results) return;
     var searchWell = document.getElementById("searchwell");
     // Clear the map and the old search well
     searchWell.innerHTML = "";
     for (var i = 0; i < gCurrentResults.length; i++) {
       if (!gCurrentResults[i].selected()) {
         gMap.removeOverlay(gCurrentResults[i].marker());
       }
     }
     gCurrentResults = [];
     for (var i = 0; i < gLocalSearch.results.length; i++) {
       gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
     }
     var attribution = gLocalSearch.getAttribution();
     if (attribution) {
       document.getElementById("searchwell").appendChild(attribution);
     }
     // move the map to the first result
     var first = gLocalSearch.results[0];
     gMap.recenterOrPanToLatLng(new GPoint(parseFloat(first.lng), parseFloat(first.lat)));
   }
   // Cancel the form submission, executing an AJAX Search API search.
   function CaptureForm(searchForm) {
     gLocalSearch.execute(searchForm.input.value);
     return false;
   }

// A class representing a single Local Search result returned by the

   // Google AJAX Search API.
   function LocalResult(result) {
     this.result_ = result;
     this.resultNode_ = this.unselectedHtml();
     document.getElementById("searchwell").appendChild(this.resultNode_);
     gMap.addOverlay(this.marker(gSmallIcon));
   }
   // Returns the GMap marker for this result, creating it with the given
   // icon if it has not already been created.
   LocalResult.prototype.marker = function(opt_icon) {
     if (this.marker_) return this.marker_;
     var marker = new GMarker(new GLatLng(parseFloat(this.result_.lat),
                                        parseFloat(this.result_.lng)),
                              opt_icon);
     GEvent.bind(marker, "click", this, function() {
       marker.openInfoWindow(this.selected() ? this.selectedHtml() :
                                               this.unselectedHtml());
     });
     this.marker_ = marker;
     return marker;
   }
   // "Saves" this result if it has not already been saved
   LocalResult.prototype.select = function() {
     if (!this.selected()) {
       this.selected_ = true;
       // Remove the old marker and add the new marker
       gMap.removeOverlay(this.marker());
       this.marker_ = null;
       gMap.addOverlay(this.marker(G_DEFAULT_ICON));
       // Add our result to the saved set
       document.getElementById("selected").appendChild(this.selectedHtml());
       // Remove the old search result from the search well
       this.resultNode_.parentNode.removeChild(this.resultNode_);
     }
   }
   // Returns the HTML we display for a result before it has been "saved"
   LocalResult.prototype.unselectedHtml = function() {
     var container = document.createElement("div");
     container.className = "unselected";
     container.appendChild(this.result_.html.cloneNode(true));
     var saveDiv = document.createElement("div");
     saveDiv.className = "select";
     saveDiv.innerHTML = "Save this location";
     GEvent.bindDom(saveDiv, "click", this, function() {
       gMap.closeInfoWindow();
       this.select();
       gSelectedResults.push(this);
     });
     container.appendChild(saveDiv);
     return container;
   }
   // Returns the HTML we display for a result after it has been "saved"
   LocalResult.prototype.selectedHtml = function() {
     return this.result_.html.cloneNode(true);
   }
   // Returns true if this result is currently "saved"
   LocalResult.prototype.selected = function() {
     return this.selected_;
   }
   GSearch.setOnLoadCallback(OnLoad);

//]]> </script> <!-- <body onunload="GUnload()"> --> <h1>My Favorite Places</h1> <p>Search for locations on the map below and save them to your list of favorite places.</p> <div id="placelist"> <div id="search"> <div id="searchform"></div> </div> <div id="results"> <div id="searchwell"></div> </div> <div id="map"></div> <div id="selected"></div> </div>

</html>