Можно ли использовать API автозаполнения Google Карт / Мест через AJAX?

Question

Я пытаюсь использовать API автозаполнения Google Адресов, чтобы предварительно заполнить форму в веб-приложении данными об учреждении, чтобы упростить ввод данных. API довольно прост, но, похоже, не хочет принимать XHR.

$.getJSON("https://maps.googleapis.com/maps/api/place/autocomplete/json",{
  input: input.term,
  sensor: false,
  types: 'establishment',
  location: '40.01496,-105.27029',
  radius: 10000,
  key: Config.googleplaceskey
},function(places_response){
    //Some other code.
});

Я получаю это в консоли:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029&radius=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ. Origin http://localhost:8086 is not allowed by Access-Control-Allow-Origin.

Разве это не то, для чего предназначен API? Кто-нибудь знает обходной путь, или какие-то дополнительные параметры, которые я мог бы отправить, чтобы заставить его работать?

Обновление:

Вот ссылка на документацию API для этого вызова. В родительских документах даже есть примеры JSON-разбора JavaScript. Действительно сбивает с толку, почему это было бы закрыто на стороне сервера.

http://code.google.com/apis/maps/documentation/places/autocomplete.html

Answer 1

Вот фрагмент кода для будущих читателей, которые сталкиваются с этим сценарием.

Используя "API Адресов", а не "API Карт", этот фрагмент кода заполняет элементы моей формы (включая ввод, используемый для автозаполнения) возвращенными данными из Google.

/* Use google place API to auto complete the address field and populate form inputs */
function addressAutoComplete(){
    var planAddress = document.getElementById('mps_planaddress'),
        planCity = document.getElementById('mps_plancity'),
        planCounty = document.getElementById('mps_plancounty'),
        planZip = document.getElementById('mps_planzip'),
        planSub = document.getElementById('mps_plansubdivision'),
        options = {
            componentRestrictions: {country: 'us'}
    };
    autocomplete = new google.maps.places.Autocomplete(planAddress, options);
    // After the user selects the address
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        planSub.focus();
        var place = autocomplete.getPlace();
        planAddress.value = place.name;
        planCity.value = place.address_components[2].long_name;
        planCounty.value = place.address_components[3].long_name;
        planZip.value = place.address_components[6].long_name;
    });
}

Поместите слушателя в автозаполнение для "place_changed" (они выбрали что-то из списка), а затем заполните входные данные возвращенными данными.

Все это перечислено на странице Place Library Google .

Answer 2

Существует два способа доступа к API автозаполнения карт Google.

Первый класс google.maps.places.Autocomplete. Это обеспечивает всю необходимую реализацию в Javascript. Тем не менее, у вас есть полный контроль над стилем. Используйте CSS-классы pac-container и pac-item.

Второй - через веб-службу автозаполнения . Это не доступно через браузер из-за той же политики происхождения (нет API JSONP). Это наиболее гибкий способ доступа к результатам автозаполнения.

Answer 3

Чтобы делать междоменные вызовы AJAX, как это, вы должны использовать JSONP с обратным вызовом.Тем не менее, Google не предоставляет JSONP-интерфейс для автозаполнения .

Возможно, вы сможете использовать этот класс автозаполнения , хотя это не представляется возможнымстиль выпадающего списка.

РЕДАКТИРОВАТЬ Может быть способ сделать это.Проверьте плагин geo-autocomplete jQuery .Он имеет два демо .Однако я еще не посмотрел на это должным образом.

Answer 4

Вы можете перехватить результаты JSONP , возвращаемые функцией google.maps.places.Autocomplete , и использовать их по своему усмотрению.

По сути, вы переопределяете метод appendChild для элемента head, а затем отслеживаете элементы javascript, которые код автозаполнения Google вставляет в DOM для JSONP. По мере добавления элементов javascript вы переопределяете обратные вызовы JSONP, которые Google определяет для получения доступа к необработанным данным автозаполнения.

Это что-то вроде хака (здесь я пользуюсь (я использую jQuery, но для этого не требуется):

//The head element, where the Google Autocomplete code will insert a tag 
//for a javascript file.
var head = $('head')[0];  
//The name of the method the Autocomplete code uses to insert the tag.
var method = 'appendChild';  
//The method we will be overriding.
var originalMethod = head[method];

head[method] = function () {
  if (arguments[0] && arguments[0].src && arguments[0].src.match(/GetPredictions/)) {  //Check that the element is a javascript tag being inserted by Google.
    var callbackMatchObject = (/callback=([^&]+)&|$/).exec(arguments[0].src);  //Regex to extract the name of the callback method that the JSONP will call.
    var searchTermMatchObject = (/\?1s([^&]+)&/).exec(arguments[0].src);  //Regex to extract the search term that was entered by the user.
    var searchTerm = unescape(searchTermMatchObject[1]);
    if (callbackMatchObject && searchTermMatchObject) {
      var names = callbackMatchObject[1].split('.');  //The JSONP callback method is in the form "abc.def" and each time has a different random name.
      var originalCallback = names[0] && names[1] && window[names[0]] && window[names[0]][names[1]];  //Store the original callback method.
      if (originalCallback) {
        var newCallback = function () {  //Define your own JSONP callback
          if (arguments[0] && arguments[0][3]) {
            var data = arguments[0][4];  //Your autocomplete results
            //SUCCESS! - Limit results here and do something with them, such as displaying them in an autocomplete dropdown.
          }
        }

        //Add copy all the attributes of the old callback function to the new callback function. This prevents the autocomplete functionality from throwing an error.
        for (name in originalCallback) {  
          newCallback[name] = originalCallback[name];
        }
        window[names[0]][names[1]] = newCallback;  //Override the JSONP callback
      }
    }

  //Insert the element into the dom, regardless of whether it was being inserted by Google.
  return originalMethod.apply(this, arguments);
};

Answer 5

Google, вероятно, разрешает использование этого API только через свой собственный Javascript API, который вы загружаете из файла Javascript maps.google.com. Отсутствие заголовка Access-Control-Allow-Origin говорит о том, что вы не должны использовать API иначе через Javascript.

В качестве альтернативы вы можете просто написать прокси-функцию на стороне сервера, которая вызывает Google API и передает результат на ваш собственный вызов $ .getJSON, но это, вероятно, противоречит Условиям обслуживания.

http://www.daniweb.com/web-development/php/code/216729

(отказ от ответственности: я не читал спецификации API для данного вызова функции)

Answer 6

Используйте библиотеку Places из API Google Maps Javascript: Javascript Places Autocomplete

API Адресов отличается от API Карт.

Answer 7

Вы можете обойти эту проблему, используя PHP.

В своем скрипте PHP используйте file_get_contents для запроса URL-адреса следующим образом:

$ Suggestions = json_decode (file_get_contents ('https://maps.googleapis.com/maps/api/place/autocomplete/json?input=blabla&sensor=false&types=establishment&radius=10000')

* 1006)* Затем вы можете просто использовать AJAX-запрос к вашему PHP-скрипту, который будет эффективно возвращать результаты, обходя междоменное ограничение.

Answer 8

Это междоменный запрос. Браузеры по умолчанию блокируют ответы от междоменных сайтов. Вам нужно использовать jsonp в качестве datatyoe. Просто Google тоже самое, и вы можете увидеть, как это можно сделать с помощью jquery API. У переполнения стека тоже есть вопросы.

В соответствии с той же политикой происхождения веб-страница, обслуживаемая сервером server1.example.com, не может нормально подключаться или взаимодействовать с сервером, кроме server1.example.com. Исключением является элемент HTML. Используя преимущества открытой политики для элементов, некоторые страницы используют их для получения кода Javascript, который работает с динамически генерируемыми данными в формате JSON из других источников. Этот шаблон использования известен как JSONP.

Обратите внимание, что Google Places не совместим с JSONP, поэтому вместо него я использовал API Google Places JavaScript.