https://github.com/sryze/amp-google-places-autocomplete

Example implementation of a Google Places autocomplete for AMP pages
https://github.com/sryze/amp-google-places-autocomplete

amp autocomplete google-places-api

Last synced: 4 months ago
JSON representation

Example implementation of a Google Places autocomplete for AMP pages

• Host: GitHub
• URL: https://github.com/sryze/amp-google-places-autocomplete
• Owner: sryze
• Created: 2018-03-05T00:41:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-09T14:23:34.000Z (over 7 years ago)
• Last Synced: 2025-01-03T07:48:26.985Z (9 months ago)
• Topics: amp, autocomplete, google-places-api
• Language: HTML
• Homepage:
• Size: 31.3 KB
• Stars: 8
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Google Places Autocomplete

This is just an example of how to implement an autocomplete list for an address input (in this

case cities) using AMP and Google Places Autocomplete APIs. It is based on the [Autosuggest](https://ampbyexample.com/advanced/autosuggest/) example.

[Demo](https://amp-google-places-autocomplete.herokuapp.com/autocomplete.html)

![Screenshot](screenshot.png)

Requirements

------------

1. An API key for Google Places. You can get one here:

   https://developers.google.com/places/web-service/get-api-key

2. A custom endpoint to request autocomplete info from the 

   [Place Autocomplete API](https://developers.google.com/places/web-service/autocomplete).

   This is necessary because `amp-list` requires a CORS endpoint and therefore the Places web

   services can't be used directly because it doesn't allow your site's origin (not an expert

   in CORS but that is how I understand it). 

   

   For example, see [`autocomplete-api.php`](autocomplete-api.php). To run this script:

   ```sh

   cd amp-google-places-autocomplete

   php -S localhost:3000

   ```

3. Google [requires](https://developers.google.com/places/web-service/policies#logo_requirements)

   inclusion of a "Powered by Google" logo somewhere in the autocomplete dropdown. In this example

   it's included at the bottom of the dropdown similar to the official (non-AMP) autocomplete

   by Google.