Google map development series (12)-custom googlebar-local search bar for Google Maps

When talking about the default control and gmap2 settings on the map, I mentioned the Google map local search bar control. It is 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 Name;

2. Commercial data provided by Google, such as "Restaurants", is searched within the currently displayed map by default;

The specific search result is the above type determined by 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:

1Onidlecallback

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.

3Ongeneratemarkerhtmlcallback

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 this realistic result, try this setting.

Add some instructions. The glocalresult mentioned above is also a class defined in the Google Ajax search API. It is used as an object variable without a constructor. For more information, see the document, the following describes the main attributes of the class:

. Title,. titlenoformatting,. Lat,. lng,. streetaddress,. City,. Country,. phonenumbers [],. staticmapurl

Google map development series (13th)-use map API to implement custom overlay Layer

Unlike the controls on a map, the overlay layer on a map is bound to the coordinates of a certain longitude and latitude, and can follow the scaling and drag of the map to move the DOM original, the gmarker, gpolyline, and ginfowindow defined in the map API document belong to the overlay layer. The traffic information icon displayed on the map on the right is an overlay layer.

Let's take a look at the Hello world code:

VaR myoverlay = function (latlng _) {</P> <p> This. latlng = latlng _; </P> <p >}; </P> <p> myoverlay. prototype. initialize = function (MAP _) {</P> <p> This. map = map _; </P> <p> var label _ = document. createelement ("Div"); </P> <p> var container _ = map _. getpane (g_map_float_pane); </P> <p> container _. appendchild (Label _); </P> <p> label _. innerhtml = "<span style =" color: # ff0000; Background-color: # ffffff; "mce_style =" color: # F F0000; Background-color: # ffffff; "> Hello world! </Span> "; </P> <p> label _. style. position = "absolute"; </P> <p> This. label = label _; </P> <p> This. redraw (); </P> <p >}</P> <p> myoverlay. prototype. redraw = function () {</P> <p> var position = This. map. fromlatlngtodivpixel (this. latlng); </P> <p> This. label. style. left = position. X + "PX"; </P> <p> This. label. style. top = position. Y + "PX"; </P> <p >}</P> <p> myoverlay. prototype. remove = function () {</P> <p> This. label. parentnode. removechild (this. label); </P> <p >}</P> <p>

In the above Code, myoverlay is a custom overlay layer. You can create a myoverlay instance when necessary, and then use map. addoverlay () can add this stack layer on the map. The overlay layer adds a hello World text to the given position (the center point when the map is loaded). Then, no matter how you drag and scale the map, the location of the text on the map changes with the map.

The following code is explained in detail:

VaR myoverlay = function (latlng _){

This. latlng = latlng _;

};

Declare the constructor of the myoverlay class. To create an instance of this class, you must specify a coordinate object of the glatlng type as a parameter.

Myoverlay. Prototype = new goverlay ();

Declare that this class inherits from goverlay

The following initialize, redraw, and remove all implement the abstract methods defined in the goverlay interface, these methods are automatically called when the object of the myoverlay class is initialized, the map is dragged, scaled, and deleted from the map.

Overlay is also a DOM element, so what needs to be done in the initialize method is to define this Dom element and add it to a proper place. Use the getpane method of the gmap2 object (passed as a parameter) to obtain the layer to attach to overlay (this layer can be divided into seven different layers according to the different Z-index, I will not list it. You can check the gmappane class in the document. This is the DOM container to which overlay is attached (different from the DOM container of the gmap2 object ), define the overlay style and content, and add it to the layer just obtained as a child element.

In the initialize method, you must note that the position style attribute of the DOM element of the stack layer must be set to absolute, and the redraw method must be explicitly called, in order to ensure that the position is correctly displayed when the stack layer is loaded for the first time.

The redraw method can re-calculate the coordinates of the stack layer and re-set the display position of the stack layer after the map position changes. The key point is to use gmap2.fromlatlngtodivpixel () method to obtain the absolute Dom coordinates of the stack layer. If you do not quite understand the coordinates, you can look at the map coordinate system I previously summarized.

For the remove method, the map will automatically call this method when calling removeoverlay to delete your overlay layer from the map.

Here is just an example of overlay for adding simple text. If you need to add richer text and images, or you need to listen to some events, such as clicking and double-clicking, you only need to make more declarations and controls on the overlaly DOM elements in the initialize () method, which is no different from defining a DOM element elsewhere in the web page.