Google Map Api and GOOGLE Search Api integration implementation code_javascript skills

To integrate the GOOGLE MAP API and the GOOGLE Search API, I wrote a class in an object-oriented way. By passing in a longitude and latitude, it automatically obtains nearby relevant information through GOOGLE LOCAL SEARCH. For example, restaurants, attractions, etc. are in turn marked on the map and can be displayed in any container.
The following is the source code:

Copy the code The code is as follows:

/*
*Author:karry
*Version:1.0
*Time:2008-12-01
*KMapSearch class
* Combines GOOGLE MAP and LocalSearch. You only need to pass in the MAP longitude and latitude values, you can take out the relevant local search content near the longitude and latitude, mark it on the map, and display the search results in the specified container
*/

(function( ) {
var markers= new Array();
var KMapSearch=window.KMapSearch= function(map_, opts_) {
this.opts = {
container:opts_.container || "divSearchResult ",
keyWord:opts_.keyWord || "Restaurant",
latlng: opts_.latlng || new GLatLng(31, 121),
autoClear:opts_.autoClear || true,
icon :opts_.icon || new GIcon(G_DEFAULT_ICON)
};
this.map = map_;
this.gLocalSearch = new google.search.LocalSearch();
this.gLocalSearch.setCenterPoint( this.opts.latlng);
this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
this.gLocalSearch.setSearchCompleteCallback(this, function() {
if (this.gLocalSearch.results) {
var savedResults = document.getElementById(this.opts.container);
if (this.opts.autoClear) {
savedResults.innerHTML = "";
}
for (var i = 0 ; i < this.gLocalSearch.results.length; i ) {
savedResults.appendChild(this.getResult(this.gLocalSearch.results[i]));
}
}
}) ;
}
KMapSearch.prototype.getResult = function(result) {
var container = document.createElement("div");
container.className = "list";
var myRadom =(new Date()).getTime().toString() Math.floor(Math.random()*10000);
container.id=myRadom;
container.innerHTML = result.title "< br />Address: " result.streetAddress;
this.createMarker(new GLatLng(result.lat, result.lng), result.html,myRadom);
return container;
}
KMapSearch.prototype.createMarker = function(latLng, content)
{
var marker = new GMarker(latLng, {icon:this.opts.icon,title:this.opts.title});
GEvent .addListener(marker, "click", function() {
marker.openInfoWindowHtml(content);
});
markers.push(marker);
map.addOverlay(marker);
}
KMapSearch.prototype.clearAll = function() {
for (var i = 0; i < markers.length; i ) {
this.map.removeOverlay(markers[i]) ;
}
markers.length = 0;
}
KMapSearch.prototype.execute = function(latLng) {
if (latLng) {
this.gLocalSearch.setCenterPoint(latLng );
}
this.gLocalSearch.execute(this.opts.keyWord);
}
})();

Usage:

Copy code The code is as follows:

var myIcon = new GIcon(G_DEFAULT_ICON);
myIcon.image = "canting.png";
myIcon.iconSize = new GSize(16, 20);
myIcon.iconAnchor = new GPoint(8, 20);
myIcon.shadow = "";
var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"Restaurant"});
mapSearch.clearAll();
mapSearch.execute();

Click here to view a demo example: Longitude and latitude query integrates local search