https://github.com/lewagon/google-place-autocomplete

Exemple of Google Place Autocomplete Javascript API
https://github.com/lewagon/google-place-autocomplete

Last synced: 11 months ago
JSON representation

Exemple of Google Place Autocomplete Javascript API

• Host: GitHub
• URL: https://github.com/lewagon/google-place-autocomplete
• Owner: lewagon
• Created: 2014-11-02T11:04:06.000Z (about 11 years ago)
• Default Branch: gh-pages
• Last Pushed: 2015-09-01T13:47:51.000Z (over 10 years ago)
• Last Synced: 2025-01-11T06:45:57.140Z (about 1 year ago)
• Language: HTML
• Homepage: http://www.lewagon.org/blog/tuto-google-place-autocomplete
• Size: 198 KB
• Stars: 43
• Watchers: 8
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Google Place Autocomplete

This sample code show you how to quickly use the Places Autocomplete javascript

API from Google.

[See demo right now](http://lewagon.github.io/google-place-autocomplete)

## Code

Look at the [index.html](index.html) file, you'll see a very standard form.

The input with id `user_input_autocomplete_address` is very important as it

is bound to an `autocomplete` object in the `autocomplete.js` code.

The code you see is not dependent on jQuery, also the `initializeAutocomplete`

method has to be called when `google` is ready, not just when the DOM is ready.

## API Key

In order to get a lot of requests for free to the API, you need to create a

new project under the [Google API Console](https://code.google.com/apis/console).

For this project, enable the Google Maps Javascript API v3:

![](readme-images/enable-api.png)

Then, for this project, create a new "Browser Key", the one you'll put in the

`index.html` file when calling the `https://maps.googleapis.com/maps/api/js` script.

![](readme-images/create-new-browser-key.png)

Make sure to specify referers so that **only you** can use this key! Remember,

you API calls are limited per day.

![](readme-images/key-referers.png)

## Documentation

[Full Reference](https://developers.google.com/maps/documentation/javascript/places-autocomplete)