Использование автозаполнения Google Места с помощью Meteor

Итак, я пытаюсь добавить строку поиска https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform в мое приложение Meteor. Сначала мне нужно было загрузить библиотеку Google Адресов. Однако эта ссылка также пытается напрямую написать в DOM, чтобы захватить другую ссылку. Meteor не позволяет этого, поэтому я решил загрузить два файла js, как это.

Template.listingSubmit.rendered = function(){
if (!this.rendered){
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places";
 document.body.appendChild(script);

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://maps.gstatic.com/cat_js/maps-api-v3/api/js/17/13/%7Bmain,places%7D.js";
 document.body.appendChild(script);

 this.rendered = true;
}
};

Это работает? Мой следующий вопрос: как инициализировать текстовое поле автозаполнения? Html в соответствующем шаблоне прост.

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>

Теперь я попытался добавить

var autocomplete = new google.maps.places.Autocomplete(
  (document.getElementById('autocomplete')),{types: ['geocode'] }
);

в Template.listingSubmit.rendered, но ничего не происходит. Я получаю ошибку, не определенную Google. Что пошло не так?

Ответы

Ответ 1

Я столкнулся с одной и той же проблемой и просто нашел решение. Вот что я сделал.

Сначала добавьте следующий пакет в свой проект с помощью:

`mrt add googlemaps`

или, если вы используете meteor >= 0.9:

meteor add mrt:googlemaps

Затем создайте следующий файл:/client/lib/googlePlaces.js

Поместите следующий код внутри этого js файла:

GoogleMaps.init({
  'sensor': false, //optional
  'key': 'your api key here!', //optional
  'language': 'en',  //optional
  'libraries': 'places'
});

Очевидно, замените ключ api на свой ключ! Этот код инициирует вызов google api и загружает места script клиенту.

Теперь, чтобы ответить на ваш вопрос о том, как заставить автозаполнение работать. Ваши HTML и js выглядят отлично, за исключением одного. Вам нужно обернуть js в функцию window.onload, чтобы он дождался загрузки google api script!

HTML

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>

JS

window.onload = function() {
  var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),{types: ['geocode'] }
  );
};

Я не тестировал ваш HTML/JS, но он очень похож на мой.

Ответ 2

Думаю, я поделился бы тем, что, наконец, сработало для меня
Пакет остается прежним, но js изменился:

Template.myTemplateName.rendered = function () { 
    window.onload = function() { 

        input = document.getElementById('autocomplete'); 
        autocomplete = new google.maps.places.Autocomplete(input); 

        // When the user selects an address from the dropdown, 
        google.maps.event.addListener(autocomplete, 'place_changed', function() { 

             // Get the place details from the autocomplete object. 
             var place = autocomplete.getPlace(); 

             console.log("place: " + JSON.stringify(place) ); 
        }); 
    }; 
};

Ответ 3

Это решение, которое, наконец, сработало для меня: я добавил пакет mrt:googlemaps.

Затем я настраиваю googlePlaces.js следующим образом:

GoogleMaps.init({
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en',  //optional
'libraries': 'places'
 });

Затем я установил переменную для каждого поля ввода, которая собиралась использовать API автозаполнения, и установите для него шаблон .render равным:

   var initAutoCompleteProfile = function() {
      var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),{types: ['geocode'] }
      );
};

var initAutoCompletePost = function() {
      var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),{types: ['geocode'] }
      );
};

Template.userUpdate.rendered = initAutoCompleteProfile;

Template.postSubmit.rendered = initAutoCompletePost;

Идентификатор элемента был "автозаполнен" для каждого элемента, который будет его использовать, но самое главное, что вы делаете переменную для каждого элемента, который будет использовать ее для каждого шаблона, а затем установите этот шаблон rendered, равный этой переменной.

Вопрос/решение здесь: Метеор Google Maps Autocomplete работает только один раз на нескольких шаблонах