Introduction:
Google has its own API for searching nearby location to a
given place. The
Google Places JavaScript library's functions enable your application to search
for Places (defined in this API as establishments, geographic locations, or
prominent points of interest) contained within a defined area, such as the
bounds of a map, or around a fixed point.
The Places service is a self-contained library, separate
from the main Maps API JavaScript code. To use the functionality contained
within this library, you must first load it using the
libraries parameter in the Maps API bootstrap URL:
Nearby Search Requests
A Nearby Search lets you search for Places within a specified area by keyword or type. A Nearby Search must always include a location, which can be specified in one of two ways:
- a
LatLngBounds. - a circular area defined as the combination of the
locationproperty — specifying the center of the circle as aLatLngobject — and a radius, measured in meters.
A Places Nearby search is initiated with a call to the
PlacesService's nearbySearch() method, which will return an array of PlaceResult objects. Note that thenearbySearch() method replaces the search() method as of version 3.9.service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
This method takes a request with the following fields:
- Either of:
bounds, which must be agoogle.maps.LatLngBoundsobject defining the rectangular search area; or- a
locationandradius; the former takes agoogle.maps.LatLngobject, and theradiustakes a simple integer, representing the circle's radius in meters. The maximum allowed radius is 50 000 meters.
keyword(optional) — A term to be matched against all available fields, including but not limited to name, type, and address, as well as customer reviews and other third-party content.name(optional) — A term to be matched against the names of Places. Results will be restricted to those containing the passed name value. Note that a Place may have additional names associated with it, beyond its listed name. The API will try to match the passednamevalue against all of these names; as a result, Places may be returned in the results whose listed names do not match the search term, but whose associated names do.rankBy(optional) — Specifies the order in which results are listed. Possible values are:google.maps.places.RankBy.PROMINENCE(default). This option sorts results based on their importance. Ranking will favor prominent places within the set radius over nearby places that match but that are less prominent. Prominence can be affected by a Place's ranking in Google's index, the number of Place Bumps from your application, global popularity, and other factors. Whengoogle.maps.places.RankBy.PROMINENCEis specified, theradiusparameter is required.google.maps.places.RankBy.DISTANCE. This option sorts results in ascending order by their distance from the specifiedlocation(required). Ranking results by distance will set a fixed search radius of 50km. A custom radius and/or bounds is not supported in conjunction withRankBy.DISTANCE. Whendistanceis specified, one or more ofkeyword,name, ortypesis required.
types(optional) — An array containing one or more of the supported types listed in the Google Places API: Supported Place Types list. The service will return results that match any of the specified types.
Example Screen Shots
1 1.)
Default UI
2 2.)
Search result for ’Food’
Complete Code
Following is the
complete code
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="NearbySearch_ByType.aspx.cs"
Inherits="GoogleMaps_App_1.NearbySearch_ByType"
%>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Place
Search</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<style>
#map {
height: 400px;
width: 600px;
border: 1px solid #333;
margin-top: 0.6em;
}
</style>
<script>
var map;
var infowindow;
var pyrmont;
function initialize() {
pyrmont = new
google.maps.LatLng(-33.8665433, 151.1956316);
map = new
google.maps.Map(document.getElementById('map'),
{
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
}
function btnSearch_onclick() {
initialize();
var request = {
// location: pyrmont,
location:new
google.maps.LatLng(-33.8665433, 151.1956316),
radius: 500,
// types: ['food']
types: [txtPlaceType.value]
};
infowindow = new
google.maps.InfoWindow();
var service = new
google.maps.places.PlacesService(map);
service.nearbySearch(request, GetResults);
}
function GetResults(results, status) {
if (results.length > 0) {
if (status ==
google.maps.places.PlacesServiceStatus.OK) {
for (var
i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
else {
alert("No result.");
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new
google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click',
function () {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load',
initialize);
</script>
</head>
<body>
<div id="Search">
<label id="lblSearchLabel"
>Type</label>    
<input id="txtPlaceType" type="text" style="width: 100px; height: 20px;" />
   
<input id="btnSearch" type="button" value="Search" onclick="return btnSearch_onclick()" />
</div>
<div id="map"></div>
</body>
</html>
Hi,is this possible to use Google Places Nearby Search to search my own database?E.g. i would like to search my own database for restaurants inside London area.Is this possible?thanks
ReplyDeleteHi...this is not possible that google service search through your own database. v
DeleteBut if you have such db then you can write your own function taking some place latitude and longitude aa input and returning desired results ie the nearby places.
Hi,
ReplyDeleteThanks for the code. It solved my problem.