【转贴】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
- Setting the Link Target
- Custom Search Form Hint Text
- Idle and Search Completion Callbacks
- Marker Html Generation and Markers Set CallbacksNew!
- Setting Focus on the Search Control
- First Result Info Window Suppression
- Suppress Default Zoom on Search Complete
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 theGlocalSearch
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. TheonMarkersSetCallback
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 thefocus()
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 thesuppressZoomToBounds
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.
<!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>