Автозаполнение Google Places в приложении Rails не работает надежно

Question

У меня есть форма в моем приложении Rails, где я использую API Google Адресов для автозаполнения, но я не могу заставить его работать каждый раз. Каждый раз, когда вы загружаете страницу, где находится форма, это похоже на рулон кости: иногда работает JS, иногда это не так.

Кстати, у меня есть несколько других javascripts, которые также иногда не работают, но те, которые для автозаполнения google являются самыми причудливыми, и они критически важны.

Вот установка:

1 ° заголовка Моего HTML имеет:

<%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
<%= yield :javascript_includes %> 

Тогда в моем теле, я имею content_for тега, выданные в голове

<% content_for :javascript_includes do %> 
    <%= javascript_include_tag "application", "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" %> 

    <script type="text/javascript"> 
    function initializeAutocomplete(){ 
     var input = document.getElementById('offer_location'); 
     var options = { 
     types: ['(cities)'] 
     }; 

     var autocomplete = new google.maps.places.Autocomplete(input, options); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     var lat = place.geometry.location.lat(); 
     var lng = place.geometry.location.lng(); 
     $('#offer_latitude').val(lat) 
     $('#offer_longitude').val(lng) 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initializeAutocomplete); 
    </script> 
<% end %> 

Раньше у меня был скрипт с initializeAutocomplete в отдельном файле .js, который был загружен через Asset Pipeline, но дал аналогичные результаты: автозаполнение работало только на половину t он время ... (на самом деле я чувствую, что это провалилось еще чаще)

Я думаю, что проблема связана с тем, когда загружаются разные элементы и когда срабатывает обратный вызов. Вот примеры того, что я пытался изменить:

• с помощью $(window).load и $(document).ready вместо addDomListener(window, 'load', initializeAutocomplete)

• положить скрипт в отдельном google-autocomplete.js файла, загруженного в Asset Pipeline (а значит, он был загружен ПЕРЕД ссылка на API, указанную в теге content_for

• , вставляющий скрипт в отдельный файл google-autocomplete.js, не включенный в состав Asset Pipeline и вызываемый сразу после ссылки API в тегах content_for

Большое спасибо за вашу помощь!

- EDIT -

В конце концов выясняется, что это был turbolinks баловаться с моим Jquery триггеров, в частности одно для автозаполнения Google. Найден ответ there, с которым я исправил все мои JS.

Answer 1

Не уверен, если это устраняет фактическую ошибку, но попробуйте вызвать функцию с $(function() {initializeAutocomplete()}); - это аккуратнее альтернатива $(document).ready(function(){

Я бы поставил его так:

<% content_for :javascript_includes do %> 
    <%= javascript_include_tag "application", "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" %> 

    <script type="text/javascript"> 
    function initializeAutocomplete(){ 
     var input = document.getElementById('offer_location'); 
     var options = { 
     types: ['(cities)'] 
     }; 

     var autocomplete = new google.maps.places.Autocomplete(input, options); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     var lat = place.geometry.location.lat(); 
     var lng = place.geometry.location.lng(); 
     $('#offer_latitude').val(lat) 
     $('#offer_longitude').val(lng) 
     }); 
    } 
    $(function() { 
     initializeAutocomplete(); 
    }); 
    </script> 
<% end %> 

так вы определяете , затем дождитесь завершения загрузки dom.

Это не объясняет, почему это работает иногда, а не другие. Я бы исследовал, запустив материал из функции с помощью console.log()

Answer 2

Это может быть проблема рендеринга/загрузки.

Попробуйте это ...

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=place", async: => true, :defer => true %> 

Подробнее здесь ...

Script Tag - async & defer