Tip:
Highlight text to annotate it
X
Hi.
I'm Chris Broadfoot.
I'm an engineer on the Google Maps Developer Relations team.
In this tutorial, I'll be showing you how to get started
with the Google Places API.
The Google Places API gives you access to Google's
database of over 80 million places.
There's worldwide coverage and detailed information about
each and every place.
It's completely free to use, and in this tutorial, I'll be
showing you how to get started.
Before we begin, let me show you one of my favorite
websites built with the Places API.
mapofthedead.com shows you how to survive the zombie
apocalypse.
The first thing you'll notice is that it doesn't look
anything like Google Maps.
These guys are using a great map style that gives you a
fantastic undead look and feel.
Places that are important during the zombie apocalypse
are displayed and marked on the map, such as gun stores,
grocery stores, airports, and doctors.
I can move the character around, and based on where I
place him, new results are marked on the map.
I can also use the textbooks at the top of the page to
select a new location.
This is the best time to use Places Autocomplete.
A feature I'll be showing you how to use in a moment.
You, too, can build apps like the one I just showed.
It's worth reading through the documentation to get a good
understanding of the capabilities.
In this tutorial I'll be demonstrating some of the
features of the Places API.
The Google Places API is accessible via our Web Service
from the language of your choice or from your website
using the library in the Maps JavaScript API.
The Web Service can send responses
formatted as JSON or XML.
Today, I'll be using the JSON version.
To start using the Google Places API, you first need to
sign up for a Places API key.
This allows us to issue you more quota when your
application exceeds the courtesy limit of 1,000
requests per day.
First, visit the developer console found over on the
Google Developers website.
You'll need to create a project, then enable the
Places API.
Read through the terms of service carefully.
There are some important points, including some about
use of data returned from the API.
Once you've done that, you can now obtain your key from the
API access screen.
This key will be used for all web service requests.
Let's take a look at Places Auotocomplete.
Google Places Autocomplete allows you to add similar
functionality to the Google Maps
search box on your website.
Places and addresses are suggested as I type into the
standard HTML input box.
As I begin typing 1600 Amphitheatre Parkway, Google's
Mountain View headquarters, I get suggestions based on my
partial input.
Note that the matching substring is highlighted on
each suggestion.
Using Autocomplete via the JavaScript library is simple.
First, you need to include the Places library when you load
the Google Maps JavaScript API.
Just add libraries equals Places to your bootstrap.
Add Autocomplete to an existing input element in your
page by passing in the element as a parameter to the
Autocomplete's constructor.
Autocomplete functionality is now attached
to the input element.
To be notified of when a user selects a place, listen to the
place changed event on the Autocomplete object.
Details of the selected place can then be obtained inside an
event listener.
Just call Get Place on the Autocomplete object to
retrieve the details about the selected place.
In this example, we simply output three fields--
the formatted address, the URL, and location.
There are many other fields that you can use in your
application.
Autocomplete is also available as a web service accessible
from any programming language.
Using the web service opens up more creative possibilities of
displaying and augmenting results.
Just use your favorite HTTP package or library.
Send an HTTP get request.
Include the partial input from the user.
In addition, there are two required parameters for each
web service query--
key and sensor.
Use the key that you generated previously from
the developer console.
The sensor must be set to true if the location is derived
from any sensor such as a GPS.
Otherwise, it's safe to set it to false.
The response contains a status code and a list of
predictions.
Each prediction will be comprised of a description,
which is a string that you should present to the user, a
breakdown of the terms, which make up the suggestion, a list
of the substrings matched to the user input--
you can highlight it in your user interface--
and an ID, which we'll ignore for now.
You also get a place reference, which you can use
to fetch additional Place details.
Place details can be fetched using a place reference.
Again, send an HTTP get request to
the details end point.
The only other required parameters are key and sensor,
which I mentioned previously.
Attributes of the place will be returned.
Some sample output is shown here.
And the response will contain a status code, data
attributions formatted as HTML, and a place result
structure containing detailed information such as name,
location, formatted instruction address, category
phone number, amongst other attributes.
Look at the documentation for a complete list.
While a details request is available using the JavaScript
library, it's not necessary to use it if you're using the
Autocomplete control.
Details are returned automatically upon selection
of a place in the dropdown.
You might still want to store the reference for later
retrieval of the place details.
It's possible to perform some filtering on the
Autocomplete API.
The first kind of filter is the type filter.
This refines predictions based on the type of result.
There are currently four options--
geocode, establishment, regions, and cities.
Geocode will return addresses and regions, and
establishments will return businesses.
The next kind of filter allows restriction of predictions to
a single country.
Simply add the components parameter.
In this example, all Autocomplete predictions are
restricted to France.
This is also valid on the Autocomplete control.
Just set the component restrictions property.
As I begin typing California, the Autocomplete control will
only offer me suggestions in France.
Autocomplete is optimized to select a place based on
partial input.
It's optimized for very low latency so that users see
results immediately after every key press.
Places searches are more powerful.
Complete search criteria is at your disposal.
Send an HTTP get query to the search end point.
You should specify location and a radius.
You will receive a status code, data attributions in
HTML format, and an array of place results.
You'll notice that compared to Autocomplete responses, much
more information is returned about each place.
Places search is also available from
the JavaScript API.
Simply create a place of service object, then call the
search function.
You'll need to pass in a callback function that will be
called with the place results.
In this example, we simply print the name of types of
each place that's returned.
It's also possible to restrict your search by category by
using the types of parameter.
We support more than 130 types, including bar,
restaurant, lodging, shop, and many more.
You can see the complete list in our Places reference docs.
In this example, the query provided searches for ATMs
around the Sydney central business district.
Sometimes, the type of place you want to search for is not
included in our place types.
For example, if you'd like to search for surf schools, you
can use the keyword parameter.
The places API will match the keyword provided against all
known text associated with a place, including its website
and user reviews.
It's also useful to refine a type search.
For example, if you'd like to search for Italian
restaurants, you can do a search for types equals
restaurant and set keyword to Italian.
Places search results can also be refined by exact
matches of the name.
Just specify the name parameter.
In the previous examples, results were ranked according
to their prominent score.
Alternatively, results may be ranked by distance from the
center of the query.
Just specify the rank by parameter.
When using distance ranking, you must also specify some
other search criteria.
In example here, we used distance ranking and keyword
filtering to find the closest sushi restaurant.
This was just an overview of the Google Places API.
There are many more details and features that you can
explore over on the Google Developers website.
Thanks for listening, and I look forward to seeing the
apps that you develop.