Hello, and welcome to this episode of Google Developers
Live.
I'm Sarah Maddox from the Google Maps Developer Relations team.
In this video you will learn how to add a place autocomplete
widget to a map created with the Google Maps JavaScript API.
I'll also show you how an autocompete widget can
be useful even without a map to auto-fill an address
form for example.
Let's take a look at it in action.
Autocomplete gives your applications
the type ahead search behavior of the search field on a Google
map.
Start typing something into the address box and autocomplete
supplies predictions.
You can configure the autocomplete widget
to return specific types of places,
geographical places like towns and cities,
or establishments like pizza places,
or regions in other geographical areas.
If no type is specified the widget will return all types.
If you haven't already seen our videos
on getting started with the JavaScript API,
now is a really good time to watch them.
Let's get started with the code.
If you've created a map before you'll
recognize this as the basic JavaScript
used to create a map.
Place autocomplete is part of the Google Places library.
So our first step is to add the Google Places
library to the JavaScript API.
There are a number of libraries that
provide additional functionality for the JavaScript API
and one of them is the Google Places library.
So to add a library, include the libraries parameter
in the JavaScript API Loader.
Here I've specified libraries=places.
Autocompete adds a text input element to your page
and responds with predictions when
the user types into the text box.
So, we need to define an HTML input element of timed text.
And next we can set some options for the autocomplete widget.
I've decided to use a default area for the search conducted
by autocomplete.
To define the area, I've created a LatLngBounds object.
It defines a rectangle on the earth
by setting the latitude and longitude
for the southwest corner and for the northeast
corner of the rectangle.
The autocomplete will bias its search to this area
but not restrict the results to that area.
I've decided to bias my search results
to an area in Sydney, Australia.
I've also created the variable, which
I've called options, that contains the bounds object.
Now, we hook up the HTML input element as a variable
and add some magic to push the autocomplete widget
onto the map canvas.
And finally create the autocomplete
object, passing it, the input element,
and the options object.
Let's take a look at the autocomplete widget in action
again.
So one thing to note is that by default autocomplete
will automatically determine the user's location by looking
at their IP address and will bias the search
results to that location.
You can turn off this location awareness
by setting the bounds to encompass the whole world.
Use bounds of (-90, -180) and (90, 180.)
You can also set the bounds to the browser's
navigated geolocation object.
And there are other options that you
can use to customize the autocomplete widget.
The details are all in the documentation.
Here's a hint, you can use the geocoding API
to find the latitude and longitude
coordinates of the location you have in mind.
So here's a link to the geocoding API documentation.
OK, let's think outside the map, how
about using autocomplete to auto-fill an address form.
There's a really nice example in the documentation, which
I'm just going to show you quickly.
And you could come along later and have
a look at the code in more detail.
Here's my address form.
Start typing the address where it says enter your address
and autocomplete supplies the predictions.
When I select one of these predicted
places the JavaScript I have takes
the users getPlace to retrieve the information retrieved
from the Google Places services and puts the address
into components on the form.
Let's take a look at the code for the address box
by scrolling down on this documentation page.
We've supplied the code after the sample.
So we use getPlace to get the information
about the place including the address
and then we take each element of the address
and parse it and put it into the form.
When we use a selected place from the list information
about the place is returned to the autocompete object
and your application can grab that information via getPlace
and use it to populate the fields on your form.
So as I said, you can go to a documentation
and have a closer look at the code
and the address form in action.
What about styling.
You can style the autocomplete dropdown
to suit your own branding or site design.
So let's see a simple example.
In this example I've colored my autocomplete box
a nice varnished yellow and styled the dropdown to match.
So that's a really simple example of styling.
The documentation has all the details about the CSS classes
that are available.
Let's have a look at the CSS that I used.
I've just styled the pac-container class
and the documentation describes all the other classes
available.
If JavaScript isn't your thing or if you're
working on a mobile app, have a look at the Google Places web
service tool, what we've been looking at
is the JavaScript library.
I hope you've enjoyed this video from Google Developers Live.