Google map API usage explanation (19th) -- Implement the Google map local search box (on)

1. Use gmap2 controls in the Google map API

When talking about the default control and gmap2 settings on the map, I mentioned the Google map local search bar control. It is actually very easy to add this control to the map, you do not need to call gmap2.addcontrol (). You only need one sentence:

Map. enablegooglebar ();

In this way, you can add this search box in the lower left corner of the map and replace the original Google logo image. Currently, you can use this search box to search for two types of data:

1) place names;

2) commercial data provided by Google, such as "Restaurants ". By default, the search is within the range of the currently displayed map. The specific search result is determined by the type of the above search result based on the keyword you enter. There is no special method. After the search results are returned, all results are automatically marked on the map, and the search results are displayed in the DOM format. As for the DOM format, you can see it.

The class corresponding to the custom search bar is ggooglebaroptions, which has no constructor and corresponds to an object variable. The usage is similar to using gmapoptions to customize Google Maps, however, ggooglebaroptions is used as an item in gmapoptions to create a gmap2 object. If you know the Google Ajax search API, you will be familiar with the following settings, because this local search bar is an encapsulation of glocalsearchcontrol in Ajax search.

Let's take a look at several basic settings:

1) showonload

This is a Boolean item and determines the display status of the search bar after loading. The default value is false, indicating that the search bar is closed and the input box is not displayed, if you want to remind the user that there is an input box to search, you can set this item to true, that is, {showonload: true };

2) linktarget

Simply put, this is the target attribute value of each record corresponding to the link in the search result. The four optional values are equivalent to the g_googlebar_link_target of target = "Blank _" by default, and other values include parent, self, top, and I will not list the exact parameters, which are included in the development documentation. However, this item is basically unnecessary and does not need to be set;

3) resultlist

Specify the DOM display style of the search result. By default, the display is in the form of a list (g_googlebar_result_list_inline). You can also add a pair of direction arrows to let you read them one by one, as shown in the map on the right. If your map space is relatively small, you can use the latter one. set {resultlist: g_googlebar_result_list_suppress };

4) suppressinitialresultselection

This parameter is used to specify whether to automatically select the first search result and open its information window after the search is complete. The default value is false, which is to open the Information Window of the first record. If not required, specify {suppressinitialresultselection: true };

5) suppresszoomtobounds

According to the document, this is used to set whether the map needs to be automatically scaled to display all the marked points after the search is complete. The default value is false, which is not scaled, however, I found that no matter what the search results are, the map will not be scaled. Therefore, this item is temporarily ignored.

6) searchformhint

This is not listed in the document, but it can also be used to set the prompt when the input box is not activated. the default option is "Search map ", you can also set your own prompt, for example: {searchformhint: "Hi, here you can directly search for a map "}

Let's take a look at several callback functions used to set search operations, similar to event listening, which can be used in many articles:

1) onidlecallback

This is called when the search result is cleared, that is, after you click the "clear result" link on the search result, i'm not sure whether to call this function after this search result is returned and the previous search result is automatically cleared. It seems to be interesting to see the development documentation.

2) onsearchcompletecallback

A glocalsearch object is passed as a parameter when the search result is obtained but not added to the map. glocalsearch is a class defined in the Google Ajax search API, for more information, see the document first.

3) ongeneratemarkerhtmlcallback

Before opening the information window for a search record, it will be called and input three parameters: marker, HTML, and result, which correspond to the mark (gmarker) of the record on the map respectively) fill in the HTML string of the Information Window and the corresponding search result (glocalresult ). The defined callback method must return a DOM object, which is used in the open information window. Therefore, by setting this item, you can change the default content in the search result information window. In the map on the right, the default information window content is changed. The links "from here" and "from here" are removed, and a static map is added.

4) onmarkerssetcallback

This is called before all the result tags are created but not added to the map. The input parameter is a search result array results, and each item in the array corresponds to a search record, including latlng, marker, result, coordinate glatlng of the corresponding result, Mark gmarker, and result record glocalresult. At this time, the display list of the result has been created. Therefore, if you want to modify the actual result, try this setting.
(To be continued)