API Google Maps v3 - автозаполнение (адрес)

Попытка получить автоматическую полную работу для моего приложения карт Google.

Вот текущий код:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

Javascript

    var input = document.getElementById('address');
    var options = {
        componentRestrictions: {country: 'au'}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);

К сожалению, ничего не происходит при вводе адреса.

Любые идеи?

Спасибо заранее.

Изменить: на самом деле я получаю следующую ошибку:

Uncaught TypeError: невозможно прочитать свойство autocomplete из undefined

Не уверен, почему код помещается в мою функцию инициализации карты.

Изменить 2: Исправлено. Ответ ниже.

Ответы

Ответ 1

Фиксированный. Библиотека автозаполнения на самом деле представляет собой отдельную библиотеку, которая должна быть явно загружена. Следующая проблема решена.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&sensor=false"></scr‌​ipt>

Ответ 2

Ваше исправление сработало и для меня. Я использую подключаемый модуль Geocomplete jQuery http://ubilabs.github.com/geocomplete/ и инструкции на их домашней странице говорят об использовании этого

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>

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

См. документацию для API Карт Google здесь https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

Ответ 3

если вы используете угловое приложение:

Если вы используете карты Google, вы должны импортировать API в ngmodule, как это

@NgModule({
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot({
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    })
  ],
  providers: [...],
  bootstrap: [...]
})

библиотека 'sites' необходима для использования модуля автозаполнения.

Чем использовать это так:

import {MapsAPILoader} from "@agm/core";
...
constructor(private mapsAPILoader: MapsAPILoader,
...
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

      autocomplete.addListener("place_changed", () => { ...

Ответ 4

Поскольку этот вопрос помог мне, я решил, что помогу всем, у кого эта проблема возникла в 2019 году. В 2019 году вы добавляете импорт API Google Maps следующим образом:

https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY

Затем добавьте & библиотеки = места до конца, чтобы все сказанное и сделанное выглядело так:

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places">
</script>

Ответ 5

Спасибо Мэтту за ответ! Как-то кажется важным не опускать атрибут type="text/javascript" на тег <script> при использовании libraries=places.

Не работает:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

Работает:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Вариант обратного вызова также работает (с установленной функцией initMap):

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>

Это похоже на другой SO ответ и не соответствует официальной документации (если не указать key в URL-адресе),

Ответ 6

Вы должны добавить 'defer async' к атрибуту script, например:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
            async defer></script>

Ответ 7

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

я просто создаю новый ключ API и заменяю его вместо старого.

меня устраивает

благодарю вас