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:

Add following in the Head section.



See the Libraries Overview for more information.

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:
  • LatLngBounds.
  • a circular area defined as the combination of the location property — specifying the center of the circle as a LatLng object — 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 a google.maps.LatLngBounds object defining the rectangular search area; or
    • location and radius; the former takes a google.maps.LatLng object, and the radius takes 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 passed name value 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. When google.maps.places.RankBy.PROMINENCE is specified, the radius parameter is required.
    • google.maps.places.RankBy.DISTANCE. This option sorts results in ascending order by their distance from the specified location (required). Ranking results by distance will set a fixed search radius of 50km. A custom radius and/or bounds is not supported in conjunction with RankBy.DISTANCE. When distance is specified, one or more of keywordname, or types is 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>   &nbsp &nbsp
    <input id="txtPlaceType"  type="text" style="width: 100px; height: 20px;" />
    &nbsp &nbsp
     <input id="btnSearch"  type="button" value="Search" onclick="return btnSearch_onclick()" />
     </div>

      <div id="map"></div>
  </body>
</html>




3 comments:

  1. 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

    ReplyDelete
    Replies
    1. Hi...this is not possible that google service search through your own database. v
      But 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.

      Delete
  2. Hi,

    Thanks for the code. It solved my problem.

    ReplyDelete

 
Top