User:Bill Flanagan/AjaxSearchExamples
<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&v=2" type="text/javascript"></script>
<script src="../api?file=uds.js&v=1.0&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>
