🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

placeSearch.js is a very small jQuery plugin that enabled you to select geolocated suggestions from a dropdown list using Google Places API.

Google-Maps Place-Autocomplete

Documentation

placeSearch.js

is a thin wrapper around Google's Places, NearbySearch, AutoComplete, and Maps services implemented as a jQuery plugin. My kid daughter wants to make a website to help her search for restaurants so I wrote this solely for that purpose and the documentation is targeted to a ten year old.


Usage

Do not include any Google scripts manually, the plugin will do it. Just include the plugin script.

<script src="placeSearch.js"></script> 

Overview

The plugin attaches to your location search box and allows Google to provide location choices as you type. When the user clicks on the location they want, Google will provide data for all the places in that area to your web application so you can display them in your web page.

If you want, the plugin can also draw a Google Map of the search results.

The plugin takes an object with 5 possible properties. First Look at the example and then I'll walk through it and explain the properties.

$("#searchbox").placeSearch({ 	key: "...", 	type: "restaurant", 	map: "#map", 	markerCallback: function(place){}, 	callback: function(places){} }); 
  • The first line creates a jQuery object that represents an <input> element which has an id attribute of searchbox. Then we create the plugin instance on the jQuery object by passing it an object with certain properies defined on the next lines.
  • The first property we have to define is the key property. This property is required. You must get your key by signing into your Google account, going to this page and clicking on the button that says "GET A KEY".
  • The next property is the type of places you want to search for. The complete list of valid types is here. You may also pass in an array.
  • The next property tells the plugin that we want it to draw a map inside of a <div> element which has an id attribute of map. If you don't want to show a map you don't have to define this property.
  • The markerCallback property is a function that is called whenever a marker on the map is clicked. One place object is passed to this function. Do not define this property unless you have defined the map property.
  • The callback property is function that is called when all the results are gathered and these results are passed into the function as an array of place objects.

Place Objects

Place objects are generated by the plugin for consistency and all contain the following properties:

  • name: The name of the place
  • address: The address of the place
  • phone: The formatted phone number of the place
  • photo: The URL for a photo of the place (or null)
  • rating: The rating out of a maximum of 5 stars
  • website: The website for the place
  • place_id: Among other things, the place id can be used to generate a URL to write a review, eg...
  • reviews: An array of reviews objects, each containing the following properties:
    • author_name: Name of the author
    • author_url: Author's Google URL
    • profile_photo_url: Author's photo URL
    • rating: Rating given by this author out of 5 stars
    • relative_time_description: Textual description of elapsed time
    • text: The text of the review
    • time: Unix timestamp

License

WTFPL – Do What the Fheck You Want to Public License


You May Also Like