Simple introduction to using Google (Local) Search API_javascript skills

It took me two days to use Google’s API to make such a small thing. In fact, the actual implementation code is not much, only a dozen lines. The time-consuming work is understanding the functions of each API and debugging JavaScript.

Let me briefly introduce some of the functions I used this time.

•Constructor google.search.LocalSearch()

This actually creates a LocalSearch Service. This Service, like other Services (News, Blog, Web), is used by SearchControl. These Services determine the capabilities of SearchControl.

•Set the search structure type of LocalSearch

localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)

This means that there are no business results in the search results, only kml and geocode results

•Set the search scope of LocalSearch

localSearch.setCenterPoint("Beijing");

•google.search.SearcherOptions()

Set the properties of Search Service (Searcher) and use it as an attribute of SearchControl.addSearcher(). The following options are available:

1. Set the display mode of results
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

2. The text displayed when there are no search results in the profile

• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);

3. Set the position where the results are displayed

•searcherOptions.setRoot(resultCanvas);

•new google.search.DrawOptions();

Set the display mode of Google Search Control

•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)

Set the display mode to tabbed mode, that is, each Searcher will be displayed like tabs

•drawOptions.setInput(document.getElementById("input"));

Change the default value of the search input box to a user-defined input box

Return the user-selected search results as a corresponding GResult object. For example, the GResult of LocalSearch is a GLocalResult.

It took me a long time to find this option. There are two reasons. First, there are few people using it and there are few documents. Second, it took me a long time to understand the English document I read. In fact, it takes longer to read the Chinese document, I think.

•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);

By the way, paste the code of LocalSearchKeepHandler, whose parameter is the automatically returned GResult object.

Copy code The code is as follows:

function LocalSearchKeepHandler(result) {
var from = document.getElementById("from");
alert("result.tilte = " result.title);
from.value = ProcessString(result.title);
alert("from.value = " from.value);
// alert(result.title);
}

Just post this code as a whole for easy reading

Copy code The code is as follows:

google.load("search", "1", {"language": "zh-CN"});
 function initialize() {
     //LocalSearch Object used to create a local search service for the maps
        var localSearch = new google.search.LocalSearch(); 
        //restrict the local search resutls to kml and geocode results only, no business ones
        localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS);            
        // Set the Local Search center point
  localSearch.setCenterPoint("北京"); 
  //It's about local search, which are used to set where the results will appear, a param of options
  var resultCanvas = document.getElementById("resultCanvas");      
  //options: open, alternate root
  var searcherOptions = new google.search.SearcherOptions();
  //show many results
  searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
  //no results message
  searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
  //options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//web, local... in a tab show
  searcherOptions.setRoot(resultCanvas); //show the results in another place--

     //SearchControl Object used to create a search service which will include a local search service                  
  var searchControl = new google.search.SearchControl(null);
  searchControl.addSearcher(localSearch, searcherOptions); 
  searchControl.addSearcher(new google.search.WebSearch());
  searchControl.addSearcher(new google.search.NewsSearch());
  searchControl.addSearcher(new google.search.BlogSearch());
  //draw options and set it to a tabbed view,
  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
  //make the searchControl return a result:GResult
  searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);//keeping a search result
  //this option is used to set the search box position in a DOM tree.
  //drawOptions.setSearchFormRoot(document.getElementById("drawOptions"));
  //set the input box to a user defined element 
  //drawOptions.setInput(document.getElementById("input"));
  // tell the search box to draw itself and tell it where to attach
 // searchControl.draw(document.getElementById("searchBox"), drawOptions);//Here I changed fromaddress and toaddress to search, a new place
  //another user defined input box
  drawOptions.setInput(document.getElementById("input2"));
  searchControl.draw();
  /**The codes below is about google Ajax Map Search API
  //this code segment is used to add a sidebar to show the results of the search
  //I wonder why no 'var' exists here
   optinos = new Object();
   options.resultList = resultCanvas;
   options.resultFormat = "multi-line1";
   var lsc2 = new google.elements.LocalSearch(options);
   map.addControl(lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
   */
        }
 google.setOnLoadCallback(initialize);

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn