0

I'm trying to convert this homepage to AMP: excurj.com. Is there a way to keep the Autocomplete feature on the hero search field ?

I saw this question. However, I need these two scripts to make autocomplete work:

<script src="{% static 'js/autocomplete.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=*****&callback=initMap&libraries=places"></script>

This is what's inside autocomplete.js:

// script to auto complete location

function initMap() {

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, 91), new google.maps.LatLng(-180, 80));
var options = {
types: ['(cities)'],
bounds: defaultBounds
};
var input = document.getElementById('google_city_search');

var autocomplete = new google.maps.places.Autocomplete(input, options);
}
Seif
  • 701
  • 4
  • 13
  • 32

1 Answers1

0

There are two ways that I know of:

  • Put the autocomplete part of your page inside a separate page and use amp-iframe to show it.

  • Use amp-list together with amp-bind to implement your own autocomplete.

As far as I know Google doesn't provide an AMP version of Place Autocomplete yet. I struggled with this myself a while ago and used the iframe approach at first. But since iframes are loaded with a noticeable delay and the autocomplete was basically the main part of the page I ended up doing it using the second method.

There is a good example of how to implement an autocomplete feature on AMP by Examples.

I made a modified version of that example specifically for Google Place Autocomplete, you can check it out here.

There is one downside to the second method: it is slightly slower because autocomplete requests have to go through your server before they reach Google's severs.

szx
  • 6,433
  • 6
  • 46
  • 67