【转贴】Google AJAX Search API

转自：
http://www.google.com/uds/solutions/localsearch/reference.html#_resultlist


Instructions for adding this to your site

Assuming you already have a working maps application, adding the control is a simple two step process (alternatively, you can always start with "hello world" starter and then customize the resulting code.)

Step 1 - Load AJAX Search API and Local Search Control for Google Maps

The first step is to load the Google AJAX Search API and the Local Search Control code and style sheet into your application. The AJAX Search API uses the same key system that Google Maps API uses, so just use your maps key where required. 

// Load the Code
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=USE-YOUR-MAPS-KEY"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
type="text/javascript"></script>
// Load the Style Sheets
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>

 

Step 2 - Create a Local Search Control

The next step is to create a Local Search control and add it to your map. 

// create your map
var map = new GMap2(document.getElementById("map"));
// create a local search control and add it to your map
map.addControl(new google.maps.LocalSearch());

Customizing the Local Search Control and Other Advanced Features

The Local Search Control for Google Maps contains a number of options that you control.

Result List Format and Placement Control

By default, when a search completes, the search results are placed on your map and they are also listed in tabular form above the search form input. By using the opt_options argument to the control, you can specify this default behavior, you can suppress the tabular display of the search results, or you can provide us with a container element and we will place the tabular results within your container. The following snippets and samples demonstrate these options.

Suppressed Tabular Result List

The following snippet and sample demonstrates how to suppress the tabular result list. 
<script type="text/javascript">
// request that tabular search results should be suppressed
var options = {
resultList : google.maps.LocalSearch.RESULT_LIST_SUPPRESS
};
map.addControl(new google.maps.LocalSearch(options));
</script>

Default Tabular Result List

The following snippet and sample demonstrates how to request the default tabular result list. 
<script type="text/javascript">
// no option needed, this is the default
map.addControl(new google.maps.LocalSearch());
// BUT, If you want to, you can explicityly request the default
var options = {
resultList : google.maps.LocalSearch.RESULT_LIST_INLINE
};
map.addControl(new google.maps.LocalSearch(options));
</script>

External Tabular Result List

The following snippet and sample demonstrates how to request that the tabular result list be displayed in a container of your choice. 
<script type="text/javascript">
// request that tabular search results be displayed in an external container
var options = {
resultList : document.getElementById("results")
};
map.addControl(new google.maps.LocalSearch(options));
...
<div id="results">Loading...</div>
</script>

Setting the Link Target

This option allows you to set the link target used for links embedded in the Local Search Control. The default value is GSearch.LINK_TARGET_BLANK which specifies that will open in a new window. To change this behavior, simply use the linkTarget property of options and supply a value of GSearch.LINK_TARGET_SELF to open links in the current new window, GSearch.LINK_TARGET_BLANK to open links in a new window, GSearch.LINK_TARGET_TOP to open links in the topmost frame, GSearch.LINK_TARGET_PARENT to open links in the parent frame or to replace the current frame. You can also specify any other value which will be used as the value of the target property on all links. 

/**
* open links in the current window
*/
var options = {
linkTarget : GSearch.LINK_TARGET_SELF
};
map.addControl(new google.maps.LocalSearch(options));

Custom Search Form Hint Text

When the search control is in its idle state, the search form normally contains localized search hint text, e.g.: "search the map". Using this option, you can supply your own custom hint text. 

var options = {
searchFormHint : "Example Searches: Hotels in New York City"
};
map.addControl(new google.maps.LocalSearch(options));

Idle and Search Completion Callbacks

In some cases, its useful for an application to know when a search has completed and when the search control goes idle. For instance, when the search control goes idle, the application may want to recenter the map. When a search completes, an application may want to alter the zoom level of the map. These are easily accomplished by using the search control callbacks.

Search Control Idle Callback

The search control idle callback is called when the search control finishes its initial load and whenever search results are dismissed. The following snippet demonstrates how to use this. 
// request an "on idle" callback. This is called when a search is dismissed and
// when the search control initially loads
var options = {
onIdleCallback : function() { alert("search control is idle");}
};
map.addControl(new google.maps.LocalSearch(options));

Search Complete Callback

The search complete callback is called whenever a search completes. It is passed the GlocalSearch object associated with the search control. It is called before results are placed on the map or into the tabular results list. The following snippet demonstrates how to use this. 
// request an "on search complete" callback. This is called when a search completes
// and before results are placed on the map or tabular tabular result list
var options = {
onSearchCompleteCallback : function(searcher){
alert(searcher.results.length + " results");
}
};
map.addControl(new google.maps.LocalSearch(options));

Marker Html Generation and Markers Set CallbacksNew!

The callbacks listed above give your application basic notifications that a search has completed and that the user is done using the control. The marker oriented callbacks described in this section are designed to allow you to participate in the html generation phase of a search result's info window as well as providing you with direct access to the markers once they have been placed on the map.

Generate Marker HTML Callback

When the info window for a marker representing a search result is opened, this callback is executed in order to allow you to participate in the html generation. For instance, suppose you want to add a link to the info window, or add a photo, or whatever makes sense for your application. The following snippet shows how to do this. 
// request an "on generate marker html" callback. This is called during the open of an info window.
var options = {
onGenerateMarkerHtmlCallback : extendMarker
};
map.addControl(new google.maps.LocalSearch(options));
...
function extendMarker(marker, html, result) {
// extend the passed in html for this result
myStuff = document.createElement("div");
div.innerHTML = "Bookmark This Result...";
html.appendChild(div);
return html;
}

Markers Set Callback

The Search Complete callback calls your application before the search results are converted into markers and placed on the map. This allows your application to inspect and process the raw results. The onMarkersSetCallback calls your application after the search complete callback, and after the results are processed and placed on the map. This callback allows you to inspect and process the markers, etc. The sample below demonstrates this callback. Normally, after a search completes, the first marker's info window is opened. Using this callback, you can open an alternate info window (maybe the info window of one of your partners, etc.) 
// request an "on markers set" callback.
var options = {
onMarkersSetCallback : markersSet
};
myLocalSearchControl = new google.maps.LocalSearch(options);
map.addControl(myLocalSearchControl);
...
function markersSet(markers) {
// note: markers is an array of LocalResult
if (markers.length > 1) {
// grab the title of the 2nd result object
// if it matches starbucks, then alert
var title = markers[1].result.titleNoFormatting;
if (title.search(/starbucks/i) >= 0) {
alert(markers[1].result.titleNoFormatting);
}
}
}

Setting Focus on the Search Control

Applications may use the focus() method on the search control to force focus to the search form's input box. 
var searchControl = new google.maps.LocalSearch();
map.addControl(searchControl);
...
searchControl.focus();

First Result Info Window Suppression

Normally, when a search completes, the first search result is selected, the map is panned to this result, and the info window associated with the result is opened. This option allows an application to suppress this initial info window open. 
// request the the initial search result info window should not be
// auto-opened
var options = {
suppressInitialResultSelection : true
};
map.addControl(new google.maps.LocalSearch(options));

Suppress Default Zoom on Search CompleteNew!

Normally, when a search completes, the map is re-positioned and zoomed in so that it shows all of the results. Applications can disable this move/zoom operation by setting the suppressZoomToBounds option to false. The HotLinks sample demonstrates this. The other interesting thing this sample does is demonstrate how to use the search control's .execute() method to do initiate a search from your own code. Note the Featured Locations links beneath the map. 
// instruct the system to NOT zoom on search complete
var options = {
suppressZoomToBounds : true
};
map.addControl(new google.maps.LocalSearch(options));

The "Hello World" of the Local Search Control for Google Maps

The following page demonstrates a complete page which uses the Local Search Control for Google Maps. You can start with this simple page, change YOUR-KEY to the value of your key and be up and running in seconds.

Warning: Make sure you signup for your own key. Do not use the key value of "YOUR-KEY" on your pages. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Local Search Control for Google Maps - default.html</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-KEY" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
#map {
border : 1px solid #979797;
width : 100%;
height : 600px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch());
}
}
GSearch.setOnLoadCallback(load);
//]]>
</script>
</head>
<body onunload="GUnload()">
<div id="map"></div>
</body>
</html>
posted @ 2008-02-15 09:37  N/A2011  阅读(930)  评论(0)  编辑  收藏  举报