[Go] Using the Google Maps API search feature

Use the Google Maps API search feature

Due to the working relationship, the recent two days to study the next Google Map API, to achieve the map location search function, display search results and can be marked down on the map, just started to consider the use of 51ditu, in terms of keyword segmentation and other aspects of search, finally decided to use Google Maps, has always been so worship Google's great God, this time to experience a turn ~

Navigate to a point in the Google Maps marker

In the beginning is the implementation of Google Maps to locate a bit of functionality, API interface in the GMAP2 class has a setcenter (CENTER:GLATLNG, Zoom?:number, Type?:gmaptype) method can set the map center, The GLATLNG parameter is a geographic point of latitude and longitude, zoom and type are optional parameters for the zoom level and map types, and glatlng latitude and longitude coordinate points can be obtained by Gclientgeocoder class Getlatlng method. The Getlatlng method passes in the address keyword parameter, passing in the callback function the first latitude and longitude coordinate point found, or null if no anchor is found, so that we can create a gmarker tag and display it on the map based on the glatlng latitude and longitude coordinate point.

Search to locate multiple points

According to the keyword positioning there is a problem, if the search keyword on the map has more than one point, then the return of the first latitude and longitude coordinate point is not necessarily the address you are looking for, this time it is necessary to return multiple search results points, and then let the user choose. At first I thought the Google Maps API did not provide an interface to return multiple search results, so that the old ping a strong silver ran to the Google AJAX search API, but there is a implementation of the search to return multiple results of the example. Looking closely at the Google Maps API today and discovering that it itself is a search function, I think Ajax map search solution is just a custom implementation that encapsulates the class. In fact, you can specify the Gmapoptions parameter when creating an GMAP2 instance, where the Ggooglebaroptions property is the option to search for the control, and then the Enablegooglebar () method will enable the integrated search control for the map. The Ggooglebaroptions class attributes are as follows:

Properties	type	Description
Showonload	Boolean	When set to true, this property displays the search box in Googlebar (if the control is enabled and the map is loaded). By default, the search box in a control is hidden and expands only when you click the magnifying glass of the control. (Starting from 2.95)
LinkTarget	Ggooglebarlinktarget	This property allows you to specify the link target in the search results that are embedded googlebar. The default value is G_googlebar_link_target_blank, which specifies that the links will open in a new window. (Starting from 2.95)
Resultlist	Ggooglebarresultlist or Element	This property allows you to specify the style of the Googlebar search results list, which may be one of the following styles: G_googlebar_result_list_inline (default style) puts the result list in the table on the search box; g_googlebar_ Result_list_suppress replaces the list with the next/Previous button, and element that passes the block-level DOM puts the list in the container of your choice (usually the <div> element). (Starting from 2.95)
Suppressinitialresultselection	Boolean	When the system finishes searching in Googlebar, the first result (which is the default behavior) is displayed in its Information window, which suppresses this behavior. (Starting from 2.95)
Suppresszoomtobounds	Boolean	This property also suppresses the action to automatically pan and zoom to fit the result set after the search in Googlebar is complete. (This property suppresses the default behavior.) ） (Starting from 2.95)
Onidlecallback	Function	This property specifies the callback function to invoke when Googlebar completes the search and the search results are closed. (Starting from 2.95)
Onsearchcompletecallback	Function	This property specifies the callback function to invoke when Googlebar completes the search and the search results are fully displayed, passing the Glocalsearch object associated with the search control to the function. Call the callback function before the result is placed on the map or in the results list. (Starting from 2.95)
Ongeneratemarkerhtmlcallback	Function	This property allows you to specify the callback function to invoke when opening the information window of a search result tag. Gmarker, generated HTML strings, and Glocalsearchresult should be passed to the function successively, and the function must return the modified HTML string to be displayed in the Information window. (Starting from 2.95)
Onmarkerssetcallback	Function	This property allows you to specify the callback function to invoke when Ggooglebar finishes creating the tag and placing the tag on the map. A Table object array {result:glocalsearch, marker:gmarker} must be passed to the function. (Starting from 2.95)

Click on the search Results Point Information window "dislocation" problem

The problem is this, when you click Back to the search results list, the map will be positioned to the current point, and will be labeled with the Information window, but do not know whether Google is to open the Information window is completely visible or what special judgment, will make the current label this point can not be centered in the map, Causes the callout Point Offset Information window to appear incomplete. Since the search results are directly assigned to the Resultlist element container to receive storage, I do not know what to do with Google Maps in the Click event, and may view the Gmlocalsearch.js source to learn some details. Back to the problem, I just need to get the latitude and longitude coordinate point of the click to center the map, fortunately, the search has a onsearchcompletecallback completion of the callback function, and pass the search results parameters come over, then I will be in each search to complete the results in an array variable, Then click on the search results list to get the ID index number of the click Element, so you can get the latitude and longitude coordinates of the current click, and then call SetCenter can be based on the coordinates point center map, because there is information window, sitting punctuation Center does not necessarily make the information window completely visible, but should be lower than some, Call Map.panby (New Gsize (-40,100)) method to animate the specified distance (left: 40px, bottom: 100px), and be aware that many of the methods in the Google Maps API are animated, It may be implemented by settimeout to delay execution, so I sometimes use settimeout to delay execution, or some of the values I set will be overwritten by Google's settimeout deferred execution.

Sample source code:

<div id= "Googlesearch" ></div>
<div id= "Googleresult" style= "width:490px; MARGIN:4PX 0; " ></div>
<div id= "GoogleMap" style= "width:490px; height:300px; Border:solid 1px #ccc ">loading...</div>
<link href= "Http://www.google.com/uds/css/gsearch.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css" rel= "stylesheet" type= "text/css "/>
<script src= "Http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_ JVNK0OJI7XSOSDVG8KKPE1-M51RBRVYUGHUYMXQ-I1QFUNH94QXWIA6N4U6MOUMMBA&AMP;HL=ZH-CN "type=" Text/javascript ">< /script>
<script type= "Text/javascript" >
var map = null;
var geocoder = null;
var mapready = false;
var mapresult = [];
function Initialize () {
if (gbrowseriscompatible ()) {
    
Search Result Elements
var Resultelem = document.getElementById ("Googleresult");
Map container Elements
var Mapelem = document.getElementById ("GoogleMap");
        
Specify instanced map Options
var options = {
Size:new gsize (338,353),
Googlebaroptions: {
Onsearchcompletecallback:function (searcher) {
Set results
Mapresult = Searcher.results;
Number of statistical results
document.getElementById ("sum"). InnerHTML = Searcher.results.length;
Automatically center the first result when the search is complete
SetTimeout (function () {autoCenter (0);},1000);
},
Resultlist:resultelem,
Maxcursorpages:5,
Suppresszoomtobounds:true
}
};
          
Map = new GMap2 (Mapelem, Options);
        
Pan and zoom controls (upper-left corner)
Map.addcontrol (New Glargemapcontrol ());
Scale control (lower-left corner)
Map.addcontrol (New Gscalecontrol ());
        
Create a thumbnail control (lower-right corner)
var overviewmap = new Goverviewmapcontrol ();
Map.addcontrol (OVERVIEWMAP);
Minimize hidden thumbnail controls
SetTimeout (function () {overviewmap.hide ();},1000);
        
Geocoder = new Gclientgeocoder ();
        
Enable the integrated search control Googlebar for the map (this sentence order location cannot be modified)
Map.enablegooglebar ();
        
Auto Center result Point
Window.autocenter = function (Resultindex) {
var result = Mapresult[resultindex];
if (result) {
SetTimeout (function () {
To construct a geographic coordinate point expressed in longitude and latitude
var point = new Glatlng (RESULT.LAT,RESULT.LNG);
Set Center point
Map.setcenter (point),//map.panto (point);
Animate the specified distance (left: 40px, bottom: 100px)
Map.panby (New Gsize (-40,100));
},
500
);
}
}
        
Click the search results event
Resultelem.onclick = function (e) {
E = Window.event | | E
var target = E.target | | E.srcelement;
var Trelem = target;
Gets the TR layer node of the bubbling event
while (Trelem && trelem.tagname!= "TR")
{
if (trelem.tagname== "TABLE") break;
Trelem = Trelem.parentnode;
}
if (trelem!=null)
{
Get the result index of a click
var resultindex = trElem.id.substring (trelem.id.length-1);
Auto Center
AutoCenter (Resultindex);
}
}
    
Initialize Location
var address = "Wuhua Building, No. 22nd, Tianhe District Road, Guangzhou, Guangdong province";
if (Geocoder) {
GEOCODER.GETLATLNG (
Address
function (point) {
if (point) {
Map.setcenter (Point, 18);
var marker = new Gmarker (point);
Map.addoverlay (marker);
marker.openinfowindowhtml (address);
SetTimeout (function () {Map.panby (New gsize (-10,120));},2500);
}
}
);
}
        
Get Search Control
var searchbar = Mapelem.lastchild;
Clear Style
SearchBar.style.cssText = "";
Change the location of the search control element
document.getElementById ("Googlesearch"). AppendChild (Searchbar);
        
}
}
    
Window.onload = function () {
Initialize ();
Document.body.onunload = Gunload;
Mapready = true;
}
</script>

[Go] Using the Google Maps API search feature